Showing preview only (960K chars total). Download the full file or copy to clipboard to get everything.
Repository: JedWatson/react-select
Branch: master
Commit: 052e864b4990
Files: 302
Total size: 885.2 KB
Directory structure:
gitextract_m207rt_u/
├── .browserslistrc
├── .changeset/
│ ├── README.md
│ ├── config.json
│ └── getChangelogEntry.js
├── .circleci/
│ └── config.yml
├── .codesandbox/
│ └── ci.json
├── .coveralls.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── config.yml
│ ├── dependabot.yml
│ └── workflows/
│ └── release.yml
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc.js
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── babel.config.js
├── cypress/
│ ├── fixtures/
│ │ └── selectors.json
│ ├── integration/
│ │ ├── multi-select.spec.ts
│ │ └── single-select.spec.ts
│ └── tsconfig.json
├── cypress.json
├── docs/
│ ├── App/
│ │ ├── Footer.tsx
│ │ ├── GitHubButton.tsx
│ │ ├── Header.tsx
│ │ ├── PageNav.tsx
│ │ ├── ScrollSpy.tsx
│ │ ├── Section.tsx
│ │ ├── Sticky.tsx
│ │ ├── TwitterButton.tsx
│ │ ├── components.tsx
│ │ ├── index.tsx
│ │ └── routes.ts
│ ├── CHANGELOG.md
│ ├── ExampleWrapper.tsx
│ ├── NoMatch.tsx
│ ├── PropTypes/
│ │ ├── Async.ts
│ │ ├── Creatable.ts
│ │ ├── Select.ts
│ │ ├── components/
│ │ │ ├── ClearIndicator.ts
│ │ │ ├── Control.ts
│ │ │ ├── DropdownIndicator.ts
│ │ │ ├── Group.ts
│ │ │ ├── IndicatorsContainer.ts
│ │ │ ├── IndicatorsSeparator.ts
│ │ │ ├── Input.ts
│ │ │ ├── LoadingIndicator.ts
│ │ │ ├── LoadingMessage.ts
│ │ │ ├── Menu.ts
│ │ │ ├── MenuList.ts
│ │ │ ├── MultiValue.ts
│ │ │ ├── MultiValueContainer.ts
│ │ │ ├── MultiValueLabel.ts
│ │ │ ├── MultiValueRemove.ts
│ │ │ ├── NoOptionsMessage.ts
│ │ │ ├── Option.ts
│ │ │ ├── Placeholder.ts
│ │ │ ├── SelectContainer.ts
│ │ │ ├── SingleValue.ts
│ │ │ └── ValueContainer.ts
│ │ └── stateManager.ts
│ ├── Svg.tsx
│ ├── Table.tsx
│ ├── Tests.tsx
│ ├── _redirects
│ ├── data.ts
│ ├── examples/
│ │ ├── AccessingInternals.tsx
│ │ ├── AnimatedMulti.tsx
│ │ ├── AsyncCallbacks.tsx
│ │ ├── AsyncCreatable.tsx
│ │ ├── AsyncMulti.tsx
│ │ ├── AsyncPromises.tsx
│ │ ├── BasicGrouped.tsx
│ │ ├── BasicMulti.tsx
│ │ ├── BasicSingle.tsx
│ │ ├── ControlledMenu.tsx
│ │ ├── CreatableAdvanced.tsx
│ │ ├── CreatableInputOnly.tsx
│ │ ├── CreatableMulti.tsx
│ │ ├── CreatableSingle.tsx
│ │ ├── CreateFilter.tsx
│ │ ├── CustomAriaLive.tsx
│ │ ├── CustomClearIndicator.tsx
│ │ ├── CustomControl.tsx
│ │ ├── CustomDropdownIndicator.tsx
│ │ ├── CustomFilterOptions.tsx
│ │ ├── CustomGetOptionLabel.tsx
│ │ ├── CustomGetOptionValue.tsx
│ │ ├── CustomGroup.tsx
│ │ ├── CustomGroupHeading.tsx
│ │ ├── CustomIndicatorSeparator.tsx
│ │ ├── CustomIndicatorsContainer.tsx
│ │ ├── CustomInput.tsx
│ │ ├── CustomIsOptionDisabled.tsx
│ │ ├── CustomLoadingIndicator.tsx
│ │ ├── CustomLoadingMessage.tsx
│ │ ├── CustomMenu.tsx
│ │ ├── CustomMenuList.tsx
│ │ ├── CustomMultiValueContainer.tsx
│ │ ├── CustomMultiValueLabel.tsx
│ │ ├── CustomMultiValueRemove.tsx
│ │ ├── CustomNoOptionsMessage.tsx
│ │ ├── CustomOption.tsx
│ │ ├── CustomPlaceholder.tsx
│ │ ├── CustomSelectContainer.tsx
│ │ ├── CustomSelectProps.tsx
│ │ ├── CustomSingleValue.tsx
│ │ ├── CustomValueContainer.tsx
│ │ ├── DefaultOptions.tsx
│ │ ├── Experimental.tsx
│ │ ├── FixedOptions.tsx
│ │ ├── MenuBuffer.tsx
│ │ ├── MenuPortal.tsx
│ │ ├── MultiSelectSort.tsx
│ │ ├── OnSelectResetsInput.tsx
│ │ ├── Popout.tsx
│ │ ├── StyleCompositionExample.tsx
│ │ ├── StyledMulti.tsx
│ │ ├── StyledSingle.tsx
│ │ ├── Theme.tsx
│ │ └── index.tsx
│ ├── generate-magical-types/
│ │ ├── generate/
│ │ │ └── package.json
│ │ ├── package.json
│ │ ├── serialize/
│ │ │ └── package.json
│ │ └── src/
│ │ ├── generate.ts
│ │ ├── serialize.ts
│ │ └── types.ts
│ ├── index.css
│ ├── index.html
│ ├── index.tsx
│ ├── isArray.ts
│ ├── markdown/
│ │ ├── renderer.tsx
│ │ └── store.ts
│ ├── package.json
│ ├── pages/
│ │ ├── advanced/
│ │ │ └── index.tsx
│ │ ├── async/
│ │ │ └── index.tsx
│ │ ├── components/
│ │ │ └── index.tsx
│ │ ├── creatable/
│ │ │ └── index.tsx
│ │ ├── home/
│ │ │ └── index.tsx
│ │ ├── props/
│ │ │ └── index.tsx
│ │ ├── styles/
│ │ │ └── index.tsx
│ │ ├── typescript/
│ │ │ └── index.tsx
│ │ ├── upgrade/
│ │ │ └── index.tsx
│ │ └── upgrade-to-v2/
│ │ ├── index.tsx
│ │ └── props.tsx
│ ├── styled-components.tsx
│ ├── tsconfig.json
│ ├── utils.ts
│ └── webpack.config.ts
├── netlify.toml
├── package.json
├── packages/
│ └── react-select/
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── animated/
│ │ └── package.json
│ ├── async/
│ │ └── package.json
│ ├── async-creatable/
│ │ └── package.json
│ ├── base/
│ │ └── package.json
│ ├── creatable/
│ │ └── package.json
│ ├── package.json
│ ├── src/
│ │ ├── Async.tsx
│ │ ├── AsyncCreatable.tsx
│ │ ├── Creatable.tsx
│ │ ├── NonceProvider.tsx
│ │ ├── Select.tsx
│ │ ├── __tests__/
│ │ │ ├── Async.test.tsx
│ │ │ ├── AsyncCreatable.test.tsx
│ │ │ ├── Creatable.test.tsx
│ │ │ ├── Select.test.tsx
│ │ │ ├── StateManaged.test.tsx
│ │ │ ├── __snapshots__/
│ │ │ │ ├── Async.test.tsx.snap
│ │ │ │ ├── AsyncCreatable.test.tsx.snap
│ │ │ │ ├── Creatable.test.tsx.snap
│ │ │ │ ├── Select.test.tsx.snap
│ │ │ │ └── StateManaged.test.tsx.snap
│ │ │ ├── constants.ts
│ │ │ └── tsconfig.json
│ │ ├── accessibility/
│ │ │ ├── helpers.ts
│ │ │ └── index.ts
│ │ ├── animated/
│ │ │ ├── Input.tsx
│ │ │ ├── MultiValue.tsx
│ │ │ ├── Placeholder.tsx
│ │ │ ├── SingleValue.tsx
│ │ │ ├── ValueContainer.tsx
│ │ │ ├── index.ts
│ │ │ └── transitions.tsx
│ │ ├── async/
│ │ │ └── index.ts
│ │ ├── async-creatable/
│ │ │ └── index.ts
│ │ ├── base/
│ │ │ └── index.ts
│ │ ├── builtins.ts
│ │ ├── components/
│ │ │ ├── Control.tsx
│ │ │ ├── Group.tsx
│ │ │ ├── Input.tsx
│ │ │ ├── LiveRegion.tsx
│ │ │ ├── Menu.tsx
│ │ │ ├── MultiValue.tsx
│ │ │ ├── Option.tsx
│ │ │ ├── Placeholder.tsx
│ │ │ ├── SingleValue.tsx
│ │ │ ├── containers.tsx
│ │ │ ├── index.ts
│ │ │ └── indicators.tsx
│ │ ├── creatable/
│ │ │ └── index.ts
│ │ ├── diacritics.ts
│ │ ├── filters.ts
│ │ ├── index.ts
│ │ ├── internal/
│ │ │ ├── A11yText.tsx
│ │ │ ├── DummyInput.tsx
│ │ │ ├── RequiredInput.tsx
│ │ │ ├── ScrollManager.tsx
│ │ │ ├── index.ts
│ │ │ ├── useScrollCapture.ts
│ │ │ └── useScrollLock.ts
│ │ ├── stateManager.tsx
│ │ ├── styles.ts
│ │ ├── theme.ts
│ │ ├── types.ts
│ │ ├── useAsync.ts
│ │ ├── useCreatable.ts
│ │ ├── useStateManager.ts
│ │ └── utils.ts
│ └── tsconfig.json
├── storybook/
│ ├── .gitignore
│ ├── .storybook/
│ │ ├── .babelrc
│ │ ├── main.ts
│ │ └── preview.tsx
│ ├── components/
│ │ ├── field.tsx
│ │ ├── index.ts
│ │ ├── inline.tsx
│ │ ├── stack.tsx
│ │ └── svg.tsx
│ ├── data.ts
│ ├── package.json
│ ├── postcss.config.js
│ ├── stories/
│ │ ├── AccessingInternalsViaRef.stories.tsx
│ │ ├── AnimatedMulti.stories.tsx
│ │ ├── AsyncCallbacks.stories.tsx
│ │ ├── AsyncCreatable.stories.tsx
│ │ ├── AsyncMulti.stories.tsx
│ │ ├── AsyncPromises.stories.tsx
│ │ ├── AsyncSelectWithDefaultOptions.stories.tsx
│ │ ├── BasicGrouped.stories.tsx
│ │ ├── BasicMulti.stories.tsx
│ │ ├── BasicSingle.stories.tsx
│ │ ├── ClassNamesWithTailwind.stories.tsx
│ │ ├── ControlledMenu.stories.tsx
│ │ ├── Creatable.stories.tsx
│ │ ├── CreatableAdvanced.stories.tsx
│ │ ├── CreatableInputOnly.stories.tsx
│ │ ├── CreateFilter.stories.tsx
│ │ ├── CustomAriaLive.stories.tsx
│ │ ├── CustomClearIndicator.stories.tsx
│ │ ├── CustomControl.stories.tsx
│ │ ├── CustomDropdownIndicator.stories.tsx
│ │ ├── CustomFilterOptions.stories.tsx
│ │ ├── CustomFormatOptionLabel.stories.tsx
│ │ ├── CustomGetOptionLabel.stories.tsx
│ │ ├── CustomGetOptionValue.stories.tsx
│ │ ├── CustomGroup.stories.tsx
│ │ ├── CustomGroupHeading.stories.tsx
│ │ ├── CustomIndicatorSeparator.stories.tsx
│ │ ├── CustomIndicatorsContainer.stories.tsx
│ │ ├── CustomInput.stories.tsx
│ │ ├── CustomIsOptionDisabled.stories.tsx
│ │ ├── CustomLoadingIndicator.stories.tsx
│ │ ├── CustomLoadingMessage.stories.tsx
│ │ ├── CustomMenu.stories.tsx
│ │ ├── CustomMenuList.stories.tsx
│ │ ├── CustomMultiValueContainer.stories.tsx
│ │ ├── CustomMultiValueLabel.stories.tsx
│ │ ├── CustomMultiValueRemove.stories.tsx
│ │ ├── CustomNoOptionsMessage.stories.tsx
│ │ ├── CustomOption.stories.tsx
│ │ ├── CustomPlaceholder.stories.tsx
│ │ ├── CustomSelectContainer.stories.tsx
│ │ ├── CustomSelectProps.stories.tsx
│ │ ├── CustomSingleValue.stories.tsx
│ │ ├── CustomValueContainer.stories.tsx
│ │ ├── ExperimentalDatePicker.stories.tsx
│ │ ├── FixedOptions.stories.tsx
│ │ ├── Grouped.stories.tsx
│ │ ├── MenuBuffer.stories.tsx
│ │ ├── MenuPortal.stories.tsx
│ │ ├── MultiSelectSort.stories.tsx
│ │ ├── OnSelectKeepsInput.stories.tsx
│ │ ├── Popout.stories.tsx
│ │ ├── StyleCompositionExample.stories.tsx
│ │ ├── StyledMulti.stories.tsx
│ │ ├── StyledSingle.stories.tsx
│ │ ├── Tailwind.stories.tsx
│ │ ├── Theme.stories.tsx
│ │ └── UnstyledWithTailwind.stories.tsx
│ ├── styles/
│ │ └── tailwind.css
│ └── tailwind.config.js
├── test-setup.js
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .browserslistrc
================================================
> 0.25%
ie 11
not op_mini all
================================================
FILE: .changeset/README.md
================================================
# 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.
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@0.2.1/schema.json",
"changelog": "./getChangelogEntry",
"commit": false,
"linked": [],
"access": "public"
}
================================================
FILE: .changeset/getChangelogEntry.js
================================================
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,
};
================================================
FILE: .circleci/config.yml
================================================
version: 2
docker_defaults: &docker_defaults
docker:
- image: cypress/browsers:latest
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 type-check
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
================================================
FILE: .codesandbox/ci.json
================================================
{
"buildCommand": "build",
"packages": ["packages/*"],
"sandboxes": ["nfmxw"],
"node": "20"
}
================================================
FILE: .coveralls.yml
================================================
service-name: travis-ci
repo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR
================================================
FILE: .editorconfig
================================================
# 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
================================================
FILE: .eslintignore
================================================
coverage/*
cypress/plugins/*
cypress/support/*
**/dist/*
lib/*
node_modules/*
**/node_modules/*
================================================
FILE: .eslintrc.js
================================================
module.exports = {
extends: ['plugin:react-hooks/recommended', 'plugin:@typescript-eslint/base'],
parser: '@typescript-eslint/parser',
env: {
browser: true,
es6: true,
node: true,
},
plugins: ['react', '@typescript-eslint'],
rules: {
'@typescript-eslint/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': 0,
'@typescript-eslint/no-shadow': 2,
'no-trailing-spaces': 1,
'no-underscore-dangle': 1,
'@typescript-eslint/no-unused-expressions': 1,
'object-curly-spacing': [1, 'always'],
'@typescript-eslint/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,
'@typescript-eslint/semi': 2,
'@typescript-eslint/no-inferrable-types': 2,
strict: 0,
},
settings: {
react: {
version: 'detect',
},
},
};
================================================
FILE: .github/CONTRIBUTING.md
================================================
# 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 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
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: File a bug report
title: '<title>'
labels: [issue/bug-unconfirmed]
assignees: ''
---
**Thanks for using react-select!**
If you are going to ask a question or want to propose a change or a new feature, then please don't file an issue for this.
Questions and feature requests have their own place in our discussions section.
## 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 (v5) 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 v5 please fork the following code-sandbox:
https://codesandbox.io/s/react-select-v5-sandbox-y5jtm
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.
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: Feature request
url: https://github.com/JedWatson/react-select/discussions/categories/ideas
about: Got an idea for a feature or want to propose a change? Then this is the place for you.
- name: Question on usage
url: https://github.com/JedWatson/react-select/discussions/categories/q-a
about: If you have a question regarding the usage of the library.
- name: StackOverflow
url: https://stackoverflow.com/questions/tagged/react-select
about: Alternatively you can visit StackOverflow with the `[react-select]` tag
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: 'npm'
directory: '/'
schedule:
interval: 'weekly'
ignore:
- dependency-name: '*'
update-types:
['version-update:semver-minor', 'version-update:semver-patch']
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
branches:
- master
permissions:
contents: read
jobs:
release:
permissions:
# for changesets/action
contents: write
pull-requests: write
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v3
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 22.x
uses: actions/setup-node@v4
with:
node-version: 22.x
- name: Install Dependencies
run: yarn
- name: Create Release Pull Request or Publish to npm
uses: changesets/action@v1
with:
publish: yarn release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .gitignore
================================================
# 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
magical-types
================================================
FILE: .nvmrc
================================================
22
================================================
FILE: .prettierignore
================================================
coverage/*
cypress/plugins/*
cypress/support/*
**/dist/*
lib/*
node_modules/*
**/node_modules/*
**/magical-types/*
================================================
FILE: .prettierrc.js
================================================
module.exports = {
singleQuote: true,
trailingComma: 'es5',
overrides: [
{
files: '.changeset/pre.json',
options: { parser: 'json-stringify' },
},
],
};
================================================
FILE: CONTRIBUTING.md
================================================
# 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.
- All new features and changes need documentation.
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2022 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.
================================================
FILE: README.md
================================================
[](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.org). Initially built for use in [KeystoneJS](https://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).
We are an open source project that is continuously supported by the community.
React Select helps you develop powerful select components that _just work_ out of the box, without stopping you from customising the parts that are important to you.
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?
- [v3, v4, and v5 upgrade guide](https://react-select.com/upgrade)
- [v2 upgrade guide](https://react-select.com/upgrade-to-v2)
- 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:
```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 (
<div className="App">
<Select
defaultValue={selectedOption}
onChange={setSelectedOption}
options={options}
/>
</div>
);
}
```
## 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 programmatically
- `blur()` - blur the control programmatically
## 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)
- [TypeScript guide](https://www.react-select.com/typescript)
## TypeScript
The v5 release represents a rewrite from JavaScript to TypeScript. The types for v4 and earlier releases are available at [@types](https://www.npmjs.com/package/@types/react-select). See the [TypeScript guide](https://www.react-select.com/typescript) for how to use the types starting with v5.
# 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), [Tom Walker](https://github.com/bladey), [Nathan Bierema](https://github.com/Methuselah96), [Eric Bonow](https://github.com/ebonow), [Emma Hamilton](https://github.com/emmatown), [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 2022.
================================================
FILE: babel.config.js
================================================
module.exports = {
plugins: [
'@emotion/babel-plugin',
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-private-methods', { loose: true }],
'@babel/plugin-transform-runtime',
],
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
};
================================================
FILE: cypress/fixtures/selectors.json
================================================
{
"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",
"control": ".react-select__control",
"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",
"focusedOption": ".react-select__option--is-focused"
}
================================================
FILE: cypress/integration/multi-select.spec.ts
================================================
import selector from '../fixtures/selectors.json';
import cypressJson from '../../cypress.json';
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(cypressJson.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');
});
});
}
});
================================================
FILE: cypress/integration/single-select.spec.ts
================================================
import selector from '../fixtures/selectors.json';
import cypressJson from '../../cypress.json';
const setup = [
{
width: 1440,
height: 900,
viewport: 'macbook-15' as const,
device: 'Laptop',
},
{ width: 375, height: 667, viewport: 'iphone-6' as const, device: 'Mobile' },
{ width: 768, height: 1024, viewport: 'ipad-2' as const, device: 'Tablet' },
];
describe('Single Select', () => {
before(() => {
cy.visit(cypressJson.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')
// control should have aria-disabled
.get(selector.singleBasicSelect)
.find(selector.control)
.should('have.attr', 'aria-disabled', 'true');
});
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);
});
it(`Should focus next option on down arrow key press: ${viewport}`, () => {
cy.get(selector.singleGroupedSelect)
.click()
.find('input')
.type('{downarrow}', { force: true })
.get(selector.focusedOption)
.should('exist');
});
it(`Should focus next option on down arrow key press after filtering: ${viewport}`, () => {
cy.get(selector.singleGroupedSelect)
.click()
.find('input')
.type('o', { force: true })
.type('{downarrow}', { force: true })
.get(selector.focusedOption)
.should('exist');
});
});
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');
});
});
}
});
================================================
FILE: cypress/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"noEmit": true,
"strict": true,
"types": ["cypress"],
"esModuleInterop": true,
"resolveJsonModule": true
}
}
================================================
FILE: cypress.json
================================================
{
"baseUrl": "http://localhost:8000/cypress-tests",
"video": false
}
================================================
FILE: docs/App/Footer.tsx
================================================
/** @jsx jsx */
import { jsx } from '@emotion/react';
// const smallDevice = '@media (max-width: 769px)';
const largeDevice = '@media (min-width: 770px)';
const Wrapper = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
backgroundColor: '#FAFBFC',
borderTop: '1px solid #EBECF0',
color: '#7A869A',
fontSize: '0.85em',
zIndex: 1,
}}
{...props}
/>
);
const Container = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
boxSizing: 'border-box',
maxWidth: 800,
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: 20,
paddingRight: 20,
[largeDevice]: {
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
paddingBottom: 20,
paddingTop: 20,
},
}}
{...props}
/>
);
const A = (props: JSX.IntrinsicElements['a']) => (
<a
{...props}
css={{
color: '#505F79',
textDecoration: 'none',
':visited': {
color: '#505F79',
},
':hover': {
textDecoration: 'underline',
},
}}
target="_blank"
/>
);
export default function Footer() {
return (
<Wrapper>
<Container>
<p>
Copyright © <A href="https://twitter.com/JedWatson">Jed Watson</A>,
2022. MIT Licensed.
</p>
<p>
Thanks to <A href="https://www.thinkmill.com.au">Thinkmill</A> and{' '}
<A href="https://www.atlassian.com">Atlassian</A> for supporting this
project.
</p>
</Container>
</Wrapper>
);
}
================================================
FILE: docs/App/GitHubButton.tsx
================================================
/** @jsx jsx */
import { jsx } from '@emotion/react';
interface Props {
readonly count: number;
readonly repo: string;
}
const StarButton = ({ count, repo }: Props) => (
<div css={{ alignItems: 'center', display: 'inline-flex', minWidth: 128 }}>
<a
aria-label="Star react-select on GitHub"
css={{
alignItems: 'center',
display: 'flex',
borderRadius: 2,
color: '#253858',
backgroundColor: 'white',
boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',
cursor: 'pointer',
fontSize: 13,
fontWeight: 'bold',
padding: '6px 10px',
position: 'relative',
textDecoration: 'none',
':hover': {
boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.2)',
color: '#091e42',
},
':active': {
background: '#DFE1E5',
boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',
color: '#091e42',
bottom: -1,
},
}}
style={{
backgroundImage: 'linear-gradient(180deg, #fff 33%, #DFE1E5 100%)',
}}
href={repo}
target="_blank"
>
<svg
version="1.1"
width="16"
height="16"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
/>
</svg>
<span css={{ paddingLeft: 4 }}>Star</span>
</a>
<a
css={{
backgroundColor: 'white',
borderRadius: 2,
color: '#253858',
cursor: 'pointer',
display: 'inline-block',
fontSize: 13,
fontWeight: 500,
letterSpacing: '-0.01em',
marginLeft: 6,
opacity: count > 0 ? 1 : 0,
padding: '6px 7px',
position: 'relative',
textDecoration: 'none',
transition: 'opacity 200ms',
'&:before': {
border: '4px solid transparent',
borderRightColor: 'white',
content: '" "',
height: 0,
left: -8,
top: '50%',
marginTop: -4,
position: 'absolute',
width: 0,
},
}}
href={`${repo}/stargazers`}
target="_blank"
>
<span>{count && count.toLocaleString()}</span>
</a>
</div>
);
export default StarButton;
================================================
FILE: docs/App/Header.tsx
================================================
/** @jsx jsx */
import fetch from 'unfetch';
import { Component, Ref, RefCallback } from 'react';
import { jsx } from '@emotion/react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import Select, { StylesConfig } from 'react-select';
import GitHubButton from './GitHubButton';
import TwitterButton from './TwitterButton';
import isArray from '../isArray';
const smallDevice = '@media (max-width: 769px)';
const largeDevice = '@media (min-width: 770px)';
interface Change {
value: string;
icon: string;
label: string;
}
const changes = [
{
value: '/typescript',
icon: '🛠️',
label: 'Written in TypeScript',
},
{
value: '/props',
icon: '❤️',
label: 'Simpler and more extensible',
},
{
value: '/styles',
icon: '🎨',
label: 'CSS-in-JS styling API',
},
{
value: '/components',
icon: '📦',
label: 'Replaceable component architecture',
},
{
value: '/advanced',
icon: '🔥',
label: 'Lots of advanced functionality',
},
{
value: '/upgrade',
icon: '🗺',
label: 'Check out the Upgrade Guide',
},
];
function getLabel({ icon, label }: Change) {
return (
<div style={{ alignItems: 'center', display: 'flex' }}>
<span style={{ fontSize: 18, marginRight: '0.5em' }}>{icon}</span>
<span style={{ fontSize: 14 }}>{label}</span>
</div>
);
}
const headerSelectStyles: StylesConfig<Change, boolean> = {
control: (base, { isFocused }) => ({
...base,
backgroundClip: 'padding-box',
borderColor: 'rgba(0,0,0,0.1)',
boxShadow: isFocused ? '0 0 0 1px #4C9AFF' : undefined,
':hover': {
borderColor: 'rgba(0,0,0,0.2)',
},
}),
option: (base) => ({
...base,
padding: '4px 12px',
}),
placeholder: (base) => ({
...base,
color: 'black',
}),
};
const Gradient = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
backgroundColor: '#2684FF',
backgroundImage: 'linear-gradient(135deg, #2684FF 0%, #0747A6 100%)',
color: 'white',
position: 'relative',
zIndex: 2,
[largeDevice]: {
boxShadow: '0 5px 0 rgba(0, 0, 0, 0.08)',
},
}}
{...props}
/>
);
const Container = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
boxSizing: 'border-box',
maxWidth: 800,
marginLeft: 'auto',
marginRight: 'auto',
padding: 20,
[largeDevice]: {
paddingBottom: 40,
paddingTop: 40,
},
}}
{...props}
/>
);
interface HeaderState {
readonly stars: number;
}
const apiUrl = 'https://api.github.com/repos/jedwatson/react-select';
class Header extends Component<RouteComponentProps, HeaderState> {
nav: HTMLElement | undefined;
content!: HTMLElement;
state: HeaderState = { stars: 0 };
componentDidMount() {
this.getStarCount();
}
getStarCount = () => {
fetch(apiUrl)
.then((res) => res.json())
.then((data) => {
const stars = data.stargazers_count;
this.setState({ stars });
})
.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) => {
if (!ref) return;
this.content = ref;
};
getContentHeight = () => {
if (!this.content) {
return 'auto';
}
return this.content.scrollHeight;
};
render() {
const { children, history } = this.props;
const { stars } = this.state;
return (
<Gradient>
{children}
<Collapse
isCollapsed={!this.isHome()}
height={this.getContentHeight()}
innerRef={this.setContentRef}
>
<Container>
<h1
css={{
fontSize: '2.4em',
fontWeight: 'bold',
lineHeight: 1,
margin: 0,
marginTop: '-0.2em',
textShadow: '1px 1px 0 rgba(0, 82, 204, 0.33)',
color: 'inherit',
[largeDevice]: {
fontSize: '3.6em',
},
}}
>
React Select
</h1>
<Content
stars={stars}
onChange={(opt) => {
history.push(opt.value);
}}
/>
</Container>
</Collapse>
</Gradient>
);
}
}
interface CollapseProps {
readonly height: 'auto' | number;
readonly isCollapsed: boolean;
readonly innerRef: Ref<HTMLDivElement>;
}
const Collapse = ({
height,
isCollapsed,
innerRef,
...props
}: CollapseProps & JSX.IntrinsicElements['div']) => {
return (
<div
ref={innerRef}
css={{
height: isCollapsed ? 0 : height,
overflow: isCollapsed ? 'hidden' : undefined,
transition: 'height 260ms cubic-bezier(0.2, 0, 0, 1)',
}}
{...props}
/>
);
};
interface ContentProps {
readonly onChange: (option: Change) => void;
readonly stars: number;
}
const Content = ({ onChange, stars }: ContentProps) => (
<div
css={{
marginTop: 16,
[largeDevice]: { display: 'flex' },
}}
>
<div css={{ flex: 1, [largeDevice]: { paddingRight: 30 } }}>
<p
style={{
fontSize: '1.25em',
lineHeight: 1.4,
marginTop: -5,
}}
>
A flexible and beautiful Select Input control for ReactJS with
multiselect, autocomplete, async and creatable support.
</p>
<div css={{ flex: 1, alignItems: 'center' }}>
<GitHubButton
count={stars}
repo="https://github.com/jedwatson/react-select"
/>
<TwitterButton />
</div>
</div>
<div
css={{
color: 'black',
flex: '0 1 320px',
[smallDevice]: {
paddingTop: 30,
},
}}
>
<div className="animate-dropin">
<Select
formatOptionLabel={getLabel}
isSearchable={false}
options={changes}
onChange={(option) => {
if (option && !isArray(option)) {
onChange(option);
}
}}
value={null}
placeholder="🎉 Feature Highlights"
styles={headerSelectStyles}
/>
</div>
</div>
</div>
);
export default withRouter(Header);
================================================
FILE: docs/App/PageNav.tsx
================================================
/** @jsx jsx */
import { Component, FunctionComponent, MouseEvent, RefCallback } from 'react';
import { jsx } from '@emotion/react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
import { animatedScrollTo } from 'react-select/src/utils';
import routes from './routes';
import ScrollSpy from './ScrollSpy';
import Sticky from './Sticky';
import store, { Data } from '../markdown/store';
const navWidth = 180;
const appGutter = 20;
const contentGutter = 30;
const smallDevice = '@media (max-width: 769px)';
const largeDevice = '@media (min-width: 770px)';
const NavSection: FunctionComponent<RouteComponentProps> = () => {
const routeKeys = Object.keys(routes);
return (
<Switch>
{routeKeys.map((r) => (
<Route key={r} path={r} render={(p) => <PageNav {...p} />} />
))}
</Switch>
);
};
interface NavState {
readonly links: readonly Data[];
readonly activeId: string | null;
}
class PageNav extends Component<RouteComponentProps, NavState> {
scrollSpy!: ScrollSpy;
state: NavState = { activeId: null, links: [] };
componentDidMount() {
const { match } = this.props;
// eslint-disable-next-line
this.setState({ links: store.getPageHeadings(match.path) });
}
componentDidUpdate({ history, location }: RouteComponentProps) {
const { hash } = this.props.location; // old hash
const shouldRefresh = location.hash !== hash && history.action !== 'POP';
// this makes everything work, need those fresh nodes
if (shouldRefresh && this.scrollSpy.buildNodeList) {
this.scrollSpy.buildNodeList();
}
}
getSelected = (ids: readonly (string | null)[]) => {
const activeId = ids[0];
if (activeId !== this.state.activeId) {
this.setState({ activeId });
}
};
getScrollSpy: RefCallback<ScrollSpy> = (ref) => {
if (!ref) return;
this.scrollSpy = ref;
};
handleItemClick = ({
event,
hash,
}: {
readonly event: MouseEvent<HTMLDivElement>;
readonly hash: string;
}) => {
event.preventDefault();
const path = `#${hash}`;
const el = document.querySelector<HTMLElement>(path);
const { history } = this.props;
if (el && el.offsetTop) {
history.replace(path);
animatedScrollTo(window, el.offsetTop);
}
};
render() {
const { activeId, links } = this.state;
const isSmallDevice = window.innerWidth <= 769;
return links && links.length ? (
<Sticky preserveHeight={isSmallDevice}>
<ScrollSpy ref={this.getScrollSpy} onChange={this.getSelected}>
<Nav>
{links.map((l) => {
const hash = l.path.slice(1);
const selected = hash === activeId;
return l.level > 0 ? (
<NavItem
data-hash={hash}
key={hash}
selected={selected}
level={l.level}
onClick={(event) => {
this.handleItemClick({ event, hash });
}}
>
{l.label}
</NavItem>
) : null;
})}
</Nav>
</ScrollSpy>
</Sticky>
) : null;
}
}
export default NavSection;
const Nav = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
[smallDevice]: {
backgroundColor: 'rgba(255, 255, 255, 0.96)',
boxShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.1)',
display: 'flex',
fontSize: 13,
marginLeft: -appGutter,
marginRight: -appGutter,
overflowX: 'auto',
WebkitOverflowScrolling: 'touch',
},
[largeDevice]: {
display: 'block',
float: 'left',
paddingBottom: contentGutter,
paddingTop: contentGutter,
width: navWidth,
zIndex: 1,
},
}}
{...props}
/>
);
interface NavItemProps {
readonly level: number;
readonly selected: boolean;
}
const NavItem = ({
level,
selected,
...props
}: NavItemProps & JSX.IntrinsicElements['div']) => (
<div
role="button"
css={{
color: selected ? '#091e42' : '#7A869A',
cursor: 'pointer',
display: 'inline-block',
padding: `15px ${appGutter}px`,
position: 'relative',
textDecoration: 'none',
whiteSpace: 'nowrap',
':hover, :active': {
color: selected ? 'hsl(0, 0%, 10%)' : '#2684FF',
},
[smallDevice]: {
display: level === 3 ? 'none' : undefined,
boxShadow: selected ? 'inset 0 -1px 0 black' : undefined,
padding: `10px ${appGutter}px`,
},
[largeDevice]: {
backgroundColor: selected ? 'white' : 'transparent',
display: 'block',
fontSize: level === 3 ? '0.9em' : undefined,
fontWeight: selected ? 800 : 'inherit',
padding: '10px 20px 10px 0',
paddingLeft: level === 3 ? 10 : 0,
transition: 'padding-left 150ms ease-out',
},
}}
{...props}
/>
);
================================================
FILE: docs/App/ScrollSpy.tsx
================================================
import React, { Component, ReactElement, RefCallback } from 'react';
import rafSchedule from 'raf-schd';
import NodeResolver from 'react-node-resolver';
interface Props {
readonly children: ReactElement;
readonly onChange: (elements: readonly (string | null)[]) => void;
}
interface State {
readonly elements: readonly HTMLElement[];
}
function getStyle(el: HTMLElement, prop: string) {
const val = window.getComputedStyle(el, null).getPropertyValue(prop);
return parseFloat(val);
}
function isInView(el: HTMLElement) {
let rect = el.getBoundingClientRect();
const topOffset =
(getStyle(el, 'padding-top') + getStyle(el, 'margin-top')) * -1;
if (rect.top >= topOffset && rect.bottom <= window.innerHeight) {
return true;
}
return false;
}
export default class ScrollSpy extends Component<Props, State> {
nav: HTMLElement | undefined;
allIds = [];
state: State = { elements: [] };
static defaultProps = { preserveHeight: false };
componentDidMount() {
window.addEventListener('scroll', this.handleScroll, false);
this.buildNodeList();
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll = rafSchedule((event: Event) => {
event.preventDefault();
const { onChange } = this.props;
const { elements } = this.state;
if (!elements.length) return;
const idsInView = elements
.filter(isInView)
.map((i) => i.getAttribute('id'));
if (idsInView.length) {
onChange(idsInView);
}
});
getElements: RefCallback<HTMLElement> = (ref) => {
if (!ref) return;
this.nav = ref;
};
buildNodeList = () => {
if (!this.nav) return;
const anchorList = this.nav.querySelectorAll<HTMLElement>('[data-hash]');
const elements = Array.from(anchorList).map(
(i) => document.querySelector<HTMLElement>(`#${i.dataset.hash}`)!
);
this.setState({ elements });
};
render() {
return (
<NodeResolver innerRef={this.getElements}>
{this.props.children}
</NodeResolver>
);
}
}
================================================
FILE: docs/App/Section.tsx
================================================
import React, { FunctionComponent } from 'react';
import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
import routes from './routes';
const Section: FunctionComponent<RouteComponentProps> = () => {
const routeKeys = Object.keys(routes);
return (
<Switch>
{routeKeys.map((r) => (
<Route key={r} path={r} render={(p) => <Content {...p} />} />
))}
<Redirect from="/" to="/home" />
</Switch>
);
};
const Content = ({ location, match }: RouteComponentProps) => {
const page = routes[match.path];
return (
<Route
path={match.path}
render={() => (
<Switch>
<Route exact key={location.key} path={match.path} component={page} />
</Switch>
)}
/>
);
};
export default Section;
================================================
FILE: docs/App/Sticky.tsx
================================================
import React, { Component, CSSProperties, RefCallback } from 'react';
import rafSchedule from 'raf-schd';
interface Props {
readonly preserveHeight: boolean;
}
interface State {
readonly height: number | 'auto';
readonly isFixed: boolean;
readonly overScroll: number;
readonly scrollHeight: number | null | undefined;
readonly width: number | 'auto';
}
export default class Sticky extends Component<Props, State> {
innerEl: HTMLDivElement | undefined;
outerEl: HTMLDivElement | undefined;
state: State = {
height: 'auto',
isFixed: false,
overScroll: 0,
scrollHeight: null,
width: 'auto',
};
static defaultProps = { preserveHeight: false };
componentDidMount() {
window.addEventListener('scroll', this.handleScroll, false);
// this.handleScroll();
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll = rafSchedule((event: Event) => {
if (!this.innerEl || !this.outerEl) return;
const offsetBottom = 88; // footer height
const { top: outerTop } = this.outerEl.getBoundingClientRect();
const innerTop = (this.innerEl.offsetTop && this.innerEl.offsetTop) || 0;
const scrollY = window.pageYOffset;
const maxScroll =
document.body &&
document.body.scrollHeight - window.innerHeight - offsetBottom;
const { isFixed, overScroll } = this.state;
// check for `isFixed` before setting state to prevent thrashing
if (isFixed && outerTop > 0) {
this.setState({ isFixed: false });
} else if (!isFixed && scrollY >= innerTop) {
this.setState({ isFixed: true });
}
// handle over scroll
if (maxScroll && scrollY >= maxScroll) {
this.setState({ overScroll: scrollY - maxScroll });
} else if (overScroll > 0 && scrollY < maxScroll) {
this.setState({ overScroll: 0 });
}
});
getOuterEl: RefCallback<HTMLDivElement> = (ref) => {
if (!ref) return;
this.outerEl = ref;
};
getInnerEl: RefCallback<HTMLDivElement> = (ref) => {
if (!ref) return;
this.innerEl = ref;
// get dimensions once, we're not interested in resize events
const firstChild = ref.firstElementChild!;
const availableHeight = window.innerHeight;
let { height, width } = firstChild.getBoundingClientRect();
let scrollHeight;
if (typeof this.state.height !== 'number') {
if (height > availableHeight) scrollHeight = availableHeight;
this.setState({ height, scrollHeight, width });
}
};
render() {
const { preserveHeight } = this.props;
const { height, isFixed, overScroll, scrollHeight, width } = this.state;
const outerStyle = isFixed && preserveHeight ? { height } : undefined;
const fixedStyles: CSSProperties = {
position: 'fixed',
top: 0,
width,
zIndex: 1,
};
const scrollStyles = scrollHeight
? {
height: overScroll ? scrollHeight - overScroll : scrollHeight,
overflow: 'scroll',
}
: null;
const innerStyle = isFixed
? { ...fixedStyles, ...scrollStyles }
: undefined;
return (
<div ref={this.getOuterEl} style={outerStyle}>
<div ref={this.getInnerEl} style={innerStyle}>
{this.props.children}
</div>
</div>
);
}
}
================================================
FILE: docs/App/TwitterButton.tsx
================================================
/** @jsx jsx */
import { jsx } from '@emotion/react';
const TwitterButton = () => (
<div css={{ alignItems: 'center', display: 'inline-flex' }}>
<a
aria-label="Follow @JedWatson on Twitter"
css={{
alignItems: 'center',
display: 'flex',
borderRadius: 2,
color: 'white',
border: '1px solid rgba(255, 255, 255, 0.3)',
background: 'rgba(255, 255, 255, 0.1)',
cursor: 'pointer',
fontSize: 13,
fontWeight: 'bold',
padding: '5px 12px 5px 8px',
marginLeft: '16px',
position: 'relative',
textDecoration: 'none',
':hover': {
border: '1px solid rgba(255, 255, 255, 0.4)',
background: 'rgba(255, 255, 255, 0.15)',
},
}}
href="https://twitter.com/JedWatson"
target="_blank"
>
<svg
version="1.1"
width="16"
height="16"
viewBox="0 0 2000 1625.36"
fill="currentColor"
aria-hidden="true"
>
<path d="m 1999.9999,192.4 c -73.58,32.64 -152.67,54.69 -235.66,64.61 84.7,-50.78 149.77,-131.19 180.41,-227.01 -79.29,47.03 -167.1,81.17 -260.57,99.57 C 1609.3399,49.82 1502.6999,0 1384.6799,0 c -226.6,0 -410.328,183.71 -410.328,410.31 0,32.16 3.628,63.48 10.625,93.51 -341.016,-17.11 -643.368,-180.47 -845.739,-428.72 -35.324,60.6 -55.5583,131.09 -55.5583,206.29 0,142.36 72.4373,267.95 182.5433,341.53 -67.262,-2.13 -130.535,-20.59 -185.8519,-51.32 -0.039,1.71 -0.039,3.42 -0.039,5.16 0,198.803 141.441,364.635 329.145,402.342 -34.426,9.375 -70.676,14.395 -108.098,14.395 -26.441,0 -52.145,-2.578 -77.203,-7.364 52.215,163.008 203.75,281.649 383.304,284.946 -140.429,110.062 -317.351,175.66 -509.5972,175.66 -33.1211,0 -65.7851,-1.949 -97.8828,-5.738 181.586,116.4176 397.27,184.359 628.988,184.359 754.732,0 1167.462,-625.238 1167.462,-1167.47 0,-17.79 -0.41,-35.48 -1.2,-53.08 80.1799,-57.86 149.7399,-130.12 204.7499,-212.41" />
</svg>
<span css={{ paddingLeft: 8 }}>Follow</span>
</a>
</div>
);
export default TwitterButton;
================================================
FILE: docs/App/components.tsx
================================================
/** @jsx jsx */
import { Component } from 'react';
import {
Link,
LinkProps,
RouteComponentProps,
withRouter,
} from 'react-router-dom';
import { jsx } from '@emotion/react';
const navWidth = 180;
const appWidth = 800;
const appGutter = 20;
const contentGutter = 30;
const smallDevice = '@media (max-width: 769px)';
const largeDevice = '@media (min-width: 770px)';
export const AppContainer = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
boxSizing: 'border-box',
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: appWidth,
minHeight: '100vh',
padding: `0 ${appGutter}px`,
}}
{...props}
/>
);
export const PageContent = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
paddingBottom: contentGutter * 4,
paddingTop: contentGutter,
[smallDevice]: {
paddingTop: contentGutter * 2,
},
}}
{...props}
/>
);
export const AppContent = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
flex: '1 1 auto',
marginLeft: 'auto',
marginRight: 'auto',
[largeDevice]: {
paddingLeft: navWidth + contentGutter,
},
}}
{...props}
/>
);
// ==============================
// Navigation
// ==============================
export const PrimaryNav = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
backgroundColor: 'rgba(0, 0, 0, 0.11)',
fontWeight: 500,
overflowX: 'auto',
top: 0,
width: '100%',
WebkitOverflowScrolling: 'touch',
}}
>
<div
css={{
boxSizing: 'border-box',
display: 'flex',
maxWidth: 800,
marginLeft: 'auto',
marginRight: 'auto',
}}
{...props}
/>
</div>
);
export const PrimaryNavItem = ({
selected,
...props
}: LinkProps & { readonly selected: boolean }) => (
<Link
css={{
color: selected ? 'white' : '#DEEBFF',
display: 'inline-block',
opacity: selected ? 1 : 0.8,
padding: `20px ${appGutter}px`,
position: 'relative',
textDecoration: 'none',
whiteSpace: 'nowrap',
':hover, :active': {
opacity: 1,
},
[smallDevice]: {
fontSize: 13,
padding: `10px ${appGutter}px`,
},
}}
{...props}
/>
);
// ==============================
// Scroll Restoration
// ==============================
// Return scroll to top on route change
class ScrollToTop extends Component<RouteComponentProps> {
componentDidUpdate(prevProps: RouteComponentProps) {
const { history, location } = this.props;
// do not influence scroll on browser back/forward
if (history.action === 'POP') return;
// no scroll when extending the current path
const pathArr = location.pathname.split('/');
if (!prevProps.location.pathname.includes(pathArr[1])) {
window.scrollTo(0, 0);
}
}
render() {
return this.props.children;
}
}
export const ScrollRestoration = withRouter(ScrollToTop);
================================================
FILE: docs/App/index.tsx
================================================
import React, { Component, Fragment } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import Header from './Header';
import Footer from './Footer';
// import NoMatch from '../NoMatch';
import {
AppContainer,
AppContent,
PageContent,
PrimaryNav,
PrimaryNavItem,
ScrollRestoration,
} from './components';
import Section from './Section';
import PageNav from './PageNav';
import Tests from '../Tests';
const sections = [
{ label: 'Home', path: '/home' },
{ label: 'Props', path: '/props' },
{ label: 'Styles', path: '/styles' },
{ label: 'Components', path: '/components' },
{ label: 'Async', path: '/async' },
{ label: 'Creatable', path: '/creatable' },
{ label: 'Advanced', path: '/advanced' },
{ label: 'TypeScript', path: '/typescript' },
{ label: 'Upgrading', path: '/upgrade' },
];
export default class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/cypress-tests" component={Tests} />
<Route>
<div>
<Header>
<Route
render={({ location }) => (
<PrimaryNav>
{sections.map((l) => {
const selected = location.pathname.includes(l.path);
return (
<PrimaryNavItem
key={l.path}
selected={selected}
to={l.path}
>
{l.label}
</PrimaryNavItem>
);
})}
</PrimaryNav>
)}
/>
</Header>
<ScrollRestoration>
<AppContainer>
<Helmet>
<title>React Select</title>
<meta
name="description"
content="A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support."
/>
</Helmet>
<Route
render={(props) => (
<Fragment>
<PageNav {...props} />
<AppContent>
<PageContent>
<Section {...props} />
</PageContent>
</AppContent>
</Fragment>
)}
/>
</AppContainer>
</ScrollRestoration>
<Footer />
</div>
</Route>
</Switch>
</BrowserRouter>
);
}
}
================================================
FILE: docs/App/routes.ts
================================================
import { ComponentType } from 'react';
import Home from '../pages/home';
import Props from '../pages/props';
import Styles from '../pages/styles';
import Components from '../pages/components';
import Async from '../pages/async';
import Creatable from '../pages/creatable';
import Advanced from '../pages/advanced';
import TypeScript from '../pages/typescript';
import Upgrade from '../pages/upgrade';
import UpgradeToV2 from '../pages/upgrade-to-v2';
const routes: { readonly [key: string]: ComponentType } = {
'/home': Home,
'/props': Props,
'/styles': Styles,
'/components': Components,
'/async': Async,
'/creatable': Creatable,
'/advanced': Advanced,
'/typescript': TypeScript,
'/upgrade': Upgrade,
'/upgrade-to-v2': UpgradeToV2,
};
export default routes;
================================================
FILE: docs/CHANGELOG.md
================================================
# @react-select/docs
## 3.1.3
### Patch Changes
- [`0773095f`](https://github.com/JedWatson/react-select/commit/0773095f4990b636f64ae7d0ab593353a1e03b22) [#5457](https://github.com/JedWatson/react-select/pull/5457) Thanks [@nderkim](https://github.com/nderkim)! - Add classNames API and unstyled prop
- Updated dependencies [0773095f]:
- react-select@undefined
## 3.1.2
### Patch Changes
- [`0ca2d5ba`](https://github.com/JedWatson/react-select/commit/0ca2d5ba4aa42fb2a1bf033bcee660a293e39e50) [#5431](https://github.com/JedWatson/react-select/pull/5431) Thanks [@nderkim](https://github.com/nderkim)! - Change `class` components to `functional` components
- Updated dependencies [0ca2d5ba]:
- react-select@undefined
## 3.1.1
### Patch Changes
- [638f5455](https://github.com/JedWatson/react-select/commit/638f545517d320fe70ca954511a71e96956abae3) [#4702](https://github.com/JedWatson/react-select/pull/4702) Thanks [@Methuselah96](https://github.com/Methuselah96)! - The Option generic is no longer required to extend the OptionBase type
- Updated dependencies [10225290]:
- Updated dependencies [53f1972b]:
- Updated dependencies [b41f4ceb]:
- Updated dependencies [4b028829]:
- Updated dependencies [7fcec537]:
- Updated dependencies [ca2c0e5b]:
- Updated dependencies [9e82aadc]:
- Updated dependencies [638f5455]:
- Updated dependencies [23cea0b5]:
- Updated dependencies [ef87c3ac]:
- react-select@undefined
## 3.1.1-beta.1
### Patch Changes
- [638f5455](https://github.com/JedWatson/react-select/commit/638f545517d320fe70ca954511a71e96956abae3) [#4702](https://github.com/JedWatson/react-select/pull/4702) Thanks [@Methuselah96](https://github.com/Methuselah96)! - The Option generic is no longer required to extend the OptionBase type
- Updated dependencies [10225290]:
- Updated dependencies [53f1972b]:
- Updated dependencies [b41f4ceb]:
- Updated dependencies [7fcec537]:
- Updated dependencies [9e82aadc]:
- Updated dependencies [638f5455]:
- react-select@undefined
## 3.1.1-beta.0
### Patch Changes
- Updated dependencies [4b028829]:
- Updated dependencies [ef87c3ac]:
- react-select@undefined
## 3.1.0
### Minor Changes
- [2baf5a9d](https://github.com/JedWatson/react-select/commit/2baf5a9df2f4f56f9c9374fcb879cb5259a6d8d0) [#4414](https://github.com/JedWatson/react-select/pull/4414) Thanks [@ebonow](https://github.com/ebonow)! - Add ariaLiveMessages prop for internationalization and other customisations
### Patch Changes
- Updated dependencies [2ffed9c6]:
- Updated dependencies [c955415c]:
- Updated dependencies [3ca22b2f]:
- Updated dependencies [dce3863f]:
- Updated dependencies [2baf5a9d]:
- Updated dependencies [7cdb8a6b]:
- Updated dependencies [ec7c0728]:
- react-select@undefined
## 3.0.1
### Patch Changes
- [a016c878](https://github.com/JedWatson/react-select/commit/a016c87821d9289ef9c317c0c397d64a0824ce16) [#4420](https://github.com/JedWatson/react-select/pull/4420) Thanks [@Methuselah96](https://github.com/Methuselah96)! - Bump dependency on @babel/runtime in order to fix compatibility issues with Webpack 5
- [0dbf0438](https://github.com/JedWatson/react-select/commit/0dbf043864ce7a7fa7d822182b4f1770aad5b036) [#4387](https://github.com/JedWatson/react-select/pull/4387) Thanks [@ebonow](https://github.com/ebonow)! - Update example for MultiSelectSort to prevent dragging on multiValueRemove component #4387
- Updated dependencies [f600d13f]:
- Updated dependencies [b5f9b0c5]:
- Updated dependencies [a016c878]:
- Updated dependencies [19b76342]:
- Updated dependencies [10b5f5a5]:
- react-select@undefined
## 3.0.0
### Major Changes
- [26b6325c](https://github.com/JedWatson/react-select/commit/26b6325c95113591e568451bc2296f98318a8dd9) [#4283](https://github.com/JedWatson/react-select/pull/4283) Thanks [@majgaard](https://github.com/majgaard)! - Upgrades Emotion dependency to v11.0.0
BREAKING CHANGE: The NonceProvider component now requires a `cacheKey` prop that corresponds to the `key` for the Emotion cache.
### Patch Changes
- Updated dependencies [2d5496d5]:
- Updated dependencies [02050675]:
- Updated dependencies [26b6325c]:
- Updated dependencies [b2488bb5]:
- react-select@undefined
## 2.4.6
### Patch Changes
- [7af1aafb](https://github.com/JedWatson/react-select/commit/7af1aafb2314db02544b7970784b868e97ec4824) [#4295](https://github.com/JedWatson/react-select/pull/4295) Thanks [@JedWatson](https://github.com/JedWatson)! - Fix menuplacement context
- Updated dependencies [c8d74bd5]:
- Updated dependencies [c8447f48]:
- Updated dependencies [7af1aafb]:
- Updated dependencies [32ad5c04]:
- Updated dependencies [6af14fbb]:
- Updated dependencies [0eb1ef96]:
- Updated dependencies [ad608c8f]:
- react-select@undefined
## 2.4.5
- Updated dependencies [[9ad152b](https://github.com/JedWatson/react-select/commit/9ad152b)]:
- react-select@3.0.0
================================================
FILE: docs/ExampleWrapper.tsx
================================================
/** @jsx jsx */
import { jsx } from '@emotion/react'; // eslint-disable-line no-unused-vars
import { CSSObject } from '@emotion/serialize';
import { ReactNode, useState } from 'react';
import CodeSandboxer, { GitInfo } from 'react-codesandboxer';
import { CodeBlock } from './markdown/renderer';
import pkg from '../packages/react-select/package.json';
import { defaultTheme } from 'react-select';
import Svg, { SvgProps } from './Svg';
const { colors } = defaultTheme;
const gitInfo: GitInfo = {
account: 'JedWatson',
repository: 'react-select',
branch: 'master',
host: 'github',
};
const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${gitInfo.branch}`;
interface Props {
children?: ReactNode;
readonly label: string;
readonly raw: { readonly default: string };
readonly urlPath: string;
readonly isEditable?: boolean;
}
export default ({
children,
label,
raw,
urlPath,
isEditable = true,
}: Props) => {
const [showCode, setShowCode] = useState(false);
return (
<div>
<ExampleHeading>
<h4>{label}</h4>
<Actions>
{raw ? (
<ButtonAction
onClick={() => setShowCode((prev) => !prev)}
title="View Source"
>
<SourceIcon />
</ButtonAction>
) : (
<AAction
href={`${sourceUrl}/${urlPath}`}
target="_blank"
title="View Source"
>
<SourceIcon />
</AAction>
)}
{isEditable ? (
<CodeSandboxer
example={raw.default}
examplePath={urlPath}
pkgJSON={pkg}
gitInfo={gitInfo}
dependencies={{
[pkg.name]: pkg.version,
}}
>
{({ isLoading }) => (
<ButtonAction title="Edit in CodeSandbox">
{isLoading ? <Spinner /> : <NewWindowIcon />}
</ButtonAction>
)}
</CodeSandboxer>
) : null}
</Actions>
</ExampleHeading>
{showCode && raw ? (
<CodeBlock literal={raw.default} codeinfo={['jsx']} />
) : null}
{children}
</div>
);
};
const ExampleHeading = (props: any) => (
<div
css={{
alignItems: 'center',
display: 'flex',
paddingBottom: '1em',
paddingTop: '1.25em',
'& > h4': {
margin: 0,
},
}}
{...props}
/>
);
// ==============================
// Source & Sandbox Actions
// ==============================
const SourceIcon = (props: Omit<SvgProps, 'ref' | 'size'>) => (
<Svg size={16} {...props}>
<title>Source Code Icon</title>
<path d="M5.719 14.75c-0.236 0-0.474-0.083-0.664-0.252l-5.060-4.498 5.341-4.748c0.412-0.365 1.044-0.33 1.411 0.083s0.33 1.045-0.083 1.412l-3.659 3.253 3.378 3.002c0.413 0.367 0.45 0.999 0.083 1.412-0.197 0.223-0.472 0.336-0.747 0.336zM14.664 14.748l5.341-4.748-5.060-4.498c-0.413-0.367-1.045-0.33-1.411 0.083s-0.33 1.045 0.083 1.412l3.378 3.003-3.659 3.252c-0.413 0.367-0.45 0.999-0.083 1.412 0.197 0.223 0.472 0.336 0.747 0.336 0.236 0 0.474-0.083 0.664-0.252zM9.986 16.165l2-12c0.091-0.545-0.277-1.060-0.822-1.151-0.547-0.092-1.061 0.277-1.15 0.822l-2 12c-0.091 0.545 0.277 1.060 0.822 1.151 0.056 0.009 0.11 0.013 0.165 0.013 0.48 0 0.904-0.347 0.985-0.835z" />
</Svg>
);
const NewWindowIcon = (props: Omit<SvgProps, 'ref' | 'size'>) => (
<Svg size={16} {...props}>
<title>New Window Icon</title>
<path d="M18.174 1.826c-1.102-1.102-2.082-0.777-2.082-0.777l-8.639 8.632-1.453 4.319 4.317-1.454 8.634-8.638c0 0 0.324-0.98-0.777-2.082zM10.605 11.605l-0.471 0.47-1.473 0.5c-0.104-0.24-0.234-0.477-0.498-0.74s-0.5-0.394-0.74-0.498l0.5-1.473 0.471-0.47c0 0 0.776-0.089 1.537 0.673 0.762 0.761 0.674 1.538 0.674 1.538zM16 17h-13v-13h5l2-2h-7c-1.1 0-2 0.9-2 2v13c0 1.1 0.9 2 2 2h13c1.1 0 2-0.9 2-2v-7l-2 2v5z" />
</Svg>
);
const actionCSS: CSSObject = {
alignItems: 'center',
background: 0,
border: 0,
borderRadius: 3,
boxSizing: 'border-box',
color: colors.neutral40,
cursor: 'pointer',
display: 'flex',
fontSize: 'inherit',
height: 24,
marginLeft: 2,
justifyContent: 'center',
position: 'relative',
transition: 'background-color 150ms, box-shadow 150ms, color 150ms',
width: 30,
':hover': {
backgroundColor: colors.neutral5,
outline: 0,
},
':active': {
backgroundColor: colors.neutral10,
bottom: -1,
},
};
interface ActionProps {
readonly css?: CSSObject;
}
const ButtonAction = ({
css,
...props
}: ActionProps & Omit<JSX.IntrinsicElements['button'], 'css'>) => {
return (
<button
css={{
...actionCSS,
...css,
}}
{...props}
/>
);
};
const AAction = ({
css,
...props
}: ActionProps & Omit<JSX.IntrinsicElements['a'], 'css'>) => {
return (
<a
css={{
...actionCSS,
...css,
}}
{...props}
/>
);
};
const Actions = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
flex: '1 1',
alignItems: 'center',
display: 'flex',
justifyContent: 'flex-end',
opacity: 0.8,
transition: 'opacity 140ms',
transitionDelay: '140ms',
'&:hover': {
opacity: 1,
},
'&:focus-within': {
opacity: 1,
},
}}
{...props}
/>
);
// ==============================
// Spinner
// ==============================
const Spinner = () => {
const offset = 187;
const duration = '1.4s';
const size = 16;
return (
<div css={{ height: size, width: size }}>
<style>{`
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
@keyframes dash {
0% { stroke-dashoffset: ${offset}; }
50% {
stroke-dashoffset: ${offset / 4};
transform:rotate(135deg);
}
100% {
stroke-dashoffset: ${offset};
transform:rotate(450deg);
}
}`}</style>
<svg
css={{ animation: `rotator ${duration} linear infinite` }}
width={size}
height={size}
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle
css={{
strokeDasharray: offset,
strokeDashoffset: 0,
transformOrigin: 'center',
animation: `dash ${duration} ease-in-out infinite`,
}}
fill="none"
stroke="currentColor"
strokeWidth="7"
strokeLinecap="round"
cx="33"
cy="33"
r="30"
/>
</svg>
</div>
);
};
================================================
FILE: docs/NoMatch.tsx
================================================
import React from 'react';
import { Link } from 'react-router-dom';
import { H1 } from './styled-components';
export default function NoMatch() {
return (
<div>
<H1>Oops!</H1>
<p>Couldn't find this page.</p>
<Link to="/">Back home</Link>
</div>
);
}
================================================
FILE: docs/PropTypes/Async.ts
================================================
export { AsyncAdditionalProps } from 'react-select/src/useAsync';
================================================
FILE: docs/PropTypes/Creatable.ts
================================================
export { CreatableAdditionalProps } from 'react-select/src/useCreatable';
================================================
FILE: docs/PropTypes/Select.ts
================================================
import { Component } from 'react';
import { Props, defaultProps } from 'react-select/src/Select';
import { GroupBase } from 'react-select';
export default class Select extends Component<
Props<unknown, boolean, GroupBase<unknown>>
> {
defaultProps = defaultProps;
}
================================================
FILE: docs/PropTypes/components/ClearIndicator.ts
================================================
import { Component } from 'react';
import { GroupBase, ClearIndicatorProps } from 'react-select';
export default class ClearIndicator<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<ClearIndicatorProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/Control.ts
================================================
import { Component } from 'react';
import { ControlProps, GroupBase } from 'react-select';
export default class Control<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<ControlProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/DropdownIndicator.ts
================================================
import { Component } from 'react';
import { GroupBase, DropdownIndicatorProps } from 'react-select';
export default class DropdownIndicator<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<DropdownIndicatorProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/Group.ts
================================================
import { Component } from 'react';
import { GroupBase, GroupProps } from 'react-select';
export default class Group<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<GroupProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/IndicatorsContainer.ts
================================================
import { Component } from 'react';
import { GroupBase, IndicatorsContainerProps } from 'react-select';
export default class IndicatorsContainer<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<IndicatorsContainerProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/IndicatorsSeparator.ts
================================================
import { Component } from 'react';
import { DropdownIndicatorProps, GroupBase } from 'react-select';
export default class DropdownIndicator<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<DropdownIndicatorProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/Input.ts
================================================
import { Component } from 'react';
import { GroupBase, InputProps } from 'react-select';
export default class Input<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<InputProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/LoadingIndicator.ts
================================================
import { Component } from 'react';
import { GroupBase, LoadingIndicatorProps } from 'react-select';
export default class LoadingIndicator<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<LoadingIndicatorProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/LoadingMessage.ts
================================================
import { Component } from 'react';
import { GroupBase, NoticeProps } from 'react-select';
export default class LoadingMessage<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<NoticeProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/Menu.ts
================================================
import { Component } from 'react';
import { GroupBase, MenuProps } from 'react-select';
export default class Menu<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<MenuProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/MenuList.ts
================================================
import { Component } from 'react';
import { GroupBase, MenuListProps } from 'react-select';
export default class MenuList<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<MenuListProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/MultiValue.ts
================================================
import { Component } from 'react';
import { GroupBase, MultiValueProps } from 'react-select';
export default class MultiValue<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<MultiValueProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/MultiValueContainer.ts
================================================
import { Component } from 'react';
import { GroupBase, MultiValueGenericProps } from 'react-select';
export default class MultiValueContainer<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<MultiValueGenericProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/MultiValueLabel.ts
================================================
import { Component } from 'react';
import { GroupBase, MultiValueGenericProps } from 'react-select';
export default class MultiValueLabel<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<MultiValueGenericProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/MultiValueRemove.ts
================================================
import { Component } from 'react';
import { GroupBase, MultiValueGenericProps } from 'react-select';
export default class MultiValueRemove<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<MultiValueGenericProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/NoOptionsMessage.ts
================================================
import { Component } from 'react';
import { GroupBase, NoticeProps } from 'react-select';
export default class NoOptionsMessage<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<NoticeProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/Option.ts
================================================
import { Component } from 'react';
import { GroupBase, OptionProps } from 'react-select';
export default class Option<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<OptionProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/Placeholder.ts
================================================
import { Component } from 'react';
import { GroupBase, PlaceholderProps } from 'react-select';
export default class Placeholder<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<PlaceholderProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/SelectContainer.ts
================================================
import { Component } from 'react';
import { ContainerProps, GroupBase } from 'react-select';
export default class SelectContainer<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<ContainerProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/SingleValue.ts
================================================
import { Component } from 'react';
import { GroupBase, SingleValueProps } from 'react-select';
export default class SingleValue<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<SingleValueProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/components/ValueContainer.ts
================================================
import { Component } from 'react';
import { GroupBase, ValueContainerProps } from 'react-select';
export default class ValueContainer<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option>
> extends Component<ValueContainerProps<Option, IsMulti, Group>> {}
================================================
FILE: docs/PropTypes/stateManager.ts
================================================
export { StateManagerAdditionalProps } from 'react-select/src/useStateManager';
================================================
FILE: docs/Svg.tsx
================================================
/** @jsx jsx */
import { jsx } from '@emotion/react';
export type SvgProps = { readonly size: number } & JSX.IntrinsicElements['svg'];
const Svg = ({ size, ...props }: SvgProps) => (
<svg
focusable="false"
height={size}
role="image"
viewBox="0 0 20 20"
width={size}
css={{
display: 'inline-block',
fill: 'currentColor',
flexShrink: 0,
lineHeight: 1,
stroke: 'currentColor',
strokeWidth: 0,
}}
{...props}
/>
);
export default Svg;
================================================
FILE: docs/Table.tsx
================================================
/** @jsx jsx */
import { FunctionComponent } from 'react';
import { jsx } from '@emotion/react';
export const Table: FunctionComponent = ({ children }) => (
<table
css={{
width: '100%',
marginTop: '30px',
borderCollapse: 'collapse',
}}
>
{children}
</table>
);
export const Header: FunctionComponent = ({ children }) => (
<td
css={{
fontWeight: 'bold',
padding: '4px 8px 4px 0',
borderBottom: '3px solid #eee',
}}
>
{children}
</td>
);
export const Cell: FunctionComponent = ({ children }) => (
<td
css={{
fontSize: '90%',
padding: '4px 8px 4px 0',
borderBottom: '1px solid #eee',
verticalAlign: 'top',
}}
>
{children}
</td>
);
================================================
FILE: docs/Tests.tsx
================================================
import React, {
ChangeEventHandler,
ComponentProps,
ComponentType,
useState,
} from 'react';
import Select, { MenuPlacement } from 'react-select';
import { H1, Note } from './styled-components';
import { colourOptions, groupedOptions, optionLength } from './data';
import * as animatedComponents from 'react-select/animated';
interface SuiteProps {
readonly selectComponent: ComponentType<ComponentProps<typeof Select>>;
readonly idSuffix: string;
}
const AnimatedSelect = (props: ComponentProps<typeof Select>) => (
<Select
{...props}
components={{
...animatedComponents,
...props.components,
}}
/>
);
const TestSuite = ({ selectComponent: SelectComp, idSuffix }: SuiteProps) => {
const [isDisabled, setIsDisabled] = useState(false);
const [isFixed, setIsFixed] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [escapeClearsValue, setEscapeClearsValue] = useState(false);
const [portalPlacement, setPortalPlacement] = useState<MenuPlacement>('top');
const [blockScroll, setBlockScroll] = useState(true);
const toggleDisabled = () => {
setIsDisabled((state) => !state);
};
const toggleLoading = () => {
setIsLoading((state) => !state);
};
const toggleScroll = () => {
setBlockScroll((state) => !state);
};
const toggleMode = () => {
setIsFixed((state) => !state);
};
const toggleEscapeClearsValue = () => {
setEscapeClearsValue((state) => !state);
};
const setPlacement: ChangeEventHandler<HTMLSelectElement> = ({
currentTarget,
}) => {
const newPortalPlacement =
currentTarget && (currentTarget.value as MenuPlacement);
setPortalPlacement(newPortalPlacement);
};
const menuPortalTarget = !isFixed ? document.body : null;
return (
<div id={`cypress-container-${idSuffix}`}>
<div id={`cypress-${idSuffix}`}>
<SelectComp
autoFocus
id={`basic-select-${idSuffix}`}
instanceId={`basic-select-${idSuffix}`}
classNamePrefix="react-select"
defaultValue={colourOptions[0]}
styles={{
menuPortal: (base) => ({ ...base, zIndex: 999 }),
}}
isDisabled={isDisabled}
isLoading={isLoading}
options={colourOptions}
/>
<Note Tag="label">
<input
type="checkbox"
onChange={toggleDisabled}
className="disable-checkbox"
id={`cypress-${idSuffix}__disabled-checkbox`}
/>
Disabled
</Note>
<Note Tag="label" style={{ marginLeft: '1em' }}>
<input
type="checkbox"
onChange={toggleLoading}
id={`cypress-${idSuffix}__loading-checkbox`}
/>
Loading
</Note>
</div>
<h4>Grouped</h4>
<div id={`cypress-${idSuffix}-grouped`}>
<SelectComp
id={`grouped-options-${idSuffix}`}
classNamePrefix="react-select"
defaultValue={colourOptions[1]}
options={groupedOptions}
/>
</div>
<h4>Clearable</h4>
<div id={`cypress-${idSuffix}-clearable`}>
<SelectComp
id={`clearable-select-${idSuffix}`}
isClearable
escapeClearsValue={escapeClearsValue}
classNamePrefix="react-select"
defaultValue={colourOptions[1]}
options={groupedOptions}
/>
<Note Tag="label">
<input
type="checkbox"
onChange={toggleEscapeClearsValue}
className="escape-clears-value-checkbox"
/>
escapeClearsValue
</Note>
</div>
<h4>Portalled</h4>
<div
id={`cypress-${idSuffix}-portalled`}
style={{
backgroundColor: 'papayaWhip',
borderRadius: 5,
boxSizing: 'border-box',
height: 200,
overflow: 'auto',
padding: 15,
width: '100%',
}}
>
<div style={{ height: 100 }} />
<pre>{'overflow: hidden; position: absolute;'}</pre>
<SelectComp
id={`portalled-select-${idSuffix}`}
instanceId={`portalled-select-${idSuffix}`}
classNamePrefix="react-select"
defaultValue={colourOptions[0]}
options={colourOptions}
menuPortalTarget={menuPortalTarget}
menuShouldBlockScroll={blockScroll}
menuShouldScrollIntoView
menuPlacement={portalPlacement}
menuPosition={isFixed ? 'fixed' : 'absolute'}
/>
<Note Tag="label">
<select
onChange={setPlacement}
value={portalPlacement}
id="cypress-portalled__radio-bottom"
>
<option value="auto">auto</option>
<option value="bottom">bottom</option>
<option value="top">top</option>
</select>
</Note>
<Note Tag="label" style={{ marginLeft: '1em' }}>
<input
type="radio"
onChange={toggleMode}
value="fixed"
checked={isFixed}
id="cypress-portalled__fixed"
/>
Fixed
</Note>
<Note Tag="label" style={{ marginLeft: '1em' }}>
<input
type="radio"
onChange={toggleMode}
value="portal"
checked={!isFixed}
id="cypress-portalled__portal"
/>
Portal
</Note>
<Note Tag="label" style={{ marginLeft: '1em' }}>
<input
type="checkbox"
onChange={toggleScroll}
value="blockScroll"
checked={blockScroll}
id="cypress-portalled__scroll"
/>
Block Scroll
</Note>
<div style={{ height: 100 }} />
</div>
</div>
);
};
export default function Tests() {
return (
<div
style={{
margin: 'auto',
maxWidth: 440,
padding: 20,
position: 'relative',
}}
>
<H1>Test Page for Cypress</H1>
<h2>Single Select</h2>
<TestSuite selectComponent={Select} idSuffix="single" />
<h3>Animated components</h3>
<TestSuite selectComponent={AnimatedSelect} idSuffix="animated" />
<h2>Multi Select</h2>
<div id="cypress-multi">
<Select
id="multi-select"
instanceId="multi-select"
classNamePrefix="react-select"
defaultValue={[colourOptions[2], colourOptions[3]]}
isMulti
options={colourOptions}
/>
</div>
<div style={{ height: 400 }} />
<h3> Long Values </h3>
<div id={'cypress-long-values'}>
<Select
id="long-value-select"
instanceId="long-value-select"
classNamePrefix="react-select"
defaultValue={optionLength[3]}
options={optionLength}
/>
</div>
</div>
);
}
================================================
FILE: docs/_redirects
================================================
/* /index.html 200
================================================
FILE: docs/data.ts
================================================
export interface ColourOption {
readonly value: string;
readonly label: string;
readonly color: string;
readonly isFixed?: boolean;
readonly isDisabled?: boolean;
}
export const colourOptions: readonly ColourOption[] = [
{ value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
{ value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
{ value: 'purple', label: 'Purple', color: '#5243AA' },
{ value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
{ value: 'orange', label: 'Orange', color: '#FF8B00' },
{ value: 'yellow', label: 'Yellow', color: '#FFC400' },
{ value: 'green', label: 'Green', color: '#36B37E' },
{ value: 'forest', label: 'Forest', color: '#00875A' },
{ value: 'slate', label: 'Slate', color: '#253858' },
{ value: 'silver', label: 'Silver', color: '#666666' },
];
export interface FlavourOption {
readonly value: string;
readonly label: string;
readonly rating: string;
}
export const flavourOptions: readonly FlavourOption[] = [
{ value: 'vanilla', label: 'Vanilla', rating: 'safe' },
{ value: 'chocolate', label: 'Chocolate', rating: 'good' },
{ value: 'strawberry', label: 'Strawberry', rating: 'wild' },
{ value: 'salted-caramel', label: 'Salted Caramel', rating: 'crazy' },
];
export interface StateOption {
readonly value: string;
readonly label: string;
}
export const stateOptions: readonly StateOption[] = [
{ value: 'AL', label: 'Alabama' },
{ value: 'AK', label: 'Alaska' },
{ value: 'AS', label: 'American Samoa' },
{ value: 'AZ', label: 'Arizona' },
{ value: 'AR', label: 'Arkansas' },
{ value: 'CA', label: 'California' },
{ value: 'CO', label: 'Colorado' },
{ value: 'CT', label: 'Connecticut' },
{ value: 'DE', label: 'Delaware' },
{ value: 'DC', label: 'District Of Columbia' },
{ value: 'FM', label: 'Federated States Of Micronesia' },
{ value: 'FL', label: 'Florida' },
{ value: 'GA', label: 'Georgia' },
{ value: 'GU', label: 'Guam' },
{ value: 'HI', label: 'Hawaii' },
{ value: 'ID', label: 'Idaho' },
{ value: 'IL', label: 'Illinois' },
{ value: 'IN', label: 'Indiana' },
{ value: 'IA', label: 'Iowa' },
{ value: 'KS', label: 'Kansas' },
{ value: 'KY', label: 'Kentucky' },
{ value: 'LA', label: 'Louisiana' },
{ value: 'ME', label: 'Maine' },
{ value: 'MH', label: 'Marshall Islands' },
{ value: 'MD', label: 'Maryland' },
{ value: 'MA', label: 'Massachusetts' },
{ value: 'MI', label: 'Michigan' },
{ value: 'MN', label: 'Minnesota' },
{ value: 'MS', label: 'Mississippi' },
{ value: 'MO', label: 'Missouri' },
{ value: 'MT', label: 'Montana' },
{ value: 'NE', label: 'Nebraska' },
{ value: 'NV', label: 'Nevada' },
{ value: 'NH', label: 'New Hampshire' },
{ value: 'NJ', label: 'New Jersey' },
{ value: 'NM', label: 'New Mexico' },
{ value: 'NY', label: 'New York' },
{ value: 'NC', label: 'North Carolina' },
{ value: 'ND', label: 'North Dakota' },
{ value: 'MP', label: 'Northern Mariana Islands' },
{ value: 'OH', label: 'Ohio' },
{ value: 'OK', label: 'Oklahoma' },
{ value: 'OR', label: 'Oregon' },
{ value: 'PW', label: 'Palau' },
{ value: 'PA', label: 'Pennsylvania' },
{ value: 'PR', label: 'Puerto Rico' },
{ value: 'RI', label: 'Rhode Island' },
{ value: 'SC', label: 'South Carolina' },
{ value: 'SD', label: 'South Dakota' },
{ value: 'TN', label: 'Tennessee' },
{ value: 'TX', label: 'Texas' },
{ value: 'UT', label: 'Utah' },
{ value: 'VT', label: 'Vermont' },
{ value: 'VI', label: 'Virgin Islands' },
{ value: 'VA', label: 'Virginia' },
{ value: 'WA', label: 'Washington' },
{ value: 'WV', label: 'West Virginia' },
{ value: 'WI', label: 'Wisconsin' },
{ value: 'WY', label: 'Wyoming' },
];
export const optionLength = [
{ value: 1, label: 'general' },
{
value: 2,
label:
'Evil is the moment when I lack the strength to be true to the Good that compels me.',
},
{
value: 3,
label:
"It is now an easy matter to spell out the ethic of a truth: 'Do all that you can to persevere in that which exceeds your perseverance. Persevere in the interruption. Seize in your being that which has seized and broken you.",
},
];
export const dogOptions = [
{ id: 1, label: 'Chihuahua' },
{ id: 2, label: 'Bulldog' },
{ id: 3, label: 'Dachshund' },
{ id: 4, label: 'Akita' },
];
// let bigOptions = [];
// for (let i = 0; i < 10000; i++) {
// bigOptions = bigOptions.concat(colourOptions);
// }
export interface GroupedOption {
readonly label: string;
readonly options: readonly ColourOption[] | readonly FlavourOption[];
}
export const groupedOptions: readonly GroupedOption[] = [
{
label: 'Colours',
options: colourOptions,
},
{
label: 'Flavours',
options: flavourOptions,
},
];
================================================
FILE: docs/examples/AccessingInternals.tsx
================================================
import React, { Fragment, useRef } from 'react';
import Select, { SelectInstance } from 'react-select';
import AsyncSelect from 'react-select/async';
import CreatableSelect from 'react-select/creatable';
import { Note } from '../styled-components';
import { ColourOption, colourOptions } from '../data';
const filterColors = (inputValue: string) => {
return colourOptions.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
};
const promiseOptions = (inputValue: string) =>
new Promise<ColourOption[]>((resolve) => {
setTimeout(() => {
resolve(filterColors(inputValue));
}, 1000);
});
export default function AccessingInternals() {
const selectRef = useRef<SelectInstance<ColourOption> | null>(null);
const asyncRef = useRef<SelectInstance<ColourOption> | null>(null);
const creatableRef = useRef<SelectInstance<ColourOption> | null>(null);
// Focus handlers
const focus = () => {
console.log(selectRef);
selectRef.current?.focus();
};
const focusAsync = () => {
console.log(asyncRef);
asyncRef.current?.focus();
};
const focusCreatable = () => {
console.log(creatableRef);
creatableRef.current?.focus();
};
// Blur handlers
const blur = () => {
selectRef.current?.blur();
};
const blurAsync = () => {
asyncRef.current?.blur();
};
const blurCreatable = () => {
creatableRef.current?.blur();
};
return (
<Fragment>
<h4>Creatable Select</h4>
<CreatableSelect ref={creatableRef} isClearable options={colourOptions} />
<Note Tag="label">
<button
onClick={focusCreatable}
id="cypress-single__clearable-checkbox"
>
Focus
</button>
</Note>
<Note Tag="label">
<button onClick={blurCreatable} id="cypress-single__clearable-checkbox">
Blur
</button>
</Note>
<h4>Async Select</h4>
<AsyncSelect
ref={asyncRef}
cacheOptions
defaultOptions
loadOptions={promiseOptions}
/>
<Note Tag="label">
<button onClick={focusAsync} id="cypress-single__clearable-checkbox">
Focus
</button>
</Note>
<Note Tag="label">
<button onClick={blurAsync} id="cypress-single__clearable-checkbox">
Blur
</button>
</Note>
<h4>Select</h4>
<Select
ref={selectRef}
defaultValue={colourOptions[2]}
name="colors"
options={colourOptions}
/>
<Note Tag="label">
<button onClick={focus} id="cypress-single__clearable-checkbox">
Focus
</button>
</Note>
<Note Tag="label">
<button onClick={blur} id="cypress-single__clearable-checkbox">
Blur
</button>
</Note>
</Fragment>
);
}
================================================
FILE: docs/examples/AnimatedMulti.tsx
================================================
import React from 'react';
import Select from 'react-select';
import makeAnimated from 'react-select/animated';
import { colourOptions } from '../data';
const animatedComponents = makeAnimated();
export default function AnimatedMulti() {
return (
<Select
closeMenuOnSelect={false}
components={animatedComponents}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
}
================================================
FILE: docs/examples/AsyncCallbacks.tsx
================================================
import React from 'react';
import AsyncSelect from 'react-select/async';
import { ColourOption, colourOptions } from '../data';
const filterColors = (inputValue: string) => {
return colourOptions.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
};
const loadOptions = (
inputValue: string,
callback: (options: ColourOption[]) => void
) => {
setTimeout(() => {
callback(filterColors(inputValue));
}, 1000);
};
export default () => (
<AsyncSelect cacheOptions loadOptions={loadOptions} defaultOptions />
);
================================================
FILE: docs/examples/AsyncCreatable.tsx
================================================
import React from 'react';
import AsyncCreatableSelect from 'react-select/async-creatable';
import { ColourOption, colourOptions } from '../data';
const filterColors = (inputValue: string) => {
return colourOptions.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
};
const promiseOptions = (inputValue: string) =>
new Promise<ColourOption[]>((resolve) => {
setTimeout(() => {
resolve(filterColors(inputValue));
}, 1000);
});
export default () => (
<AsyncCreatableSelect
cacheOptions
defaultOptions
loadOptions={promiseOptions}
/>
);
================================================
FILE: docs/examples/AsyncMulti.tsx
================================================
import React from 'react';
import AsyncSelect from 'react-select/async';
import { ColourOption, colourOptions } from '../data';
const filterColors = (inputValue: string) => {
return colourOptions.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
};
const promiseOptions = (inputValue: string) =>
new Promise<ColourOption[]>((resolve) => {
setTimeout(() => {
resolve(filterColors(inputValue));
}, 1000);
});
export default () => (
<AsyncSelect
isMulti
cacheOptions
defaultOptions
loadOptions={promiseOptions}
/>
);
================================================
FILE: docs/examples/AsyncPromises.tsx
================================================
import React from 'react';
import AsyncSelect from 'react-select/async';
import { ColourOption, colourOptions } from '../data';
const filterColors = (inputValue: string) => {
return colourOptions.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
};
const promiseOptions = (inputValue: string) =>
new Promise<ColourOption[]>((resolve) => {
setTimeout(() => {
resolve(filterColors(inputValue));
}, 1000);
});
export default () => (
<AsyncSelect cacheOptions defaultOptions loadOptions={promiseOptions} />
);
================================================
FILE: docs/examples/BasicGrouped.tsx
================================================
import React, { CSSProperties } from 'react';
import Select from 'react-select';
import {
ColourOption,
colourOptions,
FlavourOption,
GroupedOption,
groupedOptions,
} from '../data';
const groupStyles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
};
const groupBadgeStyles: CSSProperties = {
backgroundColor: '#EBECF0',
borderRadius: '2em',
color: '#172B4D',
display: 'inline-block',
fontSize: 12,
fontWeight: 'normal',
lineHeight: '1',
minWidth: 1,
padding: '0.16666666666667em 0.5em',
textAlign: 'center',
};
const formatGroupLabel = (data: GroupedOption) => (
<div style={groupStyles}>
<span>{data.label}</span>
<span style={groupBadgeStyles}>{data.options.length}</span>
</div>
);
export default () => (
<Select<ColourOption | FlavourOption, false, GroupedOption>
defaultValue={colourOptions[1]}
options={groupedOptions}
formatGroupLabel={formatGroupLabel}
/>
);
================================================
FILE: docs/examples/BasicMulti.tsx
================================================
import React from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';
export default () => (
<Select
defaultValue={[colourOptions[2], colourOptions[3]]}
isMulti
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
);
================================================
FILE: docs/examples/BasicSingle.tsx
================================================
import React, { useState } from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';
const Checkbox = ({ children, ...props }: JSX.IntrinsicElements['input']) => (
<label style={{ marginRight: '1em' }}>
<input type="checkbox" {...props} />
{children}
</label>
);
export default () => {
const [isClearable, setIsClearable] = useState(true);
const [isSearchable, setIsSearchable] = useState(true);
const [isDisabled, setIsDisabled] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isRtl, setIsRtl] = useState(false);
return (
<>
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
isDisabled={isDisabled}
isLoading={isLoading}
isClearable={isClearable}
isRtl={isRtl}
isSearchable={isSearchable}
name="color"
options={colourOptions}
/>
<div
style={{
color: 'hsl(0, 0%, 40%)',
display: 'inline-block',
fontSize: 12,
fontStyle: 'italic',
marginTop: '1em',
}}
>
<Checkbox
checked={isClearable}
onChange={() => setIsClearable((state) => !state)}
>
Clearable
</Checkbox>
<Checkbox
checked={isSearchable}
onChange={() => setIsSearchable((state) => !state)}
>
Searchable
</Checkbox>
<Checkbox
checked={isDisabled}
onChange={() => setIsDisabled((state) => !state)}
>
Disabled
</Checkbox>
<Checkbox
checked={isLoading}
onChange={() => setIsLoading((state) => !state)}
>
Loading
</Checkbox>
<Checkbox checked={isRtl} onChange={() => setIsRtl((state) => !state)}>
RTL
</Checkbox>
</div>
</>
);
};
================================================
FILE: docs/examples/ControlledMenu.tsx
================================================
import React, { useRef, useState } from 'react';
import Select, { SelectInstance } from 'react-select';
import { colourOptions } from '../data';
import { Note } from '../styled-components';
const Checkbox = (props: JSX.IntrinsicElements['input']) => (
<input type="checkbox" {...props} />
);
export default () => {
const ref = useRef<SelectInstance>(null);
const [menuIsOpen, setMenuIsOpen] = useState<boolean>(false);
const toggleMenuIsOpen = () => {
setMenuIsOpen((value) => !value);
const selectEl = ref.current;
if (!selectEl) return;
if (menuIsOpen) selectEl.blur();
else selectEl.focus();
};
return (
<>
<Select
ref={ref}
defaultValue={colourOptions[0]}
isClearable
menuIsOpen={menuIsOpen}
styles={{ menu: (base) => ({ ...base, position: 'relative' }) }}
name="color"
options={colourOptions}
/>
<Note Tag="label">
<Checkbox
checked={menuIsOpen}
onChange={toggleMenuIsOpen}
id="cypress-single__clearable-checkbox"
/>
menuIsOpen
</Note>
</>
);
};
================================================
FILE: docs/examples/CreatableAdvanced.tsx
================================================
import React, { useState } from 'react';
import CreatableSelect from 'react-select/creatable';
interface Option {
readonly label: string;
readonly value: string;
}
const createOption = (label: string) => ({
label,
value: label.toLowerCase().replace(/\W/g, ''),
});
const defaultOptions = [
createOption('One'),
createOption('Two'),
createOption('Three'),
];
export default () => {
const [isLoading, setIsLoading] = useState(false);
const [options, setOptions] = useState(defaultOptions);
const [value, setValue] = useState<Option | null>();
const handleCreate = (inputValue: string) => {
setIsLoading(true);
setTimeout(() => {
const newOption = createOption(inputValue);
setIsLoading(false);
setOptions((prev) => [...prev, newOption]);
setValue(newOption);
}, 1000);
};
return (
<CreatableSelect
isClearable
isDisabled={isLoading}
isLoading={isLoading}
onChange={(newValue) => setValue(newValue)}
onCreateOption={handleCreate}
options={options}
value={value}
/>
);
};
================================================
FILE: docs/examples/CreatableInputOnly.tsx
================================================
import React, { KeyboardEventHandler } from 'react';
import CreatableSelect from 'react-select/creatable';
const components = {
DropdownIndicator: null,
};
interface Option {
readonly label: string;
readonly value: string;
}
const createOption = (label: string) => ({
label,
value: label,
});
export default () => {
const [inputValue, setInputValue] = React.useState('');
const [value, setValue] = React.useState<readonly Option[]>([]);
const handleKeyDown: KeyboardEventHandler = (event) => {
if (!inputValue) return;
switch (event.key) {
case 'Enter':
case 'Tab':
setValue((prev) => [...prev, createOption(inputValue)]);
setInputValue('');
event.preventDefault();
}
};
return (
<CreatableSelect
components={components}
inputValue={inputValue}
isClearable
isMulti
menuIsOpen={false}
onChange={(newValue) => setValue(newValue)}
onInputChange={(newValue) => setInputValue(newValue)}
onKeyDown={handleKeyDown}
placeholder="Type something and press enter..."
value={value}
/>
);
};
================================================
FILE: docs/examples/CreatableMulti.tsx
================================================
import React from 'react';
import CreatableSelect from 'react-select/creatable';
import { colourOptions } from '../data';
export default () => <CreatableSelect isMulti options={colourOptions} />;
================================================
FILE: docs/examples/CreatableSingle.tsx
================================================
import React from 'react';
import CreatableSelect from 'react-select/creatable';
import { colourOptions } from '../data';
export default () => <CreatableSelect isClearable options={colourOptions} />;
================================================
FILE: docs/examples/CreateFilter.tsx
================================================
import React, { useState } from 'react';
import Select, { createFilter } from 'react-select';
import { colourOptions } from '../data';
import { Note } from '../styled-components';
const Checkbox = (props: JSX.IntrinsicElements['input']) => (
<input type="checkbox" {...props} />
);
export default () => {
const [ignoreCase, setIgnoreCase] = useState(false);
const [ignoreAccents, setIgnoreAccents] = useState(false);
const [trim, setTrim] = useState(false);
const [matchFromStart, setMatchFromStart] = useState(false);
const filterConfig = {
ignoreCase,
ignoreAccents,
trim,
matchFrom: matchFromStart ? ('start' as const) : ('any' as const),
};
return (
<>
<Select
defaultValue={colourOptions[0]}
isClearable
isSearchable
name="color"
options={colourOptions}
filterOption={createFilter(filterConfig)}
/>
<Note Tag="label">
<Checkbox
checked={ignoreCase}
onChange={() => setIgnoreCase((prev) => !prev)}
id="cypress-single__clearable-checkbox"
/>
Ignore Case
</Note>
<Note Tag="label">
<Checkbox
checked={ignoreAccents}
onChange={() => setIgnoreAccents((prev) => !prev)}
id="cypress-single__clearable-checkbox"
/>
Ignore Accents
</Note>
<Note Tag="label">
<Checkbox
checked={trim}
onChange={() => setTrim((prev) => !prev)}
id="cypress-single__clearable-checkbox"
/>
Trim
</Note>
<Note Tag="label">
<Checkbox
checked={matchFromStart}
onChange={() => setMatchFromStart((prev) => !prev)}
id="cypress-single__clearable-checkbox"
/>
Match from the start
</Note>
</>
);
};
================================================
FILE: docs/examples/CustomAriaLive.tsx
================================================
import React, { CSSProperties, useState } from 'react';
import Select, { AriaOnFocus } from 'react-select';
import { ColourOption, colourOptions } from '../data';
export default function CustomAriaLive() {
const [ariaFocusMessage, setAriaFocusMessage] = useState('');
const [isMenuOpen, setIsMenuOpen] = useState(false);
const style: { [key: string]: CSSProperties } = {
blockquote: {
fontStyle: 'italic',
fontSize: '.75rem',
margin: '1rem 0',
},
label: {
fontSize: '.75rem',
fontWeight: 'bold',
lineHeight: 2,
},
};
const onFocus: AriaOnFocus<ColourOption> = ({ focused, isDisabled }) => {
const msg = `You are currently focused on option ${focused.label}${
isDisabled ? ', disabled' : ''
}`;
setAriaFocusMessage(msg);
return msg;
};
const onMenuOpen = () => setIsMenuOpen(true);
const onMenuClose = () => setIsMenuOpen(false);
return (
<form>
<label style={style.label} id="aria-label" htmlFor="aria-example-input">
Select a color
</label>
{!!ariaFocusMessage && !!isMenuOpen && (
<blockquote style={style.blockquote}>"{ariaFocusMessage}"</blockquote>
)}
<Select
aria-labelledby="aria-label"
ariaLiveMessages={{
onFocus,
}}
inputId="aria-example-input"
name="aria-live-color"
onMenuOpen={onMenuOpen}
onMenuClose={onMenuClose}
options={colourOptions}
/>
</form>
);
}
================================================
FILE: docs/examples/CustomClearIndicator.tsx
================================================
import React, { CSSProperties, FunctionComponent } from 'react';
import Select, { ClearIndicatorProps } from 'react-select';
import { CSSObject } from '@emotion/serialize';
import { ColourOption, colourOptions } from '../data';
const CustomClearText: FunctionComponent = () => <>clear all</>;
const ClearIndicator = (props: ClearIndicatorProps<ColourOption, true>) => {
const {
children = <CustomClearText />,
getStyles,
innerProps: { ref, ...restInnerProps },
} = props;
return (
<div
{...restInnerProps}
ref={ref}
style={getStyles('clearIndicator', props) as CSSProperties}
>
<div style={{ padding: '0px 5px' }}>{children}</div>
</div>
);
};
const ClearIndicatorStyles = (
base: CSSObject,
state: ClearIndicatorProps<ColourOption>
): CSSObject => ({
...base,
cursor: 'pointer',
color: state.isFocused ? 'blue' : 'black',
});
export default function CustomClearIndicator() {
return (
<Select
closeMenuOnSelect={false}
components={{ ClearIndicator }}
styles={{ clearIndicator: ClearIndicatorStyles }}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
}
================================================
FILE: docs/examples/CustomControl.tsx
================================================
import React from 'react';
import Select, { components, ControlProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const controlStyles = {
border: '1px solid black',
padding: '5px',
background: colourOptions[2].color,
color: 'white',
};
const ControlComponent = (props: ControlProps<ColourOption, false>) => (
<div style={controlStyles}>
<p>Custom Control</p>
<components.Control {...props} />
</div>
);
export default () => (
<Select
defaultValue={colourOptions[0]}
isClearable
components={{ Control: ControlComponent }}
isSearchable
name="color"
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomDropdownIndicator.tsx
================================================
import React from 'react';
import EmojiIcon from '@atlaskit/icon/glyph/emoji';
import Select, { components, DropdownIndicatorProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const DropdownIndicator = (
props: DropdownIndicatorProps<ColourOption, true>
) => {
return (
<components.DropdownIndicator {...props}>
<EmojiIcon label="Emoji" primaryColor={colourOptions[2].color} />
</components.DropdownIndicator>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ DropdownIndicator }}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomFilterOptions.tsx
================================================
import React from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';
const filterOptions = (
candidate: { label: string; value: string; data: any },
input: string
) => {
if (input) {
return candidate.value === customOptions[0].value;
}
return true;
};
const customOptions = [
{
value: 'custom',
label: 'Using a custom filter to always display this option on search',
},
...colourOptions,
];
export default () => (
<Select
defaultValue={customOptions[0]}
isClearable
isSearchable
name="color"
options={customOptions}
filterOption={filterOptions}
/>
);
================================================
FILE: docs/examples/CustomGetOptionLabel.tsx
================================================
import React from 'react';
import Select from 'react-select';
import { flavourOptions } from '../data';
export default () => (
<>
<p>
Composing a display label from the label property and rating property in
the options object
</p>
<Select
defaultValue={flavourOptions[0]}
isClearable
isSearchable
name="color"
options={flavourOptions}
getOptionLabel={(option) => `${option.label}: ${option.rating}`}
/>
</>
);
================================================
FILE: docs/examples/CustomGetOptionValue.tsx
================================================
import React, { Fragment } from 'react';
import Select from 'react-select';
import { dogOptions } from '../data';
export default function CustomGetOptionValue() {
return (
<Fragment>
<p>Using id property, instead of value property.</p>
<Select
defaultValue={dogOptions[0]}
isClearable
isSearchable
name="dog"
options={dogOptions}
getOptionValue={(option) => `${option['id']}`}
/>
</Fragment>
);
}
================================================
FILE: docs/examples/CustomGroup.tsx
================================================
import React from 'react';
import Select, { components, GroupProps } from 'react-select';
import {
ColourOption,
colourOptions,
FlavourOption,
groupedOptions,
} from '../data';
const groupStyles = {
border: `2px dotted ${colourOptions[2].color}`,
borderRadius: '5px',
background: '#f2fcff',
};
const Group = (props: GroupProps<ColourOption | FlavourOption, false>) => (
<div style={groupStyles}>
<components.Group {...props} />
</div>
);
export default () => (
<Select<ColourOption | FlavourOption>
defaultValue={colourOptions[1]}
options={groupedOptions}
components={{ Group }}
/>
);
================================================
FILE: docs/examples/CustomGroupHeading.tsx
================================================
import React from 'react';
import Select, { components, GroupHeadingProps } from 'react-select';
import {
ColourOption,
colourOptions,
FlavourOption,
groupedOptions,
} from '../data';
import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
import Tooltip from '@atlaskit/tooltip';
const groupStyles = {
border: `2px dotted ${colourOptions[2].color}`,
color: 'white',
background: colourOptions[2].color,
padding: '5px 0px',
display: 'flex',
};
const GroupHeading = (
props: GroupHeadingProps<ColourOption | FlavourOption>
) => (
<div style={groupStyles}>
<components.GroupHeading {...props} />
<Tooltip content="Custom GroupHeading Component">
<EditorPanelIcon label="Editor Panel" />
</Tooltip>
</div>
);
export default () => (
<Select<ColourOption | FlavourOption>
defaultValue={colourOptions[1]}
options={groupedOptions}
components={{ GroupHeading }}
styles={{
groupHeading: (base) => ({
...base,
flex: '1 1',
color: 'white',
margin: 0,
}),
}}
/>
);
================================================
FILE: docs/examples/CustomIndicatorSeparator.tsx
================================================
import React from 'react';
import Select, { IndicatorSeparatorProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const indicatorSeparatorStyle = {
alignSelf: 'stretch',
backgroundColor: colourOptions[2].color,
marginBottom: 8,
marginTop: 8,
width: 1,
};
const IndicatorSeparator = ({
innerProps,
}: IndicatorSeparatorProps<ColourOption, true>) => {
return <span style={indicatorSeparatorStyle} {...innerProps} />;
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ IndicatorSeparator }}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomIndicatorsContainer.tsx
================================================
import React from 'react';
import Select, { components, IndicatorsContainerProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const IndicatorsContainer = (
props: IndicatorsContainerProps<ColourOption, true>
) => {
return (
<div style={{ background: colourOptions[2].color }}>
<components.IndicatorsContainer {...props} />
</div>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ IndicatorsContainer }}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomInput.tsx
================================================
import React from 'react';
import Tooltip from '@atlaskit/tooltip';
import Select, { components, InputProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const Input = (props: InputProps<ColourOption, true>) => {
if (props.isHidden) {
return <components.Input {...props} />;
}
return (
<div style={{ border: `1px dotted ${colourOptions[2].color}` }}>
<Tooltip content={'Custom Input'}>
<components.Input {...props} />
</Tooltip>
</div>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ Input }}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomIsOptionDisabled.tsx
================================================
import React from 'react';
import Select from 'react-select';
import { flavourOptions } from '../data';
export default () => (
<>
<p>
Disable all options that do not have a 'safe' rating, via the
isOptionsDisabled fn prop
</p>
<Select
defaultValue={flavourOptions[0]}
isClearable
isSearchable
name="color"
options={flavourOptions}
isOptionDisabled={(option) => option.rating !== 'safe'}
/>
</>
);
================================================
FILE: docs/examples/CustomLoadingIndicator.tsx
================================================
import React from 'react';
import Spinner from '@atlaskit/spinner';
import Tooltip from '@atlaskit/tooltip';
import AsyncSelect from 'react-select/async';
import { LoadingIndicatorProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const LoadingIndicator = (props: LoadingIndicatorProps<ColourOption>) => {
return (
<Tooltip content={'Custom Loader'}>
<Spinner {...props} delay={0} />
</Tooltip>
);
};
const filterColors = (inputValue: string) =>
colourOptions.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
const promiseOptions = (inputValue: string) =>
new Promise<ColourOption[]>((resolve) => {
setTimeout(() => {
resolve(filterColors(inputValue));
}, 1000);
});
const CustomLoadingIndicator = () => {
return (
<AsyncSelect
cacheOptions
defaultOptions
loadOptions={promiseOptions}
components={{ LoadingIndicator }}
/>
);
};
export default CustomLoadingIndicator;
================================================
FILE: docs/examples/CustomLoadingMessage.tsx
================================================
import React, { CSSProperties } from 'react';
import Tooltip from '@atlaskit/tooltip';
import AsyncSelect from 'react-select/async';
import { NoticeProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const LoadingMessage = (props: NoticeProps<ColourOption, false>) => {
return (
<Tooltip content={'Custom Loading Message'}>
<div
{...props.innerProps}
style={props.getStyles('loadingMessage', props) as CSSProperties}
>
{props.children}
</div>
</Tooltip>
);
};
const filterColors = (inputValue: string) =>
colourOptions.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
const promiseOptions = (inputValue: string) =>
new Promise<ColourOption[]>((resolve) => {
setTimeout(() => {
resolve(filterColors(inputValue));
}, 1000);
});
const CustomLoadingMessage = () => {
return (
<AsyncSelect
cacheOptions
defaultOptions
loadOptions={promiseOptions}
styles={{
loadingMessage: (base) => ({
...base,
backgroundColor: colourOptions[2].color,
color: 'white',
}),
}}
components={{ LoadingMessage }}
/>
);
};
export default CustomLoadingMessage;
================================================
FILE: docs/examples/CustomMenu.tsx
================================================
import React, { Fragment } from 'react';
import Select, { components, MenuProps } from 'react-select';
import {
ColourOption,
colourOptions,
FlavourOption,
GroupedOption,
groupedOptions,
} from '../data';
function getLength(
options: readonly (GroupedOption | ColourOption | FlavourOption)[]
): number {
return options.reduce((acc, curr) => {
if ('options' in curr) return acc + getLength(curr.options);
return acc + 1;
}, 0);
}
const menuHeaderStyle = {
padding: '8px 12px',
};
const Menu = (
props: MenuProps<ColourOption | FlavourOption, false, GroupedOption>
) => {
const optionsLength = getLength(props.options);
return (
<Fragment>
<div style={menuHeaderStyle}>
Custom Menu with {optionsLength} options
</div>
<components.Menu<ColourOption | FlavourOption, false, GroupedOption>
{...props}
>
{props.children}
</components.Menu>
</Fragment>
);
};
export default () => (
<Select<ColourOption | FlavourOption, false, GroupedOption>
defaultValue={colourOptions[1]}
options={groupedOptions}
components={{ Menu }}
/>
);
================================================
FILE: docs/examples/CustomMenuList.tsx
================================================
import React from 'react';
import Select, { components, MenuListProps } from 'react-select';
import {
ColourOption,
colourOptions,
FlavourOption,
GroupedOption,
groupedOptions,
} from '../data';
const menuHeaderStyle = {
padding: '8px 12px',
background: colourOptions[2].color,
color: 'white',
};
const MenuList = (
props: MenuListProps<ColourOption | FlavourOption, false, GroupedOption>
) => {
return (
<components.MenuList {...props}>
<div style={menuHeaderStyle}>Custom Menu List</div>
{props.children}
</components.MenuList>
);
};
export default () => (
<Select<ColourOption | FlavourOption, false, GroupedOption>
defaultValue={colourOptions[1]}
options={groupedOptions}
components={{ MenuList }}
/>
);
================================================
FILE: docs/examples/CustomMultiValueContainer.tsx
================================================
import React from 'react';
import Tooltip from '@atlaskit/tooltip';
import Select, { components, MultiValueGenericProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const MultiValueContainer = (props: MultiValueGenericProps<ColourOption>) => {
return (
<Tooltip content={'Customise your multi-value container!'}>
<components.MultiValueContainer {...props} />
</Tooltip>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ MultiValueContainer }}
styles={{
multiValue: (base) => ({
...base,
border: `2px dotted ${colourOptions[2].color}`,
}),
}}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomMultiValueLabel.tsx
================================================
import React from 'react';
import Tooltip from '@atlaskit/tooltip';
import Select, { components, MultiValueGenericProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const MultiValueLabel = (props: MultiValueGenericProps<ColourOption>) => {
return (
<Tooltip content={'Customise your multi-value label component!'}>
<components.MultiValueLabel {...props} />
</Tooltip>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ MultiValueLabel }}
styles={{
multiValueLabel: (base) => ({
...base,
backgroundColor: colourOptions[2].color,
color: 'white',
}),
}}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomMultiValueRemove.tsx
================================================
import React from 'react';
import EmojiIcon from '@atlaskit/icon/glyph/emoji';
import Tooltip from '@atlaskit/tooltip';
import Select, { components, MultiValueRemoveProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const MultiValueRemove = (props: MultiValueRemoveProps<ColourOption>) => {
return (
<Tooltip content={'Customise your multi-value remove component!'} truncate>
<components.MultiValueRemove {...props}>
<EmojiIcon label="Emoji" primaryColor={colourOptions[2].color} />
</components.MultiValueRemove>
</Tooltip>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ MultiValueRemove }}
styles={{
multiValueRemove: (base) => ({
...base,
border: `1px dotted ${colourOptions[2].color}`,
height: '100%',
}),
}}
defaultValue={[colourOptions[4], colourOptions[5]]}
isMulti
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomNoOptionsMessage.tsx
================================================
import React from 'react';
import Tooltip from '@atlaskit/tooltip';
import Select, { components, NoticeProps } from 'react-select';
import { colourOptions } from '../data';
const msgStyles = {
background: colourOptions[2].color,
color: 'white',
};
const NoOptionsMessage = (props: NoticeProps) => {
return (
<Tooltip content="Custom NoOptionsMessage Component">
<components.NoOptionsMessage {...props} />
</Tooltip>
);
};
const CustomNoOptionsMessage = () => {
return (
<Select
isClearable
components={{ NoOptionsMessage }}
styles={{ noOptionsMessage: (base) => ({ ...base, ...msgStyles }) }}
isSearchable
name="color"
options={[]}
/>
);
};
export default CustomNoOptionsMessage;
================================================
FILE: docs/examples/CustomOption.tsx
================================================
import React from 'react';
import Tooltip from '@atlaskit/tooltip';
import Select, { components, OptionProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const Option = (props: OptionProps<ColourOption>) => {
return (
<Tooltip content={'Customise your option component!'} truncate>
<components.Option {...props} />
</Tooltip>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ Option }}
styles={{
option: (base) => ({
...base,
border: `1px dotted ${colourOptions[2].color}`,
height: '100%',
}),
}}
defaultValue={colourOptions[4]}
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomPlaceholder.tsx
================================================
import React from 'react';
import Select, { components, PlaceholderProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const Placeholder = (props: PlaceholderProps<ColourOption>) => {
return <components.Placeholder {...props} />;
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ Placeholder }}
placeholder={'custom placeholder component'}
styles={{
placeholder: (base) => ({
...base,
fontSize: '1em',
color: colourOptions[2].color,
fontWeight: 400,
}),
}}
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomSelectContainer.tsx
================================================
import React from 'react';
import Select, { components, ContainerProps } from 'react-select';
import Tooltip from '@atlaskit/tooltip';
import { ColourOption, colourOptions } from '../data';
const SelectContainer = ({
children,
...props
}: ContainerProps<ColourOption>) => {
return (
<Tooltip content={'customise your select container'} delay={0}>
<components.SelectContainer {...props}>
{children}
</components.SelectContainer>
</Tooltip>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ SelectContainer }}
styles={{
container: (base) => ({
...base,
backgroundColor: colourOptions[2].color,
padding: 5,
}),
}}
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomSelectProps.tsx
================================================
import React, { MouseEventHandler, useState } from 'react';
import Select, {
components,
ControlProps,
Props,
StylesConfig,
} from 'react-select';
import { ColourOption, colourOptions } from '../data';
const EMOJIS = ['👍', '🤙', '👏', '👌', '🙌', '✌️', '🖖', '👐'];
const Control = ({ children, ...props }: ControlProps<ColourOption, false>) => {
// @ts-ignore
const { emoji, onEmojiClick } = props.selectProps;
const style = { cursor: 'pointer' };
return (
<components.Control {...props}>
<span onMouseDown={onEmojiClick} style={style}>
{emoji}
</span>
{children}
</components.Control>
);
};
const CustomSelectProps = (props: Props<ColourOption>) => {
const [clickCount, setClickCount] = useState(0);
const onClick: MouseEventHandler<HTMLSpanElement> = (e) => {
setClickCount(clickCount + 1);
e.preventDefault();
e.stopPropagation();
};
const styles: StylesConfig<ColourOption, false> = {
control: (css) => ({ ...css, paddingLeft: '1rem' }),
};
const emoji = EMOJIS[clickCount % EMOJIS.length];
return (
<Select
{...props}
// @ts-ignore
emoji={emoji}
onEmojiClick={onClick}
components={{ Control }}
isSearchable
name="emoji"
options={colourOptions}
styles={styles}
/>
);
};
export default CustomSelectProps;
================================================
FILE: docs/examples/CustomSingleValue.tsx
================================================
import React from 'react';
import Select, { components, SingleValueProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const SingleValue = ({
children,
...props
}: SingleValueProps<ColourOption>) => (
<components.SingleValue {...props}>{children}</components.SingleValue>
);
export default () => (
<Select
defaultValue={colourOptions[0]}
isClearable
styles={{
singleValue: (base) => ({
...base,
padding: 5,
borderRadius: 5,
background: colourOptions[2].color,
color: 'white',
display: 'flex',
}),
}}
components={{ SingleValue }}
isSearchable
name="color"
options={colourOptions}
/>
);
================================================
FILE: docs/examples/CustomValueContainer.tsx
================================================
import React from 'react';
import Select, { components, ValueContainerProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const ValueContainer = ({
children,
...props
}: ValueContainerProps<ColourOption>) => (
<components.ValueContainer {...props}>{children}</components.ValueContainer>
);
export default () => (
<Select
defaultValue={colourOptions[0]}
isClearable
styles={{
singleValue: (base) => ({ ...base, color: 'white' }),
valueContainer: (base) => ({
...base,
background: colourOptions[2].color,
color: 'white',
width: '100%',
}),
}}
components={{ ValueContainer }}
isSearchable
name="color"
options={colourOptions}
/>
);
================================================
FILE: docs/examples/DefaultOptions.tsx
================================================
import React from 'react';
import AsyncSelect from 'react-select/async';
import { ColourOption, colourOptions } from '../data';
const filterColors = (inputValue: string) => {
return colourOptions.filter((i) =>
i.label.toLowerCase().includes(inputValue.toLowerCase())
);
};
const promiseOptions = (inputValue: string) =>
new Promise<ColourOption[]>((resolve) => {
setTimeout(() => {
resolve(filterColors(inputValue));
}, 1000);
});
export default () => (
<AsyncSelect
cacheOptions
defaultOptions={colourOptions}
loadOptions={promiseOptions}
/>
);
================================================
FILE: docs/examples/Experimental.tsx
================================================
/** @jsx jsx */
import { useState } from 'react';
import { jsx } from '@emotion/react';
import { CSSObject } from '@emotion/serialize';
import moment, { Moment } from 'moment';
import * as chrono from 'chrono-node';
import Select, {
GroupProps,
OptionProps,
components as SelectComponents,
} from 'react-select';
interface DateOption {
date: Moment;
value: Date;
label: string;
display?: string;
}
const createOptionForDate = (d: Moment | Date) => {
const date = moment.isMoment(d) ? d : moment(d);
return {
date,
value: date.toDate(),
label: date.calendar(null, {
sameDay: '[Today] (Do MMM YYYY)',
nextDay: '[Tomorrow] (Do MMM YYYY)',
nextWeek: '[Next] dddd (Do MMM YYYY)',
lastDay: '[Yesterday] (Do MMM YYYY)',
lastWeek: '[Last] dddd (Do MMM YYYY)',
sameElse: 'Do MMMM YYYY',
}),
};
};
interface CalendarGroup {
label: string;
options: readonly DateOption[];
}
const defaultOptions: (DateOption | CalendarGroup)[] = [
'today',
'tomorrow',
'yesterday',
].map((i) => createOptionForDate(chrono.parseDate(i)));
const createCalendarOptions = (date = new Date()) => {
const daysInMonth = Array.apply(null, Array(moment(date).daysInMonth())).map(
(x, i) => {
const d = moment(date).date(i + 1);
return { ...createOptionForDate(d), display: 'calendar' };
}
);
return {
label: moment(date).format('MMMM YYYY'),
options: daysInMonth,
};
};
defaultOptions.push(createCalendarOptions());
const suggestions = [
'sunday',
'saturday',
'friday',
'thursday',
'wednesday',
'tuesday',
'monday',
'december',
'november',
'october',
'september',
'august',
'july',
'june',
'may',
'april',
'march',
'february',
'january',
'yesterday',
'tomorrow',
'today',
].reduce<{ [key: string]: string }>((acc, str) => {
for (let i = 1; i < str.length; i++) {
acc[str.substr(0, i)] = str;
}
return acc;
}, {});
const suggest = (str: string) =>
str
.split(/\b/)
.map((i) => suggestions[i] || i)
.join('');
const days = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
const daysHeaderStyles: CSSObject = {
marginTop: '5px',
paddingTop: '5px',
paddingLeft: '2%',
borderTop: '1px solid #eee',
};
const daysHeaderItemStyles: CSSObject = {
color: '#999',
cursor: 'default',
fontSize: '75%',
fontWeight: 500,
display: 'inline-block',
width: '12%',
margin: '0 1%',
textAlign: 'center',
};
const daysContainerStyles: CSSObject = {
paddingTop: '5px',
paddingLeft: '2%',
};
const Group = (props: GroupProps<DateOption, false>) => {
const {
Heading,
getStyles,
getClassNames,
children,
label,
headingProps,
cx,
theme,
selectProps,
} = props;
return (
<div aria-label={label as string} css={getStyles('group', props)}>
<Heading
selectProps={selectProps}
theme={theme}
getStyles={getStyles}
getClassNames={getClassNames}
cx={cx}
{...headingProps}
>
{label}
</Heading>
<div css={daysHeaderStyles}>
{days.map((day, i) => (
<span key={`${i}-${day}`} css={daysHeaderItemStyles}>
{day}
</span>
))}
</div>
<div css={daysContainerStyles}>{children}</div>
</div>
);
};
const getOptionStyles = (defaultStyles: CSSObject): CSSObject => ({
...defaultStyles,
display: 'inline-block',
width: '12%',
margin: '0 1%',
textAlign: 'center',
borderRadius: '4px',
});
const Option = (props: OptionProps<DateOption, false>) => {
const { data, getStyles, innerRef, innerProps } = props;
if (data.display === 'calendar') {
const defaultStyles = getStyles('option', props);
const styles = getOptionStyles(defaultStyles);
if (data.date.date() === 1) {
const indentBy = data.date.day();
if (indentBy) {
styles.marginLeft = `${indentBy * 14 + 1}%`;
}
}
return (
<span {...innerProps} css={styles} ref={innerRef}>
{data.date.format('D')}
</span>
);
} else return <SelectComponents.Option {...props} />;
};
interface DatePickerProps {
readonly value: DateOption | null;
readonly onChange: (newValue: DateOption | null) => void;
}
const DatePicker = (props: DatePickerProps) => {
const [options, setOptions] = useState(defaultOptions);
const handleInputChange = (value: string) => {
if (!value) {
setOptions(defaultOptions);
return;
}
const date = chrono.parseDate(suggest(value.toLowerCase()));
if (!date) {
setOptions([]);
return;
}
setOptions([createOptionForDate(date), createCalendarOptions(date)]);
};
return (
<Select<DateOption, false>
{...props}
components={{ Group, Option }}
filterOption={null}
isMulti={false}
isOptionSelected={(o, v) => v.some((i) => i.date.isSame(o.date, 'day'))}
maxMenuHeight={380}
onChange={props.onChange}
onInputChange={handleInputChange}
options={options}
value={props.value}
/>
);
};
export default () => {
const [value, setValue] = useState<DateOption | null>(
defaultOptions[0] as DateOption
);
return (
<DatePicker value={value} onChange={(newValue) => setValue(newValue)} />
);
};
================================================
FILE: docs/examples/FixedOptions.tsx
================================================
import React, { useState } from 'react';
import Select, { ActionMeta, OnChangeValue, StylesConfig } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const styles: StylesConfig<ColourOption, true> = {
multiValue: (base, state) => {
return state.data.isFixed ? { ...base, backgroundColor: 'gray' } : base;
},
multiValueLabel: (base, state) => {
return state.data.isFixed
? { ...base, fontWeight: 'bold', color: 'white', paddingRight: 6 }
: base;
},
multiValueRemove: (base, state) => {
return state.data.isFixed ? { ...base, display: 'none' } : base;
},
};
const orderOptions = (values: readonly ColourOption[]) => {
return values
.filter((v) => v.isFixed)
.concat(values.filter((v) => !v.isFixed));
};
export default () => {
const [value, setValue] = useState<readonly ColourOption[]>(
orderOptions([colourOptions[0], colourOptions[1], colourOptions[3]])
);
const onChange = (
newValue: OnChangeValue<ColourOption, true>,
actionMeta: ActionMeta<ColourOption>
) => {
switch (actionMeta.action) {
case 'remove-value':
case 'pop-value':
if (actionMeta.removedValue.isFixed) {
return;
}
break;
case 'clear':
newValue = colourOptions.filter((v) => v.isFixed);
break;
}
setValue(orderOptions(newValue));
};
return (
<Select
value={value}
isMulti
styles={styles}
isClearable={value.some((v) => !v.isFixed)}
name="colors"
className="basic-multi-select"
classNamePrefix="select"
onChange={onChange}
options={colourOptions}
/>
);
};
================================================
FILE: docs/examples/MenuBuffer.tsx
================================================
import React from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';
export default () => (
<Select
defaultValue={colourOptions[0]}
options={colourOptions}
styles={{ menu: (base) => ({ ...base, marginBottom: 76 }) }}
/>
);
================================================
FILE: docs/examples/MenuPortal.tsx
================================================
import React, { useState } from 'react';
import Modal from '@atlaskit/modal-dialog';
import Button from '@atlaskit/button';
import Select, { MenuPlacement } from 'react-select';
import { H1, Note } from '../styled-components';
import { colourOptions } from '../data';
export default () => {
const [isOpen, setIsOpen] = useState(false);
const [isFixed, setIsFixed] = useState(false);
const [menuPlacement, setMenuPlacement] = useState<MenuPlacement>('bottom');
return (
<>
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
{isOpen ? (
<Modal onClose={() => setIsOpen(false)}>
<H1>Portaled Menu Element</H1>
<Select
defaultValue={colourOptions[0]}
isClearable
styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
menuPortalTarget={document.body}
isSearchable
name="color"
menuPosition={isFixed ? 'fixed' : 'absolute'}
menuPlacement={menuPlacement}
options={colourOptions}
menuShouldScrollIntoView={false}
/>
<Note Tag="label">
<select
onChange={(e) =>
setMenuPlacement(e.currentTarget.value as MenuPlacement)
}
value={menuPlacement}
id="cypress-portalled__radio-bottom"
>
<option value="auto">auto</option>
<option value="bottom">bottom</option>
<option value="top">top</option>
</select>
</Note>
<Note Tag="label" style={{ marginLeft: '1em' }}>
<input
type="radio"
onChange={() => setIsFixed((prev) => !prev)}
value="fixed"
checked={isFixed}
id="cypress-portalled__fixed"
/>
Fixed
</Note>
<Note Tag="label" style={{ marginLeft: '1em' }}>
<input
type="radio"
onChange={() => setIsFixed((prev) => !prev)}
value="portal"
checked={!isFixed}
id="cypress-portalled__portal"
/>
Portal
</Note>
</Modal>
) : null}
</>
);
};
================================================
FILE: docs/examples/MultiSelectSort.tsx
================================================
import React, { MouseEventHandler } from 'react';
import Select, {
components,
MultiValueGenericProps,
MultiValueProps,
OnChangeValue,
Props,
} from 'react-select';
import {
SortableContainer,
SortableContainerProps,
SortableElement,
SortEndHandler,
SortableHandle,
} from 'react-sortable-hoc';
import { ColourOption, colourOptions } from '../data';
function arrayMove<T>(array: readonly T[], from: number, to: number) {
const slicedArray = array.slice();
slicedArray.splice(
to < 0 ? array.length + to : to,
0,
slicedArray.splice(from, 1)[0]
);
return slicedArray;
}
const SortableMultiValue = SortableElement(
(props: MultiValueProps<ColourOption>) => {
// this prevents the menu from being opened/closed when the user clicks
// on a value to begin dragging it. ideally, detecting a click (instead of
// a drag) would still focus the control and toggle the menu, but that
// requires some magic with refs that are out of scope for this example
const onMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
e.preventDefault();
e.stopPropagation();
};
const innerProps = { ...props.innerProps, onMouseDown };
return <components.MultiValue {...props} innerProps={innerProps} />;
}
);
const SortableMultiValueLabel = SortableHandle(
(props: MultiValueGenericProps) => <components.MultiValueLabel {...props} />
);
const SortableSelect = SortableContainer(Select) as React.ComponentClass<
Props<ColourOption, true> & SortableContainerProps
>;
export default function MultiSelectSort() {
const [selected, setSelected] = React.useState<readonly ColourOption[]>([
colourOptions[4],
colourOptions[5],
]);
const onChange = (selectedOptions: OnChangeValue<ColourOption, true>) =>
setSelected(selectedOptions);
const onSortEnd: SortEndHandler = ({ oldIndex, newIndex }) => {
const newValue = arrayMove(selected, oldIndex, newIndex);
setSelected(newValue);
console.log(
'Values sorted:',
newValue.map((i) => i.value)
);
};
return (
<SortableSelect
useDragHandle
// react-sortable-hoc props:
axis="xy"
onSortEnd={onSortEnd}
distance={4}
// small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
getHelperDimensions={({ node }) => node.getBoundingClientRect()}
// react-select props:
isMulti
options={colourOptions}
value={selected}
onChange={onChange}
components={{
// @ts-ignore We're failing to provide a required index prop to SortableElement
MultiValue: SortableMultiValue,
MultiValueLabel: SortableMultiValueLabel,
}}
closeMenuOnSelect={false}
/>
);
}
================================================
FILE: docs/examples/OnSelectResetsInput.tsx
================================================
import React from 'react';
import Select, { InputActionMeta } from 'react-select';
import { colourOptions } from '../data';
export default () => {
const [menuIsOpen, setMenuIsOpen] = React.useState<boolean>();
const onInputChange = (
inputValue: string,
{ action, prevInputValue }: InputActionMeta
) => {
if (action === 'input-change') return inputValue;
if (action === 'menu-close') {
if (prevInputValue) setMenuIsOpen(true);
else setMenuIsOpen(undefined);
}
return prevInputValue;
};
return (
<Select
isMulti
defaultValue={colourOptions[0]}
isClearable
isSearchable
onInputChange={onInputChange}
name="color"
options={colourOptions}
menuIsOpen={menuIsOpen}
/>
);
};
================================================
FILE: docs/examples/Popout.tsx
================================================
/** @jsx jsx */
import { ReactNode, useState } from 'react';
import { jsx } from '@emotion/react';
import Button from '@atlaskit/button';
import Select, { StylesConfig } from 'react-select';
import { defaultTheme } from 'react-select';
import { StateOption, stateOptions } from '../data';
const { colors } = defaultTheme;
const selectStyles: StylesConfig<StateOption, false> = {
control: (provided) => ({
...provided,
minWidth: 240,
margin: 8,
}),
menu: () => ({ boxShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.1)' }),
};
export default () => {
const [isOpen, setIsOpen] = useState(false);
const [value, setValue] = useState<StateOption | null>();
return (
<Dropdown
isOpen={isOpen}
onClose={() => setIsOpen(false)}
target={
<Button
iconAfter={<ChevronDown />}
onClick={() => setIsOpen((prev) => !prev)}
isSelected={isOpen}
>
{value ? `State: ${value.label}` : 'Select a State'}
</Button>
}
>
<Select
autoFocus
backspaceRemovesValue={false}
components={{ DropdownIndicator, IndicatorSeparator: null }}
controlShouldRenderValue={false}
hideSelectedOptions={false}
isClearable={false}
menuIsOpen
onChange={(newValue) => {
setValue(newValue);
setIsOpen(false);
}}
options={stateOptions}
placeholder="Search..."
styles={selectStyles}
tabSelectsValue={false}
value={value}
/>
</Dropdown>
);
};
// styled components
const Menu = (props: JSX.IntrinsicElements['div']) => {
const shadow = 'hsla(218, 50%, 10%, 0.1)';
return (
<div
css={{
backgroundColor: 'white',
borderRadius: 4,
boxShadow: `0 0 0 1px ${shadow}, 0 4px 11px ${shadow}`,
marginTop: 8,
position: 'absolute',
zIndex: 2,
}}
{...props}
/>
);
};
const Blanket = (props: JSX.IntrinsicElements['div']) => (
<div
css={{
bottom: 0,
left: 0,
top: 0,
right: 0,
position: 'fixed',
zIndex: 1,
}}
{...props}
/>
);
const Dropdown = ({
children,
isOpen,
target,
onClose,
}: {
children?: ReactNode;
readonly isOpen: boolean;
readonly target: ReactNode;
readonly onClose: () => void;
}) => (
<div css={{ position: 'relative' }}>
{target}
{isOpen ? <Menu>{children}</Menu> : null}
{isOpen ? <Blanket onClick={onClose} /> : null}
</div>
);
const Svg = (p: JSX.IntrinsicElements['svg']) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
focusable="false"
role="presentation"
{...p}
/>
);
const DropdownIndicator = () => (
<div css={{ color: colors.neutral20, height: 24, width: 32 }}>
<Svg>
<path
d="M16.436 15.085l3.94 4.01a1 1 0 0 1-1.425 1.402l-3.938-4.006a7.5 7.5 0 1 1 1.423-1.406zM10.5 16a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11z"
fill="currentColor"
fillRule="evenodd"
/>
</Svg>
</div>
);
const ChevronDown = () => (
<Svg style={{ marginRight: -6 }}>
<path
d="M8.292 10.293a1.009 1.009 0 0 0 0 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 0 0 0-1.419.987.987 0 0 0-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 0 0-1.406 0z"
fill="currentColor"
fillRule="evenodd"
/>
</Svg>
);
================================================
FILE: docs/examples/StyleCompositionExample.tsx
================================================
/** @jsx jsx */
import { jsx } from '@emotion/react';
import Select, { OptionProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const Option = (props: OptionProps<ColourOption>) => {
const {
children,
className,
cx,
getStyles,
isDisabled,
isFocused,
isSelected,
innerRef,
innerProps,
} = props;
return (
<div
ref={innerRef}
css={getStyles('option', props)}
className={cx(
{
option: true,
'option--is-disabled': isDisabled,
'option--is-focused': isFocused,
'option--is-selected': isSelected,
},
className
)}
{...innerProps}
>
{children}
</div>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ Option }}
styles={{
option: (base) => ({
...base,
border: `1px dotted ${colourOptions[2].color}`,
height: '100%',
}),
}}
defaultValue={colourOptions[4]}
options={colourOptions}
/>
);
================================================
FILE: docs/examples/StyledMulti.tsx
================================================
import React from 'react';
import chroma from 'chroma-js';
import { ColourOption, colourOptions } from '../data';
import Select, { StylesConfig } from 'react-select';
const colourStyles: StylesConfig<ColourOption, true> = {
control: (styles) => ({ ...styles, backgroundColor: 'white' }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: isDisabled
? undefined
: isSelected
? data.color
: isFocused
? color.alpha(0.1).css()
: undefined,
color: isDisabled
? '#ccc'
: isSelected
? chroma.contrast(color, 'white') > 2
? 'white'
: 'black'
: data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
':active': {
...styles[':active'],
backgroundColor: !isDisabled
? isSelected
? data.color
: color.alpha(0.3).css()
: undefined,
},
};
},
multiValue: (styles, { data }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: color.alpha(0.1).css(),
};
},
multiValueLabel: (styles, { data }) => ({
...styles,
color: data.color,
}),
multiValueRemove: (styles, { data }) => ({
...styles,
color: data.color,
':hover': {
backgroundColor: data.color,
color: 'white',
},
}),
};
export default () => (
<Select
closeMenuOnSelect={false}
defaultValue={[colourOptions[0], colourOptions[1]]}
isMulti
options={colourOptions}
styles={colourStyles}
/>
);
================================================
FILE: docs/examples/StyledSingle.tsx
================================================
import React from 'react';
import chroma from 'chroma-js';
import { ColourOption, colourOptions } from '../data';
import Select, { StylesConfig } from 'react-select';
const dot = (color = 'transparent') => ({
alignItems: 'center',
display: 'flex',
':before': {
backgroundColor: color,
borderRadius: 10,
content: '" "',
display: 'block',
marginRight: 8,
height: 10,
width: 10,
},
});
const colourStyles: StylesConfig<ColourOption> = {
control: (styles) => ({ ...styles, backgroundColor: 'white' }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: isDisabled
? undefined
: isSelected
? data.color
: isFocused
? color.alpha(0.1).css()
: undefined,
color: isDisabled
? '#ccc'
: isSelected
? chroma.contrast(color, 'white') > 2
? 'white'
: 'black'
: data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
':active': {
...styles[':active'],
backgroundColor: !isDisabled
? isSelected
? data.color
: color.alpha(0.3).css()
: undefined,
},
};
},
input: (styles) => ({ ...styles, ...dot() }),
placeholder: (styles) => ({ ...styles, ...dot('#ccc') }),
singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
};
export default () => (
<Select
defaultValue={colourOptions[2]}
options={colourOptions}
styles={colourStyles}
/>
);
================================================
FILE: docs/examples/Theme.tsx
================================================
import React from 'react';
import { flavourOptions } from '../data';
import Select from 'react-select';
export default () => (
<Select
defaultValue={flavourOptions[2]}
options={flavourOptions}
theme={(theme) => ({
...theme,
borderRadius: 0,
colors: {
...theme.colors,
primary25: 'hotpink',
primary: 'black',
},
})}
/>
);
================================================
FILE: docs/examples/index.tsx
================================================
export { default as AccessingInternals } from './AccessingInternals';
export { default as ControlledMenu } from './ControlledMenu';
export { default as AnimatedMulti } from './AnimatedMulti';
export { default as AsyncCallbacks } from './AsyncCallbacks';
export { default as AsyncCreatable } from './AsyncCreatable';
export { default as AsyncPromises } from './AsyncPromises';
export { default as BasicGrouped } from './BasicGrouped';
export { default as BasicMulti } from './BasicMulti';
export { default as BasicSingle } from './BasicSingle';
export { default as CustomAriaLive } from './CustomAriaLive';
export { default as CustomControl } from './CustomControl';
export { default as CreatableAdvanced } from './CreatableAdvanced';
export { default as CreatableInputOnly } from './CreatableInputOnly';
export { default as CreateFilter } from './CreateFilter';
export { default as CreatableMulti } from './CreatableMulti';
export { default as CreatableSingle } from './CreatableSingle';
export { default as CustomSelectProps } from './CustomSelectProps';
export { default as CustomClearIndicator } from './CustomClearIndicator';
export { default as CustomDropdownIndicator } from './CustomDropdownIndicator';
export { default as CustomLoadingIndicator } from './CustomLoadingIndicator';
export { default as CustomLoadingMessage } from './CustomLoadingMessage';
export { default as CustomGroup } from './CustomGroup';
export { default as CustomMenu } from './CustomMenu';
export { default as CustomMenuList } from './CustomMenuList';
export { default as CustomIndicatorsContainer } from './CustomIndicatorsContainer';
export { default as CustomIndicatorSeparator } from './CustomIndicatorSeparator';
export { default as CustomNoOptionsMessage } from './CustomNoOptionsMessage';
export { default as CustomMultiValueContainer } from './CustomMultiValueContainer';
export { default as CustomOption } from './CustomOption';
export { default as CustomMultiValueLabel } from './CustomMultiValueLabel';
export { default as CustomMultiValueRemove } from './CustomMultiValueRemove';
export { default as CustomInput } from './CustomInput';
export { default as CustomGroupHeading } from './CustomGroupHeading';
export { default as CustomPlaceholder } from './CustomPlaceholder';
export { default as CustomSelectContainer } from './CustomSelectContainer';
export { default as CustomSingleValue } from './CustomSingleValue';
export { default as CustomValueContainer } from './CustomValueContainer';
export { default as CustomGetOptionLabel } from './CustomGetOptionLabel';
export { default as CustomGetOptionValue } from './CustomGetOptionValue';
export { default as CustomFilterOptions } from './CustomFilterOptions';
export { default as CustomIsOptionDisabled } from './CustomIsOptionDisabled';
export { default as DefaultOptions } from './DefaultOptions';
export { default as Experimental } from './Experimental';
export { default as FixedOptions } from './FixedOptions';
export { default as MultiSelectSort } from './MultiSelectSort';
export { default as Popout } from './Popout';
export { default as StyledMulti } from './StyledMulti';
export { default as StyledSingle } from './StyledSingle';
export { default as OnSelectResetsInput } from './OnSelectResetsInput';
export { default as AsyncMulti } from './AsyncMulti';
export { default as MenuBuffer } from './MenuBuffer';
export { default as MenuPortal } from './MenuPortal';
export { default as Theme } from './Theme';
export { default as StyleCompositionExample } from './StyleCompositionExample';
================================================
FILE: docs/generate-magical-types/generate/package.json
================================================
{
"main": "dist/react-select-generate-magical-types-generate.cjs.js",
"module": "dist/react-select-generate-magical-types-generate.esm.js"
}
================================================
FILE: docs/generate-magical-types/package.json
================================================
{
"name": "@react-select/generate-magical-types",
"main": "dist/generate-magical-types.cjs.js",
"exports": {
"./generate": {
"module": "./generate/dist/react-select-generate-magical-types-generate.esm.js",
"import": "./generate/dist/react-select-generate-magical-types-generate.cjs.mjs",
"default": "./generate/dist/react-select-generate-magical-types-generate.cjs.js"
},
"./serialize": {
"module": "./serialize/dist/react-select-generate-magical-types-serialize.esm.js",
"import": "./serialize/dist/react-select-generate-magical-types-serialize.cjs.mjs",
"default": "./serialize/dist/react-select-generate-magical-types-serialize.cjs.js"
},
"./package.json": "./package.json"
},
"//": "these deps aren't real, they're just to appease preconstruct",
"dependencies": {
"@babel/runtime": "*",
"@magical-types/convert-type": "*",
"@magical-types/serialization": "*",
"ts-morph": "*",
"fs-extra": "*",
"flatted": "*"
},
"preconstruct": {
"entrypoints": [
"generate.ts",
"serialize.ts"
]
}
}
================================================
FILE: docs/generate-magical-types/serialize/package.json
================================================
{
"main": "dist/react-select-generate-magical-types-serialize.cjs.js",
"module": "dist/react-select-generate-magical-types-serialize.esm.js"
}
================================================
FILE: docs/generate-magical-types/src/generate.ts
================================================
import path from 'path';
// @ts-ignore
import fs from 'fs-extra';
import * as flatted from 'flatted';
import { Project } from 'ts-morph';
import { MagicalNode } from '@magical-types/types';
import { convertType, getPropTypesType } from '@magical-types/convert-type';
type MagicalNodesForPackage = Record<
string,
{ type: 'component' | 'other'; node: MagicalNode }
>;
export type MagicalNodes = Record<string, MagicalNodesForPackage>;
if (process.env.NODE_ENV === 'test') {
fs.outputFileSync(
path.join(__dirname, '..', 'dist', 'magical-types.json'),
flatted.stringify({})
);
} else {
const OTHERFILES: string[] = ['stateManager', 'Async', 'Creatable'];
const getOtherProps = (obj: MagicalNodes) => {
OTHERFILES.forEach((name: string) => {
let pkgExports: MagicalNodesForPackage = {};
obj[`${name}`] = pkgExports;
let sourceFile = project.getSourceFile(
path.join(__dirname, '../../PropTypes', `${name}.ts`)
);
if (!sourceFile) {
sourceFile = project.getSourceFile(
path.join(__dirname, '../../PropTypes', `${name}.tsx`)
);
}
if (!sourceFile) {
throw new Error(`source file not found for ${name}`);
}
resolveTypes({ sourceFile, item: name, pkgExports });
});
};
const resolveTypes = ({
sourceFile,
item,
pkgExports,
}: {
sourceFile: any;
item: string;
pkgExports: MagicalNodesForPackage;
}) => {
let exportedDeclarations = sourceFile.getExportedDeclarations();
for (const [exportName, declaration] of exportedDeclarations) {
if (declaration.length) {
let type = declaration[0].getType().compilerType;
let typeKind: 'component' | 'other' = 'other';
console.log(`about to convert ${exportName} from ${item}`);
if (exportName[0].toUpperCase() === exportName[0]) {
try {
type = getPropTypesType(type);
typeKind = 'component';
} catch (err) {}
}
pkgExports[exportName] = {
node: convertType(type, []),
type: typeKind,
};
console.log('converted');
}
}
};
let project = new Project({
addFilesFromTsConfig: true,
tsConfigFilePath: path.resolve(__dirname, '../../../tsconfig.json'),
});
console.log('done');
let pkgDir = path.resolve(__dirname, '../../../packages');
let pkgs = fs
.readdirSync(pkgDir, {
withFileTypes: true,
})
.filter(
// @ts-ignore
(x) =>
x.isDirectory() &&
fs.existsSync(path.join(pkgDir, path.join(x.name), 'package.json'))
)
// @ts-ignore
.map((x) => x.name);
let obj: MagicalNodes = {};
for (const item of pkgs) {
let pkgExports: MagicalNodesForPackage = {};
obj[`${item}`] = pkgExports;
let sourceFile = project.getSourceFile(
path.join(pkgDir, item, 'src', 'index.tsx')
);
if (!sourceFile) {
sourceFile = project.getSourceFile(
path.join(pkgDir, item, 'src', 'index.ts')
);
}
if (!sourceFile) {
throw new Error(`source file not found for ${item}`);
}
resolveTypes({ sourceFile, item, pkgExports });
}
getOtherProps(obj);
fs.outputFileSync(
path.join(__dirname, '..', 'dist', 'magical-types.json'),
flatted.stringify(obj)
);
}
================================================
FILE: docs/generate-magical-types/src/serialize.ts
================================================
import path from 'path';
// @ts-ignore
import fs from 'fs-extra';
import * as flatted from 'flatted';
import { MagicalNode } from '@magical-types/types';
import {
chunkNodes,
serializeNodes,
} from '@magical-types/serialization/serialize';
import { MagicalNodeMetadata, MagicalNodes } from './types';
const allTypes: MagicalNodes = flatted.parse(
fs.readFileSync(
path.join(__dirname, '..', 'dist', 'magical-types.json'),
'utf8'
)
);
const magicalTypesDir = path.resolve(__dirname, '..', '..', 'magical-types');
fs.removeSync(magicalTypesDir);
fs.ensureDirSync(magicalTypesDir);
let rootNodes: MagicalNode[] = [];
for (const pkgName in allTypes) {
for (const exportName in allTypes[pkgName]) {
rootNodes.push(allTypes[pkgName][exportName].node);
}
}
console.log('serializing nodes');
const serializationResult = serializeNodes(rootNodes);
console.log('done');
console.log('chunking nodes');
const chunkedNodes = chunkNodes(serializationResult);
console.log('done');
let outputPaths = chunkedNodes.map((x, index) =>
path.join(
magicalTypesDir,
`magical-types-${index}-${Math.random().toString(36)}.json`
)
);
let outputUrlSegments = outputPaths.map(
(filepath) => `/magical-types/${path.basename(filepath)}`
);
let manifestOutputPath = path.resolve(
magicalTypesDir,
'magical-types-manifest.json'
);
const metadataWithIndexes: MagicalNodeMetadata = {};
for (const pkgName in allTypes) {
metadataWithIndexes[pkgName] = {};
for (const exportName in allTypes[pkgName]) {
if (serializationResult.nodesMeta.has(allTypes[pkgName][exportName].node)) {
metadataWithIndexes[pkgName][exportName] = {
type: allTypes[pkgName][exportName].type,
index: serializationResult.nodesMeta.get(
allTypes[pkgName][exportName].node
)!.index,
};
}
}
}
(async () => {
console.log('writing output');
await Promise.all([
fs.writeFile(
manifestOutputPath,
JSON.stringify({
paths: outputUrlSegments,
types: metadataWithIndexes,
})
),
...outputPaths.map((filepath, index) =>
fs.writeFile(filepath, JSON.stringify(chunkedNodes[index]))
),
]);
console.log('done');
})().catch((err) => {
console.error(err);
process.exit(1);
});
================================================
FILE: docs/generate-magical-types/src/types.ts
================================================
import { MagicalNode, MagicalNodeIndex } from '@magical-types/types';
export type MagicalNodeMetadata = Record<
string,
Record<string, MagicalNodeRecord>
>;
export type MagicalNodeRecord = {
type: 'component' | 'other';
index: MagicalNodeIndex;
};
export type MagicalNodesForPackage = Record<
string,
{ type: 'component' | 'other'; node: MagicalNode }
>;
export type MagicalNodes = Record<string, MagicalNodesForPackage>;
================================================
FILE: docs/index.css
================================================
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,500,700');
body {
-moz-font-feature-settings: 'liga' on;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #253858;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
}
p > a,
p > a:hover,
p > a:visited,
li > a,
li > a:hover,
li > a:visited {
color: #2684ff;
}
code {
font-family: Roboto Mono, Monaco, monospace;
}
p > code {
white-space: nowrap;
}
p,
ul,
ol {
line-height: 1.5;
}
td p {
margin: 0;
}
h1,
h2,
h3,
h4,
h5 {
color: #091e42;
}
h6 {
color: #777;
margin-bottom: 0.25em;
text-transform: uppercase;
}
@keyframes dropIn {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -1666px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 26px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 6px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.animate-dropin {
animation: dropIn 0.66s;
}
================================================
FILE: docs/index.html
================================================
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>React-Select</title>
<meta
name="viewport"
content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
/>
<meta
name="keywords"
content="react,reactjs,react component,component,select,form,autocomplete,control,ui,javascript"
/>
<meta
name="description"
content="A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support."
/>
<meta property="og:locale" content="en-us" />
<meta property="og:title" content="React-Select" />
<meta
property="og:description"
content="A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support."
/>
<meta property="og:url" content="https://jedwatson.github.io/react-select" />
<meta property="og:site_name" content="React-Select" />
<meta property="og:type" content="article" />
<link rel="stylesheet" href="index.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-122737675-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-122737675-1');
</script>
<!--
NOTE: Include the polyfill below if you are testing the async/await example
<script language="javascript" src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.min.js"></script>
-->
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
================================================
FILE: docs/index.tsx
================================================
import '@babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
================================================
FILE: docs/isArray.ts
================================================
/**
* Alternative to Array.isArray that correctly narrows the type for readonly arrays.
*/
export default function isArray<T>(arg: unknown): arg is readonly T[] {
return Array.isArray(arg);
}
================================================
FILE: docs/markdown/renderer.tsx
================================================
/** @jsx emotionJSX */
import md, {
CodeProps,
CommonProps,
HeadingProps,
LinkProps,
} from 'react-markings';
import { jsx as emotionJSX } from '@emotion/react'; // eslint-disable-line no-unused-vars
import { Link as RRLink } from 'react-router-dom';
import Svg, { SvgProps } from '../Svg';
import store from './store';
// ==============================
// Syntax Highlighter
// ==============================
import SyntaxHighlighter, {
registerLanguage,
} from 'react-syntax-highlighter/prism-light';
import jsx from 'react-syntax-highlighter/languages/prism/jsx';
import { coy } from 'react-syntax-highlighter/styles/prism';
import { ReactElement } from 'react';
const customCoy = {
...coy,
'code[class*="language-"]': {
...coy['code[class*="language-"]'],
fontFamily: null, // inherit from css
},
'pre[class*="language-"]': {
...coy['pre[class*="language-"]'],
fontFamily: null, // inherit from css
},
};
registerLanguage('jsx', jsx);
// ==============================
// Helpers
// ==============================
function slugify(str: string): string {
return str.replace(/\W/g, '-').toLowerCase();
}
// ==============================
// Renderers
// ==============================
function isReactElement(child: ReactElement | string): child is ReactElement {
return (child as ReactElement).props;
}
function getLabel(children: (ReactElement | string)[] | ReactElement | string) {
let str = '';
if (Array.isArray(children)) {
children.forEach((c) => {
if (Array.isArray(c)) {
getLabel(c);
} else if (isReactElement(c)) {
str = c.props.children;
} else {
str = c;
}
});
} else if (isReactElement(children)) {
getLabel(children.props.children);
} else {
str = children;
}
return str;
}
const Chain = (props: Omit<SvgProps, 'ref' | 'size'>) => (
<Svg
size={16}
css={{
color: '#4C9AFF',
paddingRight: 10,
opacity: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-100%, -50%)',
transition: 'opacity 200ms',
}}
{...props}
>
<title>Link to</title>
<path d="M7.859 14.691l-0.81 0.805c-0.701 0.695-1.843 0.695-2.545 0-0.336-0.334-0.521-0.779-0.521-1.252s0.186-0.916 0.521-1.252l2.98-2.955c0.617-0.613 1.779-1.515 2.626-0.675 0.389 0.386 1.016 0.384 1.403-0.005 0.385-0.389 0.383-1.017-0.006-1.402-1.438-1.428-3.566-1.164-5.419 0.675l-2.98 2.956c-0.715 0.709-1.108 1.654-1.108 2.658 0 1.006 0.394 1.949 1.108 2.658 0.736 0.73 1.702 1.096 2.669 1.096s1.934-0.365 2.669-1.096l0.811-0.805c0.389-0.385 0.391-1.012 0.005-1.4s-1.014-0.39-1.403-0.006zM16.891 3.207c-1.547-1.534-3.709-1.617-5.139-0.197l-1.009 1.002c-0.389 0.386-0.392 1.013-0.006 1.401 0.386 0.389 1.013 0.391 1.402 0.005l1.010-1.001c0.74-0.736 1.711-0.431 2.346 0.197 0.336 0.335 0.522 0.779 0.522 1.252s-0.186 0.917-0.522 1.251l-3.18 3.154c-1.454 1.441-2.136 0.766-2.427 0.477-0.389-0.386-1.016-0.383-1.401 0.005s-0.384 1.017 0.005 1.401c0.668 0.662 1.43 0.99 2.228 0.99 0.977 0 2.010-0.492 2.993-1.467l3.18-3.153c0.712-0.71 1.107-1.654 1.107-2.658s-0.395-1.949-1.109-2.659z" />
</Svg>
);
const Heading = (props: HeadingProps) => {
const { children, level, nodeKey } = props;
const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
const label = getLabel(children);
const slug = slugify(label);
const linkify = [1, 2].includes(level);
if (linkify) {
store.add(nodeKey, { key: nodeKey, label, level, path: `#${slug}` });
}
const css = {
'&:first-child': { marginTop: 0 },
};
return linkify ? (
<Tag id={slug} css={css}>
<RRLink
to={`#${slug}`}
css={{
color: 'inherit',
position: 'relative',
textDecoration: 'none',
'&:hover > svg': { opacity: 1, transitionDelay: '300ms' },
}}
>
<Chain />
{children}
</RRLink>
</Tag>
) : (
<Tag css={css}>{children}</Tag>
);
};
export const Code = ({ literal }: CodeProps) => (
<code
css={{
backgroundColor: 'rgba(38, 132, 255, 0.08)',
color: '#172B4D',
fontSize: '90%',
fontStyle: 'normal',
padding: '1px 5px 2px',
borderRadius: 4,
}}
>
{literal}
</code>
);
interface CodeBlockProps {
codeinfo?: string[];
literal: string | null;
nodeKey?: string;
}
export const CodeBlock = ({
codeinfo,
literal,
nodeKey,
...props
}: CodeBlockProps) => {
const language = codeinfo![0];
return (
<SyntaxHighlighter
language={language}
style={customCoy}
customStyle={{
backgroundColor: 'none',
borderRadius: 4,
fontSize: 13,
marginBottom: '1em',
marginTop: '1em',
overflowX: 'auto',
WebkitOverflowScrolling: 'touch',
}}
{...props}
>
{literal}
</SyntaxHighlighter>
);
};
CodeBlock.defaultProps = { codeinfo: [], language: 'jsx' };
const Blockquote = ({ nodeKey, ...props }: CommonProps) => (
<blockquote
css={{
color: '#7A869A',
fontStyle: 'italic',
marginLeft: 0,
paddingLeft: 16,
borderLeft: '4px solid #eee',
}}
{...props}
/>
);
const Link = ({ nodeKey, href, ...props }: LinkProps) =>
href[0] === '/' ? (
<RRLink to={href} {...props} />
) : (
<a href={href} {...props} />
);
// ==============================
// Exports
// ==============================
export default md.customize({
renderers: { Blockquote, Code, Heading, CodeBlock, Link },
});
================================================
FILE: docs/markdown/store.ts
================================================
export interface Data {
key: string;
label: string;
level: number;
path: string;
}
class HeadingStore {
store: { [key: string]: Data } = {};
headings: { [key: string]: Data[] } = {};
add(key: string, data: Data) {
console.log('add being called with', data.label);
if (!this.headings[location.pathname]) {
this.headings[location.pathname] = [];
}
if (!this.store[key]) {
this.store[key] = data;
this.headings[location.pathname].push(data);
}
}
getStore() {
return this.store;
}
getPageHeadings(page: string) {
return this.headings[page];
}
getAllHeadings() {
return this.headings;
}
getHeadingByKey(key: string) {
return this.store[key];
}
}
// global heading store
const store = new HeadingStore();
export default store;
================================================
FILE: docs/package.json
================================================
{
"name": "@react-select/docs",
"private": true,
"version": "3.1.3",
"main": "dist/docs.cjs.js",
"author": "Jed Watson",
"license": "MIT",
"dependencies": {
"@atlaskit/button": "^15.1.4",
"@atlaskit/icon": "^11.0.1",
"@atlaskit/modal-dialog": "^11.2.5",
"@atlaskit/spinner": "^15.0.6",
"@atlaskit/tooltip": "^17.1.2",
"@babel/runtime": "^7.12.0",
"@emotion/react": "^11.8.1",
"@magical-types/convert-type": "^0.1.4",
"@magical-types/pretty": "^0.3.5",
"@magical-types/serialization": "^0.2.1",
"@magical-types/types": "^0.1.2",
"@types/chroma-js": "^1.4.3",
"@types/node-fetch": "^2.5.8",
"@types/raf-schd": "^4.0.0",
"@types/react-codesandboxer": "^3.1.0",
"@types/react-helmet": "^5.0.16",
"@types/react-markings": "^1.3.0",
"@types/react-node-resolver": "^2.0.0",
"@types/react-router-dom": "^4.3.5",
"@types/react-syntax-highlighter": "^0.0.8",
"@types/webpack": "^4.41.26",
"@types/webpack-dev-server": "^3.11.1",
"babel-plugin-macros": "^3.0.1",
"chroma-js": "^2.4.2",
"chrono-node": "^2.1.11",
"clean-webpack-plugin": "^3.0.0",
"codesandboxer": "^0.1.1",
"fork-ts-checker-webpack-plugin": "^6.1.0",
"html-webpack-plugin": "^3.2.0",
"moment": "^2.29.4",
"raf-schd": "^4.0.3",
"raw-loader": "^2.0.0",
"react": "^16.13.0",
"react-codesandboxer": "^3.1.5",
"react-dom": "^16.13.0",
"react-helmet": "^5.2.0",
"react-markings": "^1.3.0",
"react-router-dom": "^4.2.2",
"react-select": "^5.7.0",
"react-sortable-hoc": "^1.9.1",
"react-syntax-highlighter": "^7.0.1",
"style-loader": "^0.23.1",
"styled-components": "^4.4.1",
"ts-node": "^9.1.1",
"unfetch": "^4.2.0",
"webpack": "^4.30.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^3.3.1"
},
"scripts": {
"site-prebuild": "node ./generate-magical-types/generate && node ./generate-magical-types/serialize",
"start": "yarn site-prebuild && webpack serve --progress",
"start:test": "NODE_ENV=test yarn site-prebuild && webpack serve --progress",
"build:docs": "rimraf docs/dist && yarn site-prebuild && webpack --progress --mode production"
}
}
================================================
FILE: docs/pages/advanced/index.tsx
================================================
import React, { Fragment } from 'react';
import Helmet from 'react-helmet';
import md from '../../markdown/renderer';
import ExampleWrapper from '../../ExampleWrapper';
import {
AccessingInternals,
BasicGrouped,
CreateFilter,
ControlledMenu,
CustomAriaLive,
CustomFilterOptions,
CustomGetOptionLabel,
CustomGetOptionValue,
CustomIsOptionDisabled,
Experimental,
MenuBuffer,
MenuPortal,
MultiSelectSort,
Popout,
OnSelectResetsInput,
} from '../../examples';
export default function Advanced() {
return (
<Fragment>
<Helmet>
<title>Advanced - React Select</title>
<meta
name="description"
content="The react-select property API documentation."
/>
</Helmet>
{md`
# Advanced
## Accessibility
Accessibility is important. React-select is committed to providing a custom experience to all users and relies heavily on the aria-live spec to provide
a custom experience for all users. As such, we also provide an api to address internationaliz
gitextract_m207rt_u/ ├── .browserslistrc ├── .changeset/ │ ├── README.md │ ├── config.json │ └── getChangelogEntry.js ├── .circleci/ │ └── config.yml ├── .codesandbox/ │ └── ci.json ├── .coveralls.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github/ │ ├── CONTRIBUTING.md │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── config.yml │ ├── dependabot.yml │ └── workflows/ │ └── release.yml ├── .gitignore ├── .nvmrc ├── .prettierignore ├── .prettierrc.js ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── cypress/ │ ├── fixtures/ │ │ └── selectors.json │ ├── integration/ │ │ ├── multi-select.spec.ts │ │ └── single-select.spec.ts │ └── tsconfig.json ├── cypress.json ├── docs/ │ ├── App/ │ │ ├── Footer.tsx │ │ ├── GitHubButton.tsx │ │ ├── Header.tsx │ │ ├── PageNav.tsx │ │ ├── ScrollSpy.tsx │ │ ├── Section.tsx │ │ ├── Sticky.tsx │ │ ├── TwitterButton.tsx │ │ ├── components.tsx │ │ ├── index.tsx │ │ └── routes.ts │ ├── CHANGELOG.md │ ├── ExampleWrapper.tsx │ ├── NoMatch.tsx │ ├── PropTypes/ │ │ ├── Async.ts │ │ ├── Creatable.ts │ │ ├── Select.ts │ │ ├── components/ │ │ │ ├── ClearIndicator.ts │ │ │ ├── Control.ts │ │ │ ├── DropdownIndicator.ts │ │ │ ├── Group.ts │ │ │ ├── IndicatorsContainer.ts │ │ │ ├── IndicatorsSeparator.ts │ │ │ ├── Input.ts │ │ │ ├── LoadingIndicator.ts │ │ │ ├── LoadingMessage.ts │ │ │ ├── Menu.ts │ │ │ ├── MenuList.ts │ │ │ ├── MultiValue.ts │ │ │ ├── MultiValueContainer.ts │ │ │ ├── MultiValueLabel.ts │ │ │ ├── MultiValueRemove.ts │ │ │ ├── NoOptionsMessage.ts │ │ │ ├── Option.ts │ │ │ ├── Placeholder.ts │ │ │ ├── SelectContainer.ts │ │ │ ├── SingleValue.ts │ │ │ └── ValueContainer.ts │ │ └── stateManager.ts │ ├── Svg.tsx │ ├── Table.tsx │ ├── Tests.tsx │ ├── _redirects │ ├── data.ts │ ├── examples/ │ │ ├── AccessingInternals.tsx │ │ ├── AnimatedMulti.tsx │ │ ├── AsyncCallbacks.tsx │ │ ├── AsyncCreatable.tsx │ │ ├── AsyncMulti.tsx │ │ ├── AsyncPromises.tsx │ │ ├── BasicGrouped.tsx │ │ ├── BasicMulti.tsx │ │ ├── BasicSingle.tsx │ │ ├── ControlledMenu.tsx │ │ ├── CreatableAdvanced.tsx │ │ ├── CreatableInputOnly.tsx │ │ ├── CreatableMulti.tsx │ │ ├── CreatableSingle.tsx │ │ ├── CreateFilter.tsx │ │ ├── CustomAriaLive.tsx │ │ ├── CustomClearIndicator.tsx │ │ ├── CustomControl.tsx │ │ ├── CustomDropdownIndicator.tsx │ │ ├── CustomFilterOptions.tsx │ │ ├── CustomGetOptionLabel.tsx │ │ ├── CustomGetOptionValue.tsx │ │ ├── CustomGroup.tsx │ │ ├── CustomGroupHeading.tsx │ │ ├── CustomIndicatorSeparator.tsx │ │ ├── CustomIndicatorsContainer.tsx │ │ ├── CustomInput.tsx │ │ ├── CustomIsOptionDisabled.tsx │ │ ├── CustomLoadingIndicator.tsx │ │ ├── CustomLoadingMessage.tsx │ │ ├── CustomMenu.tsx │ │ ├── CustomMenuList.tsx │ │ ├── CustomMultiValueContainer.tsx │ │ ├── CustomMultiValueLabel.tsx │ │ ├── CustomMultiValueRemove.tsx │ │ ├── CustomNoOptionsMessage.tsx │ │ ├── CustomOption.tsx │ │ ├── CustomPlaceholder.tsx │ │ ├── CustomSelectContainer.tsx │ │ ├── CustomSelectProps.tsx │ │ ├── CustomSingleValue.tsx │ │ ├── CustomValueContainer.tsx │ │ ├── DefaultOptions.tsx │ │ ├── Experimental.tsx │ │ ├── FixedOptions.tsx │ │ ├── MenuBuffer.tsx │ │ ├── MenuPortal.tsx │ │ ├── MultiSelectSort.tsx │ │ ├── OnSelectResetsInput.tsx │ │ ├── Popout.tsx │ │ ├── StyleCompositionExample.tsx │ │ ├── StyledMulti.tsx │ │ ├── StyledSingle.tsx │ │ ├── Theme.tsx │ │ └── index.tsx │ ├── generate-magical-types/ │ │ ├── generate/ │ │ │ └── package.json │ │ ├── package.json │ │ ├── serialize/ │ │ │ └── package.json │ │ └── src/ │ │ ├── generate.ts │ │ ├── serialize.ts │ │ └── types.ts │ ├── index.css │ ├── index.html │ ├── index.tsx │ ├── isArray.ts │ ├── markdown/ │ │ ├── renderer.tsx │ │ └── store.ts │ ├── package.json │ ├── pages/ │ │ ├── advanced/ │ │ │ └── index.tsx │ │ ├── async/ │ │ │ └── index.tsx │ │ ├── components/ │ │ │ └── index.tsx │ │ ├── creatable/ │ │ │ └── index.tsx │ │ ├── home/ │ │ │ └── index.tsx │ │ ├── props/ │ │ │ └── index.tsx │ │ ├── styles/ │ │ │ └── index.tsx │ │ ├── typescript/ │ │ │ └── index.tsx │ │ ├── upgrade/ │ │ │ └── index.tsx │ │ └── upgrade-to-v2/ │ │ ├── index.tsx │ │ └── props.tsx │ ├── styled-components.tsx │ ├── tsconfig.json │ ├── utils.ts │ └── webpack.config.ts ├── netlify.toml ├── package.json ├── packages/ │ └── react-select/ │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── animated/ │ │ └── package.json │ ├── async/ │ │ └── package.json │ ├── async-creatable/ │ │ └── package.json │ ├── base/ │ │ └── package.json │ ├── creatable/ │ │ └── package.json │ ├── package.json │ ├── src/ │ │ ├── Async.tsx │ │ ├── AsyncCreatable.tsx │ │ ├── Creatable.tsx │ │ ├── NonceProvider.tsx │ │ ├── Select.tsx │ │ ├── __tests__/ │ │ │ ├── Async.test.tsx │ │ │ ├── AsyncCreatable.test.tsx │ │ │ ├── Creatable.test.tsx │ │ │ ├── Select.test.tsx │ │ │ ├── StateManaged.test.tsx │ │ │ ├── __snapshots__/ │ │ │ │ ├── Async.test.tsx.snap │ │ │ │ ├── AsyncCreatable.test.tsx.snap │ │ │ │ ├── Creatable.test.tsx.snap │ │ │ │ ├── Select.test.tsx.snap │ │ │ │ └── StateManaged.test.tsx.snap │ │ │ ├── constants.ts │ │ │ └── tsconfig.json │ │ ├── accessibility/ │ │ │ ├── helpers.ts │ │ │ └── index.ts │ │ ├── animated/ │ │ │ ├── Input.tsx │ │ │ ├── MultiValue.tsx │ │ │ ├── Placeholder.tsx │ │ │ ├── SingleValue.tsx │ │ │ ├── ValueContainer.tsx │ │ │ ├── index.ts │ │ │ └── transitions.tsx │ │ ├── async/ │ │ │ └── index.ts │ │ ├── async-creatable/ │ │ │ └── index.ts │ │ ├── base/ │ │ │ └── index.ts │ │ ├── builtins.ts │ │ ├── components/ │ │ │ ├── Control.tsx │ │ │ ├── Group.tsx │ │ │ ├── Input.tsx │ │ │ ├── LiveRegion.tsx │ │ │ ├── Menu.tsx │ │ │ ├── MultiValue.tsx │ │ │ ├── Option.tsx │ │ │ ├── Placeholder.tsx │ │ │ ├── SingleValue.tsx │ │ │ ├── containers.tsx │ │ │ ├── index.ts │ │ │ └── indicators.tsx │ │ ├── creatable/ │ │ │ └── index.ts │ │ ├── diacritics.ts │ │ ├── filters.ts │ │ ├── index.ts │ │ ├── internal/ │ │ │ ├── A11yText.tsx │ │ │ ├── DummyInput.tsx │ │ │ ├── RequiredInput.tsx │ │ │ ├── ScrollManager.tsx │ │ │ ├── index.ts │ │ │ ├── useScrollCapture.ts │ │ │ └── useScrollLock.ts │ │ ├── stateManager.tsx │ │ ├── styles.ts │ │ ├── theme.ts │ │ ├── types.ts │ │ ├── useAsync.ts │ │ ├── useCreatable.ts │ │ ├── useStateManager.ts │ │ └── utils.ts │ └── tsconfig.json ├── storybook/ │ ├── .gitignore │ ├── .storybook/ │ │ ├── .babelrc │ │ ├── main.ts │ │ └── preview.tsx │ ├── components/ │ │ ├── field.tsx │ │ ├── index.ts │ │ ├── inline.tsx │ │ ├── stack.tsx │ │ └── svg.tsx │ ├── data.ts │ ├── package.json │ ├── postcss.config.js │ ├── stories/ │ │ ├── AccessingInternalsViaRef.stories.tsx │ │ ├── AnimatedMulti.stories.tsx │ │ ├── AsyncCallbacks.stories.tsx │ │ ├── AsyncCreatable.stories.tsx │ │ ├── AsyncMulti.stories.tsx │ │ ├── AsyncPromises.stories.tsx │ │ ├── AsyncSelectWithDefaultOptions.stories.tsx │ │ ├── BasicGrouped.stories.tsx │ │ ├── BasicMulti.stories.tsx │ │ ├── BasicSingle.stories.tsx │ │ ├── ClassNamesWithTailwind.stories.tsx │ │ ├── ControlledMenu.stories.tsx │ │ ├── Creatable.stories.tsx │ │ ├── CreatableAdvanced.stories.tsx │ │ ├── CreatableInputOnly.stories.tsx │ │ ├── CreateFilter.stories.tsx │ │ ├── CustomAriaLive.stories.tsx │ │ ├── CustomClearIndicator.stories.tsx │ │ ├── CustomControl.stories.tsx │ │ ├── CustomDropdownIndicator.stories.tsx │ │ ├── CustomFilterOptions.stories.tsx │ │ ├── CustomFormatOptionLabel.stories.tsx │ │ ├── CustomGetOptionLabel.stories.tsx │ │ ├── CustomGetOptionValue.stories.tsx │ │ ├── CustomGroup.stories.tsx │ │ ├── CustomGroupHeading.stories.tsx │ │ ├── CustomIndicatorSeparator.stories.tsx │ │ ├── CustomIndicatorsContainer.stories.tsx │ │ ├── CustomInput.stories.tsx │ │ ├── CustomIsOptionDisabled.stories.tsx │ │ ├── CustomLoadingIndicator.stories.tsx │ │ ├── CustomLoadingMessage.stories.tsx │ │ ├── CustomMenu.stories.tsx │ │ ├── CustomMenuList.stories.tsx │ │ ├── CustomMultiValueContainer.stories.tsx │ │ ├── CustomMultiValueLabel.stories.tsx │ │ ├── CustomMultiValueRemove.stories.tsx │ │ ├── CustomNoOptionsMessage.stories.tsx │ │ ├── CustomOption.stories.tsx │ │ ├── CustomPlaceholder.stories.tsx │ │ ├── CustomSelectContainer.stories.tsx │ │ ├── CustomSelectProps.stories.tsx │ │ ├── CustomSingleValue.stories.tsx │ │ ├── CustomValueContainer.stories.tsx │ │ ├── ExperimentalDatePicker.stories.tsx │ │ ├── FixedOptions.stories.tsx │ │ ├── Grouped.stories.tsx │ │ ├── MenuBuffer.stories.tsx │ │ ├── MenuPortal.stories.tsx │ │ ├── MultiSelectSort.stories.tsx │ │ ├── OnSelectKeepsInput.stories.tsx │ │ ├── Popout.stories.tsx │ │ ├── StyleCompositionExample.stories.tsx │ │ ├── StyledMulti.stories.tsx │ │ ├── StyledSingle.stories.tsx │ │ ├── Tailwind.stories.tsx │ │ ├── Theme.stories.tsx │ │ └── UnstyledWithTailwind.stories.tsx │ ├── styles/ │ │ └── tailwind.css │ └── tailwind.config.js ├── test-setup.js └── tsconfig.json
SYMBOL INDEX (523 symbols across 164 files)
FILE: docs/App/Footer.tsx
function Footer (line 58) | function Footer() {
FILE: docs/App/GitHubButton.tsx
type Props (line 4) | interface Props {
FILE: docs/App/Header.tsx
type Change (line 15) | interface Change {
function getLabel (line 54) | function getLabel({ icon, label }: Change) {
type HeaderState (line 118) | interface HeaderState {
class Header (line 124) | class Header extends Component<RouteComponentProps, HeaderState> {
method componentDidMount (line 128) | componentDidMount() {
method render (line 157) | render() {
type CollapseProps (line 200) | interface CollapseProps {
type ContentProps (line 225) | interface ContentProps {
FILE: docs/App/PageNav.tsx
type NavState (line 30) | interface NavState {
class PageNav (line 35) | class PageNav extends Component<RouteComponentProps, NavState> {
method componentDidMount (line 38) | componentDidMount() {
method componentDidUpdate (line 44) | componentDidUpdate({ history, location }: RouteComponentProps) {
method render (line 80) | render() {
type NavItemProps (line 142) | interface NavItemProps {
FILE: docs/App/ScrollSpy.tsx
type Props (line 5) | interface Props {
type State (line 9) | interface State {
function getStyle (line 13) | function getStyle(el: HTMLElement, prop: string) {
function isInView (line 17) | function isInView(el: HTMLElement) {
class ScrollSpy (line 30) | class ScrollSpy extends Component<Props, State> {
method componentDidMount (line 35) | componentDidMount() {
method componentWillUnmount (line 39) | componentWillUnmount() {
method render (line 69) | render() {
FILE: docs/App/Sticky.tsx
type Props (line 4) | interface Props {
type State (line 7) | interface State {
class Sticky (line 15) | class Sticky extends Component<Props, State> {
method componentDidMount (line 26) | componentDidMount() {
method componentWillUnmount (line 30) | componentWillUnmount() {
method render (line 80) | render() {
FILE: docs/App/components.tsx
class ScrollToTop (line 118) | class ScrollToTop extends Component<RouteComponentProps> {
method componentDidUpdate (line 119) | componentDidUpdate(prevProps: RouteComponentProps) {
method render (line 132) | render() {
FILE: docs/App/index.tsx
class App (line 33) | class App extends Component {
method render (line 34) | render() {
FILE: docs/ExampleWrapper.tsx
type Props (line 22) | interface Props {
type ActionProps (line 147) | interface ActionProps {
FILE: docs/NoMatch.tsx
function NoMatch (line 5) | function NoMatch() {
FILE: docs/PropTypes/Select.ts
class Select (line 6) | class Select extends Component<
FILE: docs/PropTypes/components/ClearIndicator.ts
class ClearIndicator (line 4) | class ClearIndicator<
FILE: docs/PropTypes/components/Control.ts
class Control (line 4) | class Control<
FILE: docs/PropTypes/components/DropdownIndicator.ts
class DropdownIndicator (line 4) | class DropdownIndicator<
FILE: docs/PropTypes/components/Group.ts
class Group (line 4) | class Group<
FILE: docs/PropTypes/components/IndicatorsContainer.ts
class IndicatorsContainer (line 4) | class IndicatorsContainer<
FILE: docs/PropTypes/components/IndicatorsSeparator.ts
class DropdownIndicator (line 4) | class DropdownIndicator<
FILE: docs/PropTypes/components/Input.ts
class Input (line 4) | class Input<
FILE: docs/PropTypes/components/LoadingIndicator.ts
class LoadingIndicator (line 4) | class LoadingIndicator<
FILE: docs/PropTypes/components/LoadingMessage.ts
class LoadingMessage (line 4) | class LoadingMessage<
FILE: docs/PropTypes/components/Menu.ts
class Menu (line 4) | class Menu<
FILE: docs/PropTypes/components/MenuList.ts
class MenuList (line 4) | class MenuList<
FILE: docs/PropTypes/components/MultiValue.ts
class MultiValue (line 4) | class MultiValue<
FILE: docs/PropTypes/components/MultiValueContainer.ts
class MultiValueContainer (line 4) | class MultiValueContainer<
FILE: docs/PropTypes/components/MultiValueLabel.ts
class MultiValueLabel (line 4) | class MultiValueLabel<
FILE: docs/PropTypes/components/MultiValueRemove.ts
class MultiValueRemove (line 4) | class MultiValueRemove<
FILE: docs/PropTypes/components/NoOptionsMessage.ts
class NoOptionsMessage (line 4) | class NoOptionsMessage<
FILE: docs/PropTypes/components/Option.ts
class Option (line 4) | class Option<
FILE: docs/PropTypes/components/Placeholder.ts
class Placeholder (line 4) | class Placeholder<
FILE: docs/PropTypes/components/SelectContainer.ts
class SelectContainer (line 4) | class SelectContainer<
FILE: docs/PropTypes/components/SingleValue.ts
class SingleValue (line 4) | class SingleValue<
FILE: docs/PropTypes/components/ValueContainer.ts
class ValueContainer (line 4) | class ValueContainer<
FILE: docs/Svg.tsx
type SvgProps (line 4) | type SvgProps = { readonly size: number } & JSX.IntrinsicElements['svg'];
FILE: docs/Tests.tsx
type SuiteProps (line 14) | interface SuiteProps {
function Tests (line 201) | function Tests() {
FILE: docs/data.ts
type ColourOption (line 1) | interface ColourOption {
type FlavourOption (line 22) | interface FlavourOption {
type StateOption (line 35) | interface StateOption {
type GroupedOption (line 128) | interface GroupedOption {
FILE: docs/examples/AccessingInternals.tsx
function AccessingInternals (line 23) | function AccessingInternals() {
FILE: docs/examples/AnimatedMulti.tsx
function AnimatedMulti (line 9) | function AnimatedMulti() {
FILE: docs/examples/CreatableAdvanced.tsx
type Option (line 5) | interface Option {
FILE: docs/examples/CreatableInputOnly.tsx
type Option (line 9) | interface Option {
FILE: docs/examples/CustomAriaLive.tsx
function CustomAriaLive (line 6) | function CustomAriaLive() {
FILE: docs/examples/CustomClearIndicator.tsx
function CustomClearIndicator (line 34) | function CustomClearIndicator() {
FILE: docs/examples/CustomGetOptionValue.tsx
function CustomGetOptionValue (line 5) | function CustomGetOptionValue() {
FILE: docs/examples/CustomMenu.tsx
function getLength (line 12) | function getLength(
FILE: docs/examples/CustomSelectProps.tsx
constant EMOJIS (line 10) | const EMOJIS = ['👍', '🤙', '👏', '👌', '🙌', '✌️', '🖖', '👐'];
FILE: docs/examples/Experimental.tsx
type DateOption (line 14) | interface DateOption {
type CalendarGroup (line 37) | interface CalendarGroup {
type DatePickerProps (line 186) | interface DatePickerProps {
FILE: docs/examples/MultiSelectSort.tsx
function arrayMove (line 19) | function arrayMove<T>(array: readonly T[], from: number, to: number) {
function MultiSelectSort (line 52) | function MultiSelectSort() {
FILE: docs/generate-magical-types/src/generate.ts
type MagicalNodesForPackage (line 10) | type MagicalNodesForPackage = Record<
type MagicalNodes (line 15) | type MagicalNodes = Record<string, MagicalNodesForPackage>;
FILE: docs/generate-magical-types/src/types.ts
type MagicalNodeMetadata (line 3) | type MagicalNodeMetadata = Record<
type MagicalNodeRecord (line 8) | type MagicalNodeRecord = {
type MagicalNodesForPackage (line 13) | type MagicalNodesForPackage = Record<
type MagicalNodes (line 18) | type MagicalNodes = Record<string, MagicalNodesForPackage>;
FILE: docs/isArray.ts
function isArray (line 4) | function isArray<T>(arg: unknown): arg is readonly T[] {
FILE: docs/markdown/renderer.tsx
function slugify (line 43) | function slugify(str: string): string {
function isReactElement (line 51) | function isReactElement(child: ReactElement | string): child is ReactEle...
function getLabel (line 55) | function getLabel(children: (ReactElement | string)[] | ReactElement | s...
type CodeBlockProps (line 146) | interface CodeBlockProps {
FILE: docs/markdown/store.ts
type Data (line 1) | interface Data {
class HeadingStore (line 8) | class HeadingStore {
method add (line 12) | add(key: string, data: Data) {
method getStore (line 23) | getStore() {
method getPageHeadings (line 26) | getPageHeadings(page: string) {
method getAllHeadings (line 29) | getAllHeadings() {
method getHeadingByKey (line 32) | getHeadingByKey(key: string) {
FILE: docs/pages/advanced/index.tsx
function Advanced (line 23) | function Advanced() {
FILE: docs/pages/async/index.tsx
function Async (line 12) | function Async() {
FILE: docs/pages/components/index.tsx
function Components (line 31) | function Components() {
FILE: docs/pages/creatable/index.tsx
function Creatable (line 14) | function Creatable() {
FILE: docs/pages/home/index.tsx
function Home (line 17) | function Home() {
FILE: docs/pages/props/index.tsx
type ShowTypesProps (line 10) | type ShowTypesProps = {
function Api (line 22) | function Api() {
FILE: docs/pages/styles/index.tsx
function Styles (line 16) | function Styles() {
FILE: docs/pages/typescript/index.tsx
function TypeScript (line 5) | function TypeScript() {
FILE: docs/pages/upgrade-to-v2/index.tsx
function UpgradeGuide (line 7) | function UpgradeGuide() {
FILE: docs/pages/upgrade-to-v2/props.tsx
type Props (line 148) | interface Props {
class PropStatus (line 154) | class PropStatus extends Component<Props> {
method renderStatus (line 155) | renderStatus() {
method render (line 190) | render() {
type InputOptionState (line 203) | interface InputOptionState {
class InputOption (line 207) | class InputOption extends Component<OptionProps, InputOptionState> {
method render (line 213) | render() {
type PropChangesProps (line 278) | interface PropChangesProps {}
type PropChangesState (line 280) | interface PropChangesState {
class PropChanges (line 285) | class PropChanges extends Component<PropChangesProps, PropChangesState> {
method render (line 291) | render() {
FILE: docs/pages/upgrade/index.tsx
function Upgrade (line 6) | function Upgrade() {
FILE: docs/styled-components.tsx
type PreProps (line 104) | interface PreProps {
FILE: docs/utils.ts
type getNodeType (line 9) | type getNodeType =
function useMagicalNodes (line 17) | function useMagicalNodes() {
FILE: packages/react-select/src/Async.tsx
type AsyncSelect (line 15) | type AsyncSelect = <
FILE: packages/react-select/src/AsyncCreatable.tsx
type AsyncCreatableProps (line 14) | type AsyncCreatableProps<
type AsyncCreatableSelect (line 22) | type AsyncCreatableSelect = <
FILE: packages/react-select/src/Creatable.tsx
type CreatableProps (line 13) | type CreatableProps<
type CreatableSelect (line 20) | type CreatableSelect = <
FILE: packages/react-select/src/NonceProvider.tsx
type NonceProviderProps (line 7) | interface NonceProviderProps {
FILE: packages/react-select/src/Select.tsx
type FormatOptionLabelContext (line 69) | type FormatOptionLabelContext = 'menu' | 'value';
type FormatOptionLabelMeta (line 70) | interface FormatOptionLabelMeta<Option> {
type Props (line 76) | interface Props<
type State (line 325) | interface State<
type CategorizedOption (line 346) | interface CategorizedOption<Option> {
type FocusableOptionWithId (line 356) | interface FocusableOptionWithId<Option> {
type CategorizedGroup (line 361) | interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
type CategorizedGroupOrOption (line 368) | type CategorizedGroupOrOption<Option, Group extends GroupBase<Option>> =
function toCategorizedOption (line 372) | function toCategorizedOption<
function buildCategorizedOptions (line 398) | function buildCategorizedOptions<
function buildFocusableOptionsFromCategorizedOptions (line 436) | function buildFocusableOptionsFromCategorizedOptions<
function buildFocusableOptionsWithIds (line 455) | function buildFocusableOptionsWithIds<Option, Group extends GroupBase<Op...
function buildFocusableOptions (line 480) | function buildFocusableOptions<
function isFocusable (line 490) | function isFocusable<
function getNextFocusedValue (line 507) | function getNextFocusedValue<
function getNextFocusedOption (line 528) | function getNextFocusedOption<
function isOptionDisabled (line 570) | function isOptionDisabled<
function isOptionSelected (line 583) | function isOptionSelected<
function filterOption (line 599) | function filterOption<
class Select (line 625) | class Select<
method constructor (line 686) | constructor(props: Props<Option, IsMulti, Group>) {
method getDerivedStateFromProps (line 706) | static getDerivedStateFromProps(
method componentDidMount (line 797) | componentDidMount() {
method componentDidUpdate (line 824) | componentDidUpdate(prevProps: Props<Option, IsMulti, Group>) {
method componentWillUnmount (line 862) | componentWillUnmount() {
method onMenuOpen (line 872) | onMenuOpen() {
method onMenuClose (line 875) | onMenuClose() {
method onInputChange (line 883) | onInputChange(newValue: string, actionMeta: InputActionMeta) {
method focusInput (line 891) | focusInput() {
method blurInput (line 895) | blurInput() {
method openMenu (line 904) | openMenu(focusOption: 'first' | 'last') {
method focusValue (line 930) | focusValue(direction: 'previous' | 'next') {
method focusOption (line 973) | focusOption(direction: FocusDirection = 'first') {
method getTheme (line 1117) | getTheme() {
method getCommonProps (line 1154) | getCommonProps() {
method hasValue (line 1241) | hasValue() {
method hasOptions (line 1245) | hasOptions() {
method isClearable (line 1248) | isClearable(): boolean {
method isOptionDisabled (line 1257) | isOptionDisabled(option: Option, selectValue: Options<Option>): boolean {
method isOptionSelected (line 1260) | isOptionSelected(option: Option, selectValue: Options<Option>): boolean {
method filterOption (line 1263) | filterOption(option: FilterOptionOption<Option>, inputValue: string) {
method formatOptionLabel (line 1266) | formatOptionLabel(
method formatGroupLabel (line 1282) | formatGroupLabel(data: Group) {
method startListeningComposition (line 1394) | startListeningComposition() {
method stopListeningComposition (line 1404) | stopListeningComposition() {
method startListeningToTouch (line 1421) | startListeningToTouch() {
method stopListeningToTouch (line 1428) | stopListeningToTouch() {
method renderInput (line 1704) | renderInput() {
method renderPlaceholderOrValue (line 1792) | renderPlaceholderOrValue() {
method renderClearIndicator (line 1868) | renderClearIndicator() {
method renderLoadingIndicator (line 1898) | renderLoadingIndicator() {
method renderIndicatorSeparator (line 1916) | renderIndicatorSeparator() {
method renderDropdownIndicator (line 1934) | renderDropdownIndicator() {
method renderMenu (line 1956) | renderMenu() {
method renderFormField (line 2135) | renderFormField() {
method renderLiveRegion (line 2174) | renderLiveRegion() {
method render (line 2201) | render() {
type PublicBaseSelectProps (line 2250) | type PublicBaseSelectProps<
FILE: packages/react-select/src/__tests__/Creatable.test.tsx
type BasicProps (line 8) | interface BasicProps {
constant BASIC_PROPS (line 19) | const BASIC_PROPS: BasicProps = {
type Props (line 35) | interface Props extends Partial<BasicProps> {
type Opts (line 39) | interface Opts {
type CustomOption (line 283) | interface CustomOption {
constant CUSTOM_OPTIONS (line 288) | const CUSTOM_OPTIONS: readonly CustomOption[] = [
type CustomOptsProps (line 295) | interface CustomOptsProps extends Partial<Omit<BasicProps, 'options'>> {
type CustomOpts (line 300) | interface CustomOpts {
FILE: packages/react-select/src/__tests__/Select.test.tsx
type BasicProps (line 28) | interface BasicProps {
constant BASIC_PROPS (line 41) | const BASIC_PROPS: BasicProps = {
type CallsOnChangeOnDeselectOptsProps (line 711) | interface CallsOnChangeOnDeselectOptsProps
type CallsOnOnDeselectChangeOpts (line 728) | interface CallsOnOnDeselectChangeOpts {
function focusOption (line 858) | function focusOption(
type ClickingEnterOptsProps (line 1379) | interface ClickingEnterOptsProps extends BasicProps {
type ClickingEnterOpts (line 1383) | interface ClickingEnterOpts {
type RequiredOnInputOpts (line 1482) | interface RequiredOnInputOpts {
type GroupOption (line 3020) | interface GroupOption {
type Group (line 3024) | interface Group {
FILE: packages/react-select/src/__tests__/StateManaged.test.tsx
function openMenu (line 10) | function openMenu(container: HTMLElement) {
function toggleMenuOpen (line 20) | function toggleMenuOpen(container: HTMLElement) {
function closeMenu (line 27) | function closeMenu(container: HTMLElement) {
type BasicProps (line 35) | interface BasicProps {
constant BASIC_PROPS (line 46) | const BASIC_PROPS: BasicProps = {
type MenuToOpenByDefaultOptsProps (line 117) | interface MenuToOpenByDefaultOptsProps extends Partial<BasicProps> {
type MenuToOpenByDefaultOpts (line 122) | interface MenuToOpenByDefaultOpts {
type KeyboardInteractionOptsProps (line 262) | interface KeyboardInteractionOptsProps extends BasicProps {
type KeyboardInteractionOpts (line 266) | interface KeyboardInteractionOpts {
FILE: packages/react-select/src/__tests__/constants.ts
type Option (line 1) | interface Option {
constant OPTIONS (line 6) | const OPTIONS: readonly Option[] = [
type OptionDisabled (line 26) | interface OptionDisabled {
constant OPTIONS_DISABLED (line 32) | const OPTIONS_DISABLED: readonly OptionDisabled[] = [
type OptionNumberValue (line 52) | interface OptionNumberValue {
constant OPTIONS_NUMBER_VALUE (line 57) | const OPTIONS_NUMBER_VALUE: readonly OptionNumberValue[] = [
type OptionBooleanValue (line 71) | interface OptionBooleanValue {
constant OPTIONS_BOOLEAN_VALUE (line 76) | const OPTIONS_BOOLEAN_VALUE: readonly OptionBooleanValue[] = [
type OptionAccented (line 81) | interface OptionAccented {
constant OPTIONS_ACCENTED (line 86) | const OPTIONS_ACCENTED: readonly OptionAccented[] = [
type GroupedOption (line 91) | interface GroupedOption {
constant OPTIONS_GROUPED (line 98) | const OPTIONS_GROUPED: readonly GroupedOption[] = [
FILE: packages/react-select/src/accessibility/helpers.ts
function testPlatform (line 3) | function testPlatform(re: RegExp) {
function isIPhone (line 11) | function isIPhone() {
function isMac (line 15) | function isMac() {
function isIPad (line 19) | function isIPad() {
function isIOS (line 27) | function isIOS() {
function isAppleDevice (line 31) | function isAppleDevice() {
FILE: packages/react-select/src/accessibility/index.ts
type OptionContext (line 11) | type OptionContext = 'menu' | 'value';
type GuidanceContext (line 13) | type GuidanceContext = 'menu' | 'input' | 'value';
type AriaSelection (line 15) | type AriaSelection<Option, IsMulti extends boolean> =
type AriaGuidanceProps (line 23) | interface AriaGuidanceProps {
type AriaOnChangeProps (line 40) | type AriaOnChangeProps<Option, IsMulti extends boolean> = AriaSelection<
type AriaOnFilterProps (line 52) | interface AriaOnFilterProps {
type AriaOnFocusProps (line 59) | interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
type AriaGuidance (line 78) | type AriaGuidance = (props: AriaGuidanceProps) => string;
type AriaOnChange (line 79) | type AriaOnChange<Option, IsMulti extends boolean> = (
type AriaOnFilter (line 82) | type AriaOnFilter = (props: AriaOnFilterProps) => string;
type AriaOnFocus (line 83) | type AriaOnFocus<
type AriaLiveMessages (line 88) | interface AriaLiveMessages<
FILE: packages/react-select/src/animated/Input.tsx
type InputComponent (line 7) | type InputComponent = <
type AnimatedInputProps (line 15) | type AnimatedInputProps<
FILE: packages/react-select/src/animated/MultiValue.tsx
type MultiValueComponent (line 8) | type MultiValueComponent = <
type AnimatedMultiValueProps (line 16) | type AnimatedMultiValueProps<
FILE: packages/react-select/src/animated/Placeholder.tsx
type PlaceholderComponent (line 7) | type PlaceholderComponent = <
FILE: packages/react-select/src/animated/SingleValue.tsx
type SingleValueComponent (line 7) | type SingleValueComponent = <
FILE: packages/react-select/src/animated/ValueContainer.tsx
type ValueContainerComponent (line 7) | type ValueContainerComponent = <
type IsMultiValueContainerProps (line 15) | interface IsMultiValueContainerProps extends ValueContainerProps {
FILE: packages/react-select/src/animated/transitions.tsx
type FadeProps (line 14) | type FadeProps<ComponentProps> = {
type Width (line 63) | type Width = number | 'auto';
type CollapseProps (line 64) | interface CollapseProps {
FILE: packages/react-select/src/components/Control.tsx
type ControlProps (line 12) | interface ControlProps<
FILE: packages/react-select/src/components/Group.tsx
type ForwardedHeadingProps (line 18) | interface ForwardedHeadingProps<
type GroupProps (line 26) | interface GroupProps<
type GroupHeadingPropsDefinedProps (line 97) | interface GroupHeadingPropsDefinedProps<
type GroupHeadingProps (line 110) | type GroupHeadingProps<
FILE: packages/react-select/src/components/Input.tsx
type InputSpecificProps (line 12) | interface InputSpecificProps<
type InputProps (line 30) | type InputProps<
FILE: packages/react-select/src/components/LiveRegion.tsx
type LiveRegionProps (line 13) | interface LiveRegionProps<
FILE: packages/react-select/src/components/Menu.tsx
type CalculatedMenuPlacementAndHeight (line 45) | interface CalculatedMenuPlacementAndHeight {
type PlacementArgs (line 49) | interface PlacementArgs {
function getMenuPlacement (line 59) | function getMenuPlacement({
type MenuPlacementProps (line 224) | interface MenuPlacementProps {
type MenuProps (line 237) | interface MenuProps<
type PlacerProps (line 252) | interface PlacerProps {
type ChildrenProps (line 257) | interface ChildrenProps {
type MenuPlacerProps (line 262) | interface MenuPlacerProps<
function alignToControl (line 272) | function alignToControl(placement: CoercedMenuPlacement) {
type MenuListProps (line 397) | interface MenuListProps<
type NoticeProps (line 487) | interface NoticeProps<
type MenuPortalProps (line 554) | interface MenuPortalProps<
type PortalStyleArgs (line 567) | interface PortalStyleArgs {
type ComputedPosition (line 585) | interface ComputedPosition {
FILE: packages/react-select/src/components/MultiValue.tsx
type MultiValueComponents (line 13) | interface MultiValueComponents<
type MultiValueProps (line 23) | interface MultiValueProps<
type MultiValueGenericProps (line 114) | interface MultiValueGenericProps<
type MultiValueRemoveProps (line 137) | interface MultiValueRemoveProps<
function MultiValueRemove (line 147) | function MultiValueRemove<
FILE: packages/react-select/src/components/Option.tsx
type OptionProps (line 12) | interface OptionProps<
FILE: packages/react-select/src/components/Placeholder.tsx
type PlaceholderProps (line 11) | interface PlaceholderProps<
FILE: packages/react-select/src/components/SingleValue.tsx
type SingleValueProps (line 11) | interface SingleValueProps<
FILE: packages/react-select/src/components/containers.tsx
type ContainerProps (line 15) | interface ContainerProps<
type ValueContainerProps (line 66) | interface ValueContainerProps<
type IndicatorsContainerProps (line 130) | interface IndicatorsContainerProps<
FILE: packages/react-select/src/components/index.ts
type SelectComponents (line 51) | interface SelectComponents<
type SelectComponentsConfig (line 97) | type SelectComponentsConfig<
type SelectComponentsGeneric (line 131) | type SelectComponentsGeneric = typeof components;
type Props (line 133) | interface Props<
FILE: packages/react-select/src/components/indicators.tsx
type CrossIconProps (line 37) | type CrossIconProps = JSX.IntrinsicElements['svg'] & { size?: number };
type DownChevronProps (line 43) | type DownChevronProps = JSX.IntrinsicElements['svg'] & { size?: number };
type DropdownIndicatorProps (line 54) | interface DropdownIndicatorProps<
type ClearIndicatorProps (line 120) | interface ClearIndicatorProps<
type IndicatorSeparatorProps (line 159) | interface IndicatorSeparatorProps<
type LoadingDotProps (line 254) | interface LoadingDotProps {
type LoadingIndicatorProps (line 273) | interface LoadingIndicatorProps<
FILE: packages/react-select/src/filters.ts
type FilterOptionOption (line 4) | interface FilterOptionOption<Option> {
type Config (line 10) | interface Config<Option> {
FILE: packages/react-select/src/index.ts
type SelectInstance (line 12) | type SelectInstance<
FILE: packages/react-select/src/internal/DummyInput.tsx
function DummyInput (line 6) | function DummyInput({
FILE: packages/react-select/src/internal/ScrollManager.tsx
type Props (line 7) | interface Props {
function ScrollManager (line 25) | function ScrollManager({
FILE: packages/react-select/src/internal/useScrollCapture.ts
type Options (line 9) | interface Options {
function useScrollCapture (line 17) | function useScrollCapture({
FILE: packages/react-select/src/internal/useScrollLock.ts
constant STYLE_KEYS (line 3) | const STYLE_KEYS = [
constant LOCK_STYLES (line 11) | const LOCK_STYLES = {
function preventTouchMove (line 18) | function preventTouchMove(e: TouchEvent) {
function allowTouchMove (line 22) | function allowTouchMove(e: TouchEvent) {
function preventInertiaScroll (line 26) | function preventInertiaScroll(this: HTMLElement) {
function isTouchDevice (line 40) | function isTouchDevice() {
type Options (line 52) | interface Options {
function useScrollLock (line 62) | function useScrollLock({
FILE: packages/react-select/src/stateManager.tsx
type StateManagedSelect (line 15) | type StateManagedSelect = <
FILE: packages/react-select/src/styles.ts
type StylesProps (line 52) | interface StylesProps<
type StylesConfig (line 111) | type StylesConfig<
type ClassNamesConfig (line 122) | type ClassNamesConfig<
function mergeStyles (line 135) | function mergeStyles<
FILE: packages/react-select/src/theme.ts
type ThemeConfig (line 45) | type ThemeConfig = Theme | ((theme: Theme) => Theme);
FILE: packages/react-select/src/types.ts
type GroupBase (line 5) | interface GroupBase<Option> {
type OptionsOrGroups (line 10) | type OptionsOrGroups<Option, Group extends GroupBase<Option>> =
type Options (line 13) | type Options<Option> = readonly Option[];
type SingleValue (line 15) | type SingleValue<Option> = Option | null;
type MultiValue (line 16) | type MultiValue<Option> = readonly Option[];
type PropsValue (line 18) | type PropsValue<Option> = MultiValue<Option> | SingleValue<Option>;
type OnChangeValue (line 20) | type OnChangeValue<Option, IsMulti extends boolean> =
type Colors (line 23) | interface Colors {
type ThemeSpacing (line 45) | interface ThemeSpacing {
type Theme (line 51) | interface Theme {
type ClassNamesState (line 57) | type ClassNamesState = { [key: string]: boolean };
type CX (line 59) | type CX = (
type GetStyles (line 63) | type GetStyles<
type CommonProps (line 72) | interface CommonProps<
type CommonPropsAndClassName (line 104) | interface CommonPropsAndClassName<
type ActionMetaBase (line 112) | interface ActionMetaBase<Option> {
type SelectOptionActionMeta (line 119) | interface SelectOptionActionMeta<Option> extends ActionMetaBase<Option> {
type DeselectOptionActionMeta (line 125) | interface DeselectOptionActionMeta<Option>
type RemoveValueActionMeta (line 132) | interface RemoveValueActionMeta<Option> extends ActionMetaBase<Option> {
type PopValueActionMeta (line 138) | interface PopValueActionMeta<Option> extends ActionMetaBase<Option> {
type ClearActionMeta (line 144) | interface ClearActionMeta<Option> extends ActionMetaBase<Option> {
type CreateOptionActionMeta (line 150) | interface CreateOptionActionMeta<Option> extends ActionMetaBase<Option> {
type InitialInputFocusedActionMeta (line 156) | interface InitialInputFocusedActionMeta<Option, IsMulti extends boolean>
type ActionMeta (line 163) | type ActionMeta<Option> =
type SetValueAction (line 171) | type SetValueAction = 'select-option' | 'deselect-option';
type InputAction (line 173) | type InputAction =
type InputActionMeta (line 179) | interface InputActionMeta {
type MenuPlacement (line 185) | type MenuPlacement = 'auto' | 'bottom' | 'top';
type CoercedMenuPlacement (line 186) | type CoercedMenuPlacement = 'bottom' | 'top';
type MenuPosition (line 187) | type MenuPosition = 'absolute' | 'fixed';
type FocusDirection (line 189) | type FocusDirection =
type GetOptionLabel (line 197) | type GetOptionLabel<Option> = (option: Option) => string;
type GetOptionValue (line 198) | type GetOptionValue<Option> = (option: Option) => string;
type CSSObjectWithLabel (line 200) | type CSSObjectWithLabel = CSSObject & { label?: string };
FILE: packages/react-select/src/useAsync.ts
type AsyncManagedPropKeys (line 6) | type AsyncManagedPropKeys =
type AsyncAdditionalProps (line 12) | interface AsyncAdditionalProps<Option, Group extends GroupBase<Option>> {
type AsyncProps (line 38) | type AsyncProps<
function useAsync (line 45) | function useAsync<
FILE: packages/react-select/src/useCreatable.ts
type Accessors (line 18) | interface Accessors<Option> {
type CreatableAdditionalProps (line 23) | interface CreatableAdditionalProps<
type BaseCreatableProps (line 63) | type BaseCreatableProps<
function useCreatable (line 105) | function useCreatable<
FILE: packages/react-select/src/useStateManager.ts
type StateManagedPropKeys (line 11) | type StateManagedPropKeys =
type SelectPropsWithOptionalStateManagedProps (line 20) | type SelectPropsWithOptionalStateManagedProps<
type StateManagerAdditionalProps (line 27) | interface StateManagerAdditionalProps<Option> {
type StateManagerProps (line 33) | type StateManagerProps<
function useStateManager (line 40) | function useStateManager<
FILE: packages/react-select/src/utils.ts
function applyPrefixToName (line 34) | function applyPrefixToName(prefix: string, name: string) {
function classNames (line 44) | function classNames(
function handleInputChange (line 141) | function handleInputChange(
function isDocumentElement (line 160) | function isDocumentElement(
function normalizedHeight (line 169) | function normalizedHeight(el: HTMLElement | typeof window): number {
function getScrollTop (line 180) | function getScrollTop(el: HTMLElement | typeof window): number {
function scrollTo (line 187) | function scrollTo(el: HTMLElement | typeof window, top: number): void {
function getScrollParent (line 200) | function getScrollParent(element: HTMLElement) {
function easeOutCubic (line 233) | function easeOutCubic(t: number, b: number, c: number, d: number): number {
function animatedScrollTo (line 237) | function animatedScrollTo(
function scrollIntoView (line 264) | function scrollIntoView(
function getBoundingClientObj (line 293) | function getBoundingClientObj(element: HTMLElement) {
type RectType (line 304) | interface RectType {
function toKey (line 316) | function toKey(str: string) {
function isTouchCapable (line 324) | function isTouchCapable() {
function isMobileDevice (line 337) | function isMobileDevice() {
method passive (line 354) | get passive() {
function notNullish (line 370) | function notNullish<T>(item: T | null | undefined): item is T {
function isArray (line 374) | function isArray<T>(arg: unknown): arg is readonly T[] {
function valueTernary (line 378) | function valueTernary<Option, IsMulti extends boolean>(
function singleValueAsValue (line 386) | function singleValueAsValue<Option, IsMulti extends boolean>(
function multiValueAsValue (line 392) | function multiValueAsValue<Option, IsMulti extends boolean>(
FILE: storybook/components/field.tsx
type FieldProps (line 3) | type FieldProps = {
function Field (line 10) | function Field({
FILE: storybook/components/inline.tsx
type InlineProps (line 3) | type InlineProps = React.HTMLAttributes<HTMLDivElement> & {
function Inline (line 7) | function Inline({
FILE: storybook/components/stack.tsx
type StackProps (line 3) | type StackProps = React.HTMLAttributes<HTMLDivElement> & {
function Stack (line 7) | function Stack({
FILE: storybook/components/svg.tsx
function Svg (line 3) | function Svg(props: JSX.IntrinsicElements['svg']) {
function ChevronDown (line 16) | function ChevronDown(props: JSX.IntrinsicElements['svg']) {
FILE: storybook/data.ts
type ColourOption (line 1) | type ColourOption = {
type FlavourOption (line 22) | type FlavourOption = {
type StateOption (line 35) | type StateOption = {
type GroupedOption (line 123) | type GroupedOption = {
type PersonOption (line 139) | type PersonOption = {
type NumberOption (line 158) | type NumberOption = {
constant EMOJIS (line 169) | const EMOJIS = ['👍', '🤙', '👏', '👌', '🙌', '✌️', '🖖', '👐'];
FILE: storybook/stories/AccessingInternalsViaRef.stories.tsx
function AccessingInternalsViaRef (line 17) | function AccessingInternalsViaRef() {
function filterColors (line 96) | function filterColors(inputValue: string) {
function promiseOptions (line 102) | function promiseOptions(inputValue: string) {
FILE: storybook/stories/AsyncCallbacks.stories.tsx
function AsyncCallbacks (line 13) | function AsyncCallbacks() {
function filterColors (line 30) | function filterColors(inputValue: string) {
function loadOptions (line 36) | function loadOptions(
FILE: storybook/stories/AsyncCreatable.stories.tsx
function AsyncCreatable (line 13) | function AsyncCreatable() {
function filterColors (line 30) | function filterColors(inputValue: string) {
function promiseOptions (line 36) | function promiseOptions(inputValue: string) {
FILE: storybook/stories/AsyncMulti.stories.tsx
function AsyncMulti (line 13) | function AsyncMulti() {
function filterColors (line 31) | function filterColors(inputValue: string) {
function promiseOptions (line 37) | function promiseOptions(inputValue: string) {
FILE: storybook/stories/AsyncPromises.stories.tsx
function AsyncPromises (line 14) | function AsyncPromises() {
function filterColors (line 31) | function filterColors(inputValue: string) {
function promiseOptions (line 37) | function promiseOptions(inputValue: string) {
FILE: storybook/stories/AsyncSelectWithDefaultOptions.stories.tsx
function AsyncSelectWithDefaultOptions (line 14) | function AsyncSelectWithDefaultOptions() {
function filterColors (line 34) | function filterColors(inputValue: string) {
function promiseOptions (line 40) | function promiseOptions(inputValue: string) {
FILE: storybook/stories/BasicGrouped.stories.tsx
function BasicGrouped (line 19) | function BasicGrouped() {
function FormatGroupLabel (line 32) | function FormatGroupLabel({ label, options }: GroupedOption) {
FILE: storybook/stories/ControlledMenu.stories.tsx
function ControlledMenu (line 13) | function ControlledMenu() {
FILE: storybook/stories/Creatable.stories.tsx
type Option (line 14) | type Option = {
function createOption (line 19) | function createOption(label: string): Option {
function handleCreate (line 42) | function handleCreate(inputValue: string) {
FILE: storybook/stories/CreatableAdvanced.stories.tsx
function CreatableAdvanced (line 13) | function CreatableAdvanced() {
function slugify (line 46) | function slugify(text: string) {
FILE: storybook/stories/CreatableInputOnly.stories.tsx
function CreatableInputOnly (line 11) | function CreatableInputOnly() {
type Option (line 43) | interface Option {
FILE: storybook/stories/CreateFilter.stories.tsx
function CreateFilter (line 13) | function CreateFilter() {
FILE: storybook/stories/CustomAriaLive.stories.tsx
function CustomAriaLive (line 12) | function CustomAriaLive() {
FILE: storybook/stories/CustomClearIndicator.stories.tsx
function CustomClearIndicator (line 14) | function CustomClearIndicator() {
function ClearIndicator (line 45) | function ClearIndicator(props: ClearIndicatorProps<ColourOption, true>) {
FILE: storybook/stories/CustomControl.stories.tsx
function CustomControl (line 14) | function CustomControl() {
function ControlComponent (line 31) | function ControlComponent(props: ControlProps<ColourOption, false>) {
FILE: storybook/stories/CustomDropdownIndicator.stories.tsx
function CustomDropdownIndicator (line 15) | function CustomDropdownIndicator() {
function DropdownIndicator (line 31) | function DropdownIndicator(props: DropdownIndicatorProps<ColourOption, t...
FILE: storybook/stories/CustomFilterOptions.stories.tsx
function CustomFilterOptions (line 14) | function CustomFilterOptions() {
FILE: storybook/stories/CustomFormatOptionLabel.stories.tsx
function CustomFormatOptionLabel (line 14) | function CustomFormatOptionLabel() {
function formatOptionLabel (line 30) | function formatOptionLabel(option: typeof colourOptions[number]) {
FILE: storybook/stories/CustomGetOptionLabel.stories.tsx
function CustomGetOptionLabel (line 14) | function CustomGetOptionLabel() {
FILE: storybook/stories/CustomGetOptionValue.stories.tsx
function CustomGetOptionValue (line 14) | function CustomGetOptionValue() {
FILE: storybook/stories/CustomGroup.stories.tsx
function CustomGroup (line 19) | function CustomGroup() {
function Group (line 36) | function Group(props: GroupProps<ColourOption | FlavourOption, false>) {
FILE: storybook/stories/CustomGroupHeading.stories.tsx
function CustomGroupHeading (line 24) | function CustomGroupHeading() {
function GroupHeading (line 55) | function GroupHeading(props: GroupHeadingProps<ColourOption | FlavourOpt...
FILE: storybook/stories/CustomIndicatorSeparator.stories.tsx
function CustomIndicatorSeparator (line 14) | function CustomIndicatorSeparator() {
function IndicatorSeparator (line 35) | function IndicatorSeparator({
FILE: storybook/stories/CustomIndicatorsContainer.stories.tsx
function CustomIndicatorsContainer (line 14) | function CustomIndicatorsContainer() {
function IndicatorsContainer (line 36) | function IndicatorsContainer(
FILE: storybook/stories/CustomInput.stories.tsx
function CustomInput (line 15) | function CustomInput() {
function Input (line 33) | function Input(props: InputProps<ColourOption, true>) {
FILE: storybook/stories/CustomIsOptionDisabled.stories.tsx
function CustomIsOptionDisabled (line 14) | function CustomIsOptionDisabled() {
FILE: storybook/stories/CustomLoadingIndicator.stories.tsx
function CustomLoadingIndicator (line 16) | function CustomLoadingIndicator() {
function LoadingIndicator (line 37) | function LoadingIndicator(props: LoadingIndicatorProps<ColourOption>) {
function filterColors (line 49) | function filterColors(inputValue: string) {
function promiseOptions (line 55) | function promiseOptions(inputValue: string) {
FILE: storybook/stories/CustomLoadingMessage.stories.tsx
function CustomLoadingMessage (line 16) | function CustomLoadingMessage() {
function LoadingMessage (line 47) | function LoadingMessage(props: NoticeProps<ColourOption, false>) {
function filterColors (line 64) | function filterColors(inputValue: string) {
function promiseOptions (line 70) | function promiseOptions(inputValue: string) {
FILE: storybook/stories/CustomMenu.stories.tsx
function CustomMenu (line 20) | function CustomMenu() {
function Menu (line 37) | function Menu(
function getLength (line 63) | function getLength(
FILE: storybook/stories/CustomMenuList.stories.tsx
function CustomMenuList (line 20) | function CustomMenuList() {
function MenuList (line 37) | function MenuList(
FILE: storybook/stories/CustomMultiValueContainer.stories.tsx
function CustomMultiValueContainer (line 19) | function CustomMultiValueContainer() {
function MultiValueContainer (line 53) | function MultiValueContainer(props: MultiValueGenericProps<ColourOption>) {
FILE: storybook/stories/CustomMultiValueLabel.stories.tsx
function CustomMultiValueLabel (line 19) | function CustomMultiValueLabel() {
function MultiValueLabel (line 53) | function MultiValueLabel(props: MultiValueGenericProps<ColourOption>) {
FILE: storybook/stories/CustomMultiValueRemove.stories.tsx
function CustomMultiValueRemove (line 19) | function CustomMultiValueRemove() {
function MultiValueRemove (line 53) | function MultiValueRemove(props: MultiValueRemoveProps<ColourOption>) {
FILE: storybook/stories/CustomNoOptionsMessage.stories.tsx
function CustomNoOptionsMessage (line 15) | function CustomNoOptionsMessage() {
function NoOptionsMessage (line 47) | function NoOptionsMessage(props: NoticeProps) {
FILE: storybook/stories/CustomOption.stories.tsx
function CustomOption (line 15) | function CustomOption() {
function Option (line 44) | function Option(props: OptionProps<ColourOption>) {
FILE: storybook/stories/CustomPlaceholder.stories.tsx
function CustomPlaceholder (line 18) | function CustomPlaceholder() {
function Placeholder (line 49) | function Placeholder(props: PlaceholderProps<ColourOption>) {
FILE: storybook/stories/CustomSelectContainer.stories.tsx
function CustomSelectContainer (line 14) | function CustomSelectContainer() {
function SelectContainer (line 43) | function SelectContainer({ children, ...props }: ContainerProps<ColourOp...
FILE: storybook/stories/CustomSelectProps.stories.tsx
function CustomSelectProps (line 18) | function CustomSelectProps(props: Props<ColourOption>) {
function Control (line 58) | function Control({ children, ...props }: ControlProps<ColourOption>) {
FILE: storybook/stories/CustomSingleValue.stories.tsx
function CustomSingleValue (line 17) | function CustomSingleValue() {
function SingleValue (line 52) | function SingleValue({ children, ...props }: SingleValueProps<ColourOpti...
FILE: storybook/stories/CustomValueContainer.stories.tsx
function CustomValueContainer (line 18) | function CustomValueContainer() {
function ValueContainer (line 52) | function ValueContainer({
FILE: storybook/stories/ExperimentalDatePicker.stories.tsx
function ExperimentalDatePicker (line 21) | function ExperimentalDatePicker() {
function Group (line 62) | function Group(props: GroupProps<DateOption, false>) {
function Option (line 96) | function Option(props: OptionProps<DateOption, false>) {
function createOptionForDate (line 122) | function createOptionForDate(d: Moment | Date) {
function createCalendarOptions (line 144) | function createCalendarOptions(date = new Date()) {
function suggest (line 189) | function suggest(str: string) {
function getOptionStyles (line 219) | function getOptionStyles(defaultStyles: CSSObject): CSSObject {
type DateOption (line 234) | interface DateOption {
type CalendarGroup (line 241) | interface CalendarGroup {
FILE: storybook/stories/FixedOptions.stories.tsx
function FixedOptions (line 14) | function FixedOptions() {
function orderOptions (line 75) | function orderOptions(values: readonly ColourOption[]) {
FILE: storybook/stories/MenuBuffer.stories.tsx
function MenuBuffer (line 14) | function MenuBuffer() {
FILE: storybook/stories/MenuPortal.stories.tsx
function MenuPortal (line 20) | function MenuPortal() {
FILE: storybook/stories/MultiSelectSort.stories.tsx
function MultiSelectSort (line 25) | function MultiSelectSort() {
function arrayMove (line 72) | function arrayMove<T>(array: readonly T[], from: number, to: number) {
function onMouseDown (line 92) | function onMouseDown(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
FILE: storybook/stories/OnSelectKeepsInput.stories.tsx
function OnSelectKeepsInput (line 14) | function OnSelectKeepsInput() {
FILE: storybook/stories/Popout.stories.tsx
function Popout (line 15) | function Popout() {
function Menu (line 71) | function Menu(props: JSX.IntrinsicElements['div']) {
function Blanket (line 88) | function Blanket(props: JSX.IntrinsicElements['div']) {
function Dropdown (line 104) | function Dropdown({
function DropdownIndicator (line 124) | function DropdownIndicator() {
FILE: storybook/stories/StyleCompositionExample.stories.tsx
function StyleCompositionExample (line 15) | function StyleCompositionExample() {
function Option (line 46) | function Option(props: OptionProps<ColourOption>) {
FILE: storybook/stories/StyledMulti.stories.tsx
function StyledMulti (line 68) | function StyledMulti() {
FILE: storybook/stories/StyledSingle.stories.tsx
function dot (line 15) | function dot(color = 'transparent') {
function StyledSingle (line 69) | function StyledSingle() {
FILE: storybook/stories/Tailwind.stories.tsx
function StatusCircle (line 20) | function StatusCircle({ online }: { online?: boolean }) {
function CheckIcon (line 31) | function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
function ValueContainer (line 49) | function ValueContainer<
function Option (line 67) | function Option<
FILE: storybook/stories/Theme.stories.tsx
function Theme (line 14) | function Theme() {
Condensed preview — 302 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (961K chars).
[
{
"path": ".browserslistrc",
"chars": 30,
"preview": "> 0.25%\nie 11\nnot op_mini all\n"
},
{
"path": ".changeset/README.md",
"chars": 2107,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 169,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@0.2.1/schema.json\",\n \"changelog\": \"./getChangelogEntry\",\n \"commit"
},
{
"path": ".changeset/getChangelogEntry.js",
"chars": 1072,
"preview": "require('dotenv').config();\nconst { getInfo } = require('@changesets/get-github-info');\n\nconst getReleaseLine = async (c"
},
{
"path": ".circleci/config.yml",
"chars": 2107,
"preview": "version: 2\n\ndocker_defaults: &docker_defaults\n docker:\n - image: cypress/browsers:latest\n environment"
},
{
"path": ".codesandbox/ci.json",
"chars": 102,
"preview": "{\n \"buildCommand\": \"build\",\n \"packages\": [\"packages/*\"],\n \"sandboxes\": [\"nfmxw\"],\n \"node\": \"20\"\n}\n"
},
{
"path": ".coveralls.yml",
"chars": 70,
"preview": "service-name: travis-ci\nrepo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR\n"
},
{
"path": ".editorconfig",
"chars": 323,
"preview": "# This file is for unifying the coding style for different editors and IDEs\n# editorconfig.org\nroot = true\n\n[*]\nend_of_l"
},
{
"path": ".eslintignore",
"chars": 96,
"preview": "coverage/*\ncypress/plugins/*\ncypress/support/*\n**/dist/*\nlib/*\nnode_modules/*\n**/node_modules/*\n"
},
{
"path": ".eslintrc.js",
"chars": 1380,
"preview": "module.exports = {\n extends: ['plugin:react-hooks/recommended', 'plugin:@typescript-eslint/base'],\n parser: '@typescri"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 1729,
"preview": "# Contributing\n\nThanks for your interest in React-Select. All forms of contribution are\nwelcome, from issue reports to P"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 1133,
"preview": "---\nname: Bug report\nabout: File a bug report\ntitle: '<title>'\nlabels: [issue/bug-unconfirmed]\nassignees: ''\n---\n\n**Than"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 595,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: Feature request\n url: https://github.com/JedWatson/react-select/"
},
{
"path": ".github/dependabot.yml",
"chars": 243,
"preview": "version: 2\nupdates:\n - package-ecosystem: 'npm'\n directory: '/'\n schedule:\n interval: 'weekly'\n ignore:\n "
},
{
"path": ".github/workflows/release.yml",
"chars": 899,
"preview": "name: Release\n\non:\n push:\n branches:\n - master\n\npermissions:\n contents: read\n\njobs:\n release:\n permissions"
},
{
"path": ".gitignore",
"chars": 396,
"preview": "# Build\nlib\ndist\ndocs/dist\n.env\n\n# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Coverage tools\nlib-cov\ncoverage\n"
},
{
"path": ".nvmrc",
"chars": 3,
"preview": "22\n"
},
{
"path": ".prettierignore",
"chars": 115,
"preview": "coverage/*\ncypress/plugins/*\ncypress/support/*\n**/dist/*\nlib/*\nnode_modules/*\n**/node_modules/*\n**/magical-types/*\n"
},
{
"path": ".prettierrc.js",
"chars": 181,
"preview": "module.exports = {\n singleQuote: true,\n trailingComma: 'es5',\n overrides: [\n {\n files: '.changeset/pre.json',"
},
{
"path": "CONTRIBUTING.md",
"chars": 1303,
"preview": "# Contributing\n\nThanks for your interest in React-Select. All forms of contribution are\nwelcome, from issue reports to P"
},
{
"path": "LICENSE",
"chars": 1077,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2022 Jed Watson\n\nPermission is hereby granted, free of charge, to any person obtain"
},
{
"path": "README.md",
"chars": 6066,
"preview": "[](https://www.npmjs.com/package/react-select)\n[![CircleCI](https:/"
},
{
"path": "babel.config.js",
"chars": 341,
"preview": "module.exports = {\n plugins: [\n '@emotion/babel-plugin',\n ['@babel/plugin-proposal-class-properties', { loose: tr"
},
{
"path": "cypress/fixtures/selectors.json",
"chars": 1458,
"preview": "{\n \"singleBasic\": \"#cypress-single\",\n \"singleBasicSelect\": \"#basic-select-single\",\n \"singleClearable\": \"#cypress-sing"
},
{
"path": "cypress/integration/multi-select.spec.ts",
"chars": 3085,
"preview": "import selector from '../fixtures/selectors.json';\nimport cypressJson from '../../cypress.json';\n\nconst setup = [\n { wi"
},
{
"path": "cypress/integration/single-select.spec.ts",
"chars": 10399,
"preview": "import selector from '../fixtures/selectors.json';\nimport cypressJson from '../../cypress.json';\n\nconst setup = [\n {\n "
},
{
"path": "cypress/tsconfig.json",
"chars": 203,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"module\": \"commonjs\",\n \"noEmit\": true,\n \"strict\": true,\n \"typ"
},
{
"path": "cypress.json",
"chars": 73,
"preview": "{\n \"baseUrl\": \"http://localhost:8000/cypress-tests\",\n \"video\": false\n}\n"
},
{
"path": "docs/App/Footer.tsx",
"chars": 1594,
"preview": "/** @jsx jsx */\nimport { jsx } from '@emotion/react';\n\n// const smallDevice = '@media (max-width: 769px)';\nconst largeDe"
},
{
"path": "docs/App/GitHubButton.tsx",
"chars": 2898,
"preview": "/** @jsx jsx */\nimport { jsx } from '@emotion/react';\n\ninterface Props {\n readonly count: number;\n readonly repo: stri"
},
{
"path": "docs/App/Header.tsx",
"chars": 6456,
"preview": "/** @jsx jsx */\nimport fetch from 'unfetch';\nimport { Component, Ref, RefCallback } from 'react';\nimport { jsx } from '@"
},
{
"path": "docs/App/PageNav.tsx",
"chars": 4975,
"preview": "/** @jsx jsx */\nimport { Component, FunctionComponent, MouseEvent, RefCallback } from 'react';\nimport { jsx } from '@emo"
},
{
"path": "docs/App/ScrollSpy.tsx",
"chars": 2070,
"preview": "import React, { Component, ReactElement, RefCallback } from 'react';\nimport rafSchedule from 'raf-schd';\nimport NodeReso"
},
{
"path": "docs/App/Section.tsx",
"chars": 797,
"preview": "import React, { FunctionComponent } from 'react';\nimport { Redirect, Route, RouteComponentProps, Switch } from 'react-ro"
},
{
"path": "docs/App/Sticky.tsx",
"chars": 3299,
"preview": "import React, { Component, CSSProperties, RefCallback } from 'react';\nimport rafSchedule from 'raf-schd';\n\ninterface Pro"
},
{
"path": "docs/App/TwitterButton.tsx",
"chars": 2074,
"preview": "/** @jsx jsx */\nimport { jsx } from '@emotion/react';\n\nconst TwitterButton = () => (\n <div css={{ alignItems: 'center',"
},
{
"path": "docs/App/components.tsx",
"chars": 3003,
"preview": "/** @jsx jsx */\nimport { Component } from 'react';\nimport {\n Link,\n LinkProps,\n RouteComponentProps,\n withRouter,\n} "
},
{
"path": "docs/App/index.tsx",
"chars": 2839,
"preview": "import React, { Component, Fragment } from 'react';\nimport { BrowserRouter, Route, Switch } from 'react-router-dom';\nimp"
},
{
"path": "docs/App/routes.ts",
"chars": 781,
"preview": "import { ComponentType } from 'react';\nimport Home from '../pages/home';\nimport Props from '../pages/props';\nimport Styl"
},
{
"path": "docs/CHANGELOG.md",
"chars": 4872,
"preview": "# @react-select/docs\n\n## 3.1.3\n\n### Patch Changes\n\n- [`0773095f`](https://github.com/JedWatson/react-select/commit/07730"
},
{
"path": "docs/ExampleWrapper.tsx",
"chars": 6685,
"preview": "/** @jsx jsx */\nimport { jsx } from '@emotion/react'; // eslint-disable-line no-unused-vars\nimport { CSSObject } from '@"
},
{
"path": "docs/NoMatch.tsx",
"chars": 286,
"preview": "import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { H1 } from './styled-components';\n\nexport de"
},
{
"path": "docs/PropTypes/Async.ts",
"chars": 66,
"preview": "export { AsyncAdditionalProps } from 'react-select/src/useAsync';\n"
},
{
"path": "docs/PropTypes/Creatable.ts",
"chars": 74,
"preview": "export { CreatableAdditionalProps } from 'react-select/src/useCreatable';\n"
},
{
"path": "docs/PropTypes/Select.ts",
"chars": 272,
"preview": "import { Component } from 'react';\n\nimport { Props, defaultProps } from 'react-select/src/Select';\nimport { GroupBase } "
},
{
"path": "docs/PropTypes/components/ClearIndicator.ts",
"chars": 275,
"preview": "import { Component } from 'react';\nimport { GroupBase, ClearIndicatorProps } from 'react-select';\n\nexport default class "
},
{
"path": "docs/PropTypes/components/Control.ts",
"chars": 254,
"preview": "import { Component } from 'react';\nimport { ControlProps, GroupBase } from 'react-select';\n\nexport default class Control"
},
{
"path": "docs/PropTypes/components/DropdownIndicator.ts",
"chars": 284,
"preview": "import { Component } from 'react';\nimport { GroupBase, DropdownIndicatorProps } from 'react-select';\n\nexport default cla"
},
{
"path": "docs/PropTypes/components/Group.ts",
"chars": 248,
"preview": "import { Component } from 'react';\nimport { GroupBase, GroupProps } from 'react-select';\n\nexport default class Group<\n "
},
{
"path": "docs/PropTypes/components/IndicatorsContainer.ts",
"chars": 290,
"preview": "import { Component } from 'react';\nimport { GroupBase, IndicatorsContainerProps } from 'react-select';\n\nexport default c"
},
{
"path": "docs/PropTypes/components/IndicatorsSeparator.ts",
"chars": 284,
"preview": "import { Component } from 'react';\nimport { DropdownIndicatorProps, GroupBase } from 'react-select';\n\nexport default cla"
},
{
"path": "docs/PropTypes/components/Input.ts",
"chars": 248,
"preview": "import { Component } from 'react';\nimport { GroupBase, InputProps } from 'react-select';\n\nexport default class Input<\n "
},
{
"path": "docs/PropTypes/components/LoadingIndicator.ts",
"chars": 281,
"preview": "import { Component } from 'react';\nimport { GroupBase, LoadingIndicatorProps } from 'react-select';\n\nexport default clas"
},
{
"path": "docs/PropTypes/components/LoadingMessage.ts",
"chars": 259,
"preview": "import { Component } from 'react';\nimport { GroupBase, NoticeProps } from 'react-select';\n\nexport default class LoadingM"
},
{
"path": "docs/PropTypes/components/Menu.ts",
"chars": 245,
"preview": "import { Component } from 'react';\nimport { GroupBase, MenuProps } from 'react-select';\n\nexport default class Menu<\n Op"
},
{
"path": "docs/PropTypes/components/MenuList.ts",
"chars": 257,
"preview": "import { Component } from 'react';\nimport { GroupBase, MenuListProps } from 'react-select';\n\nexport default class MenuLi"
},
{
"path": "docs/PropTypes/components/MultiValue.ts",
"chars": 263,
"preview": "import { Component } from 'react';\nimport { GroupBase, MultiValueProps } from 'react-select';\n\nexport default class Mult"
},
{
"path": "docs/PropTypes/components/MultiValueContainer.ts",
"chars": 286,
"preview": "import { Component } from 'react';\nimport { GroupBase, MultiValueGenericProps } from 'react-select';\n\nexport default cla"
},
{
"path": "docs/PropTypes/components/MultiValueLabel.ts",
"chars": 282,
"preview": "import { Component } from 'react';\nimport { GroupBase, MultiValueGenericProps } from 'react-select';\n\nexport default cla"
},
{
"path": "docs/PropTypes/components/MultiValueRemove.ts",
"chars": 283,
"preview": "import { Component } from 'react';\nimport { GroupBase, MultiValueGenericProps } from 'react-select';\n\nexport default cla"
},
{
"path": "docs/PropTypes/components/NoOptionsMessage.ts",
"chars": 261,
"preview": "import { Component } from 'react';\nimport { GroupBase, NoticeProps } from 'react-select';\n\nexport default class NoOption"
},
{
"path": "docs/PropTypes/components/Option.ts",
"chars": 251,
"preview": "import { Component } from 'react';\nimport { GroupBase, OptionProps } from 'react-select';\n\nexport default class Option<\n"
},
{
"path": "docs/PropTypes/components/Placeholder.ts",
"chars": 266,
"preview": "import { Component } from 'react';\nimport { GroupBase, PlaceholderProps } from 'react-select';\n\nexport default class Pla"
},
{
"path": "docs/PropTypes/components/SelectContainer.ts",
"chars": 266,
"preview": "import { Component } from 'react';\nimport { ContainerProps, GroupBase } from 'react-select';\n\nexport default class Selec"
},
{
"path": "docs/PropTypes/components/SingleValue.ts",
"chars": 266,
"preview": "import { Component } from 'react';\nimport { GroupBase, SingleValueProps } from 'react-select';\n\nexport default class Sin"
},
{
"path": "docs/PropTypes/components/ValueContainer.ts",
"chars": 275,
"preview": "import { Component } from 'react';\nimport { GroupBase, ValueContainerProps } from 'react-select';\n\nexport default class "
},
{
"path": "docs/PropTypes/stateManager.ts",
"chars": 80,
"preview": "export { StateManagerAdditionalProps } from 'react-select/src/useStateManager';\n"
},
{
"path": "docs/Svg.tsx",
"chars": 505,
"preview": "/** @jsx jsx */\nimport { jsx } from '@emotion/react';\n\nexport type SvgProps = { readonly size: number } & JSX.IntrinsicE"
},
{
"path": "docs/Table.tsx",
"chars": 745,
"preview": "/** @jsx jsx */\nimport { FunctionComponent } from 'react';\nimport { jsx } from '@emotion/react';\n\nexport const Table: Fu"
},
{
"path": "docs/Tests.tsx",
"chars": 6935,
"preview": "import React, {\n ChangeEventHandler,\n ComponentProps,\n ComponentType,\n useState,\n} from 'react';\n\nimport Select, { M"
},
{
"path": "docs/_redirects",
"chars": 24,
"preview": "/* /index.html 200\n"
},
{
"path": "docs/data.ts",
"chars": 4809,
"preview": "export interface ColourOption {\n readonly value: string;\n readonly label: string;\n readonly color: string;\n readonly"
},
{
"path": "docs/examples/AccessingInternals.tsx",
"chars": 2832,
"preview": "import React, { Fragment, useRef } from 'react';\n\nimport Select, { SelectInstance } from 'react-select';\nimport AsyncSel"
},
{
"path": "docs/examples/AnimatedMulti.tsx",
"chars": 450,
"preview": "import React from 'react';\n\nimport Select from 'react-select';\nimport makeAnimated from 'react-select/animated';\nimport "
},
{
"path": "docs/examples/AsyncCallbacks.tsx",
"chars": 556,
"preview": "import React from 'react';\n\nimport AsyncSelect from 'react-select/async';\nimport { ColourOption, colourOptions } from '."
},
{
"path": "docs/examples/AsyncCreatable.tsx",
"chars": 604,
"preview": "import React from 'react';\n\nimport AsyncCreatableSelect from 'react-select/async-creatable';\nimport { ColourOption, colo"
},
{
"path": "docs/examples/AsyncMulti.tsx",
"chars": 588,
"preview": "import React from 'react';\n\nimport AsyncSelect from 'react-select/async';\nimport { ColourOption, colourOptions } from '."
},
{
"path": "docs/examples/AsyncPromises.tsx",
"chars": 562,
"preview": "import React from 'react';\n\nimport AsyncSelect from 'react-select/async';\nimport { ColourOption, colourOptions } from '."
},
{
"path": "docs/examples/BasicGrouped.tsx",
"chars": 965,
"preview": "import React, { CSSProperties } from 'react';\n\nimport Select from 'react-select';\nimport {\n ColourOption,\n colourOptio"
},
{
"path": "docs/examples/BasicMulti.tsx",
"chars": 324,
"preview": "import React from 'react';\n\nimport Select from 'react-select';\nimport { colourOptions } from '../data';\n\nexport default "
},
{
"path": "docs/examples/BasicSingle.tsx",
"chars": 1938,
"preview": "import React, { useState } from 'react';\n\nimport Select from 'react-select';\nimport { colourOptions } from '../data';\n\nc"
},
{
"path": "docs/examples/ControlledMenu.tsx",
"chars": 1132,
"preview": "import React, { useRef, useState } from 'react';\n\nimport Select, { SelectInstance } from 'react-select';\nimport { colour"
},
{
"path": "docs/examples/CreatableAdvanced.tsx",
"chars": 1089,
"preview": "import React, { useState } from 'react';\n\nimport CreatableSelect from 'react-select/creatable';\n\ninterface Option {\n re"
},
{
"path": "docs/examples/CreatableInputOnly.tsx",
"chars": 1124,
"preview": "import React, { KeyboardEventHandler } from 'react';\n\nimport CreatableSelect from 'react-select/creatable';\n\nconst compo"
},
{
"path": "docs/examples/CreatableMulti.tsx",
"chars": 198,
"preview": "import React from 'react';\n\nimport CreatableSelect from 'react-select/creatable';\nimport { colourOptions } from '../data"
},
{
"path": "docs/examples/CreatableSingle.tsx",
"chars": 202,
"preview": "import React from 'react';\n\nimport CreatableSelect from 'react-select/creatable';\nimport { colourOptions } from '../data"
},
{
"path": "docs/examples/CreateFilter.tsx",
"chars": 1835,
"preview": "import React, { useState } from 'react';\nimport Select, { createFilter } from 'react-select';\nimport { colourOptions } f"
},
{
"path": "docs/examples/CustomAriaLive.tsx",
"chars": 1504,
"preview": "import React, { CSSProperties, useState } from 'react';\n\nimport Select, { AriaOnFocus } from 'react-select';\nimport { Co"
},
{
"path": "docs/examples/CustomClearIndicator.tsx",
"chars": 1211,
"preview": "import React, { CSSProperties, FunctionComponent } from 'react';\n\nimport Select, { ClearIndicatorProps } from 'react-sel"
},
{
"path": "docs/examples/CustomControl.tsx",
"chars": 661,
"preview": "import React from 'react';\n\nimport Select, { components, ControlProps } from 'react-select';\nimport { ColourOption, colo"
},
{
"path": "docs/examples/CustomDropdownIndicator.tsx",
"chars": 677,
"preview": "import React from 'react';\nimport EmojiIcon from '@atlaskit/icon/glyph/emoji';\nimport Select, { components, DropdownIndi"
},
{
"path": "docs/examples/CustomFilterOptions.tsx",
"chars": 644,
"preview": "import React from 'react';\nimport Select from 'react-select';\nimport { colourOptions } from '../data';\n\nconst filterOpti"
},
{
"path": "docs/examples/CustomGetOptionLabel.tsx",
"chars": 479,
"preview": "import React from 'react';\nimport Select from 'react-select';\nimport { flavourOptions } from '../data';\n\nexport default "
},
{
"path": "docs/examples/CustomGetOptionValue.tsx",
"chars": 476,
"preview": "import React, { Fragment } from 'react';\nimport Select from 'react-select';\nimport { dogOptions } from '../data';\n\nexpor"
},
{
"path": "docs/examples/CustomGroup.tsx",
"chars": 627,
"preview": "import React from 'react';\n\nimport Select, { components, GroupProps } from 'react-select';\nimport {\n ColourOption,\n co"
},
{
"path": "docs/examples/CustomGroupHeading.tsx",
"chars": 1075,
"preview": "import React from 'react';\n\nimport Select, { components, GroupHeadingProps } from 'react-select';\nimport {\n ColourOptio"
},
{
"path": "docs/examples/CustomIndicatorSeparator.tsx",
"chars": 674,
"preview": "import React from 'react';\nimport Select, { IndicatorSeparatorProps } from 'react-select';\nimport { ColourOption, colour"
},
{
"path": "docs/examples/CustomIndicatorsContainer.tsx",
"chars": 599,
"preview": "import React from 'react';\nimport Select, { components, IndicatorsContainerProps } from 'react-select';\nimport { ColourO"
},
{
"path": "docs/examples/CustomInput.tsx",
"chars": 710,
"preview": "import React from 'react';\nimport Tooltip from '@atlaskit/tooltip';\nimport Select, { components, InputProps } from 'reac"
},
{
"path": "docs/examples/CustomIsOptionDisabled.tsx",
"chars": 466,
"preview": "import React from 'react';\nimport Select from 'react-select';\nimport { flavourOptions } from '../data';\n\nexport default "
},
{
"path": "docs/examples/CustomLoadingIndicator.tsx",
"chars": 1010,
"preview": "import React from 'react';\nimport Spinner from '@atlaskit/spinner';\nimport Tooltip from '@atlaskit/tooltip';\nimport Asyn"
},
{
"path": "docs/examples/CustomLoadingMessage.tsx",
"chars": 1268,
"preview": "import React, { CSSProperties } from 'react';\nimport Tooltip from '@atlaskit/tooltip';\nimport AsyncSelect from 'react-se"
},
{
"path": "docs/examples/CustomMenu.tsx",
"chars": 1137,
"preview": "import React, { Fragment } from 'react';\n\nimport Select, { components, MenuProps } from 'react-select';\nimport {\n Colou"
},
{
"path": "docs/examples/CustomMenuList.tsx",
"chars": 770,
"preview": "import React from 'react';\n\nimport Select, { components, MenuListProps } from 'react-select';\nimport {\n ColourOption,\n "
},
{
"path": "docs/examples/CustomMultiValueContainer.tsx",
"chars": 772,
"preview": "import React from 'react';\nimport Tooltip from '@atlaskit/tooltip';\nimport Select, { components, MultiValueGenericProps "
},
{
"path": "docs/examples/CustomMultiValueLabel.tsx",
"chars": 788,
"preview": "import React from 'react';\nimport Tooltip from '@atlaskit/tooltip';\nimport Select, { components, MultiValueGenericProps "
},
{
"path": "docs/examples/CustomMultiValueRemove.tsx",
"chars": 968,
"preview": "import React from 'react';\nimport EmojiIcon from '@atlaskit/icon/glyph/emoji';\nimport Tooltip from '@atlaskit/tooltip';\n"
},
{
"path": "docs/examples/CustomNoOptionsMessage.tsx",
"chars": 754,
"preview": "import React from 'react';\nimport Tooltip from '@atlaskit/tooltip';\nimport Select, { components, NoticeProps } from 'rea"
},
{
"path": "docs/examples/CustomOption.tsx",
"chars": 703,
"preview": "import React from 'react';\nimport Tooltip from '@atlaskit/tooltip';\nimport Select, { components, OptionProps } from 'rea"
},
{
"path": "docs/examples/CustomPlaceholder.tsx",
"chars": 619,
"preview": "import React from 'react';\nimport Select, { components, PlaceholderProps } from 'react-select';\nimport { ColourOption, c"
},
{
"path": "docs/examples/CustomSelectContainer.tsx",
"chars": 766,
"preview": "import React from 'react';\nimport Select, { components, ContainerProps } from 'react-select';\nimport Tooltip from '@atla"
},
{
"path": "docs/examples/CustomSelectProps.tsx",
"chars": 1358,
"preview": "import React, { MouseEventHandler, useState } from 'react';\nimport Select, {\n components,\n ControlProps,\n Props,\n St"
},
{
"path": "docs/examples/CustomSingleValue.tsx",
"chars": 721,
"preview": "import React from 'react';\nimport Select, { components, SingleValueProps } from 'react-select';\nimport { ColourOption, c"
},
{
"path": "docs/examples/CustomValueContainer.tsx",
"chars": 755,
"preview": "import React from 'react';\nimport Select, { components, ValueContainerProps } from 'react-select';\nimport { ColourOption"
},
{
"path": "docs/examples/DefaultOptions.tsx",
"chars": 592,
"preview": "import React from 'react';\n\nimport AsyncSelect from 'react-select/async';\nimport { ColourOption, colourOptions } from '."
},
{
"path": "docs/examples/Experimental.tsx",
"chars": 5294,
"preview": "/** @jsx jsx */\nimport { useState } from 'react';\nimport { jsx } from '@emotion/react';\nimport { CSSObject } from '@emot"
},
{
"path": "docs/examples/FixedOptions.tsx",
"chars": 1670,
"preview": "import React, { useState } from 'react';\n\nimport Select, { ActionMeta, OnChangeValue, StylesConfig } from 'react-select'"
},
{
"path": "docs/examples/MenuBuffer.tsx",
"chars": 275,
"preview": "import React from 'react';\nimport Select from 'react-select';\n\nimport { colourOptions } from '../data';\n\nexport default "
},
{
"path": "docs/examples/MenuPortal.tsx",
"chars": 2261,
"preview": "import React, { useState } from 'react';\nimport Modal from '@atlaskit/modal-dialog';\nimport Button from '@atlaskit/butto"
},
{
"path": "docs/examples/MultiSelectSort.tsx",
"chars": 2740,
"preview": "import React, { MouseEventHandler } from 'react';\n\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValue"
},
{
"path": "docs/examples/OnSelectResetsInput.tsx",
"chars": 775,
"preview": "import React from 'react';\nimport Select, { InputActionMeta } from 'react-select';\nimport { colourOptions } from '../dat"
},
{
"path": "docs/examples/Popout.tsx",
"chars": 3397,
"preview": "/** @jsx jsx */\nimport { ReactNode, useState } from 'react';\nimport { jsx } from '@emotion/react';\nimport Button from '@"
},
{
"path": "docs/examples/StyleCompositionExample.tsx",
"chars": 1058,
"preview": "/** @jsx jsx */\nimport { jsx } from '@emotion/react';\nimport Select, { OptionProps } from 'react-select';\nimport { Colou"
},
{
"path": "docs/examples/StyledMulti.tsx",
"chars": 1658,
"preview": "import React from 'react';\nimport chroma from 'chroma-js';\n\nimport { ColourOption, colourOptions } from '../data';\nimpor"
},
{
"path": "docs/examples/StyledSingle.tsx",
"chars": 1604,
"preview": "import React from 'react';\nimport chroma from 'chroma-js';\n\nimport { ColourOption, colourOptions } from '../data';\nimpor"
},
{
"path": "docs/examples/Theme.tsx",
"chars": 391,
"preview": "import React from 'react';\n\nimport { flavourOptions } from '../data';\nimport Select from 'react-select';\n\nexport default"
},
{
"path": "docs/examples/index.tsx",
"chars": 3544,
"preview": "export { default as AccessingInternals } from './AccessingInternals';\nexport { default as ControlledMenu } from './Contr"
},
{
"path": "docs/generate-magical-types/generate/package.json",
"chars": 145,
"preview": "{\n \"main\": \"dist/react-select-generate-magical-types-generate.cjs.js\",\n \"module\": \"dist/react-select-generate-magical-"
},
{
"path": "docs/generate-magical-types/package.json",
"chars": 1105,
"preview": "{\n \"name\": \"@react-select/generate-magical-types\",\n \"main\": \"dist/generate-magical-types.cjs.js\",\n \"exports\": {\n \""
},
{
"path": "docs/generate-magical-types/serialize/package.json",
"chars": 147,
"preview": "{\n \"main\": \"dist/react-select-generate-magical-types-serialize.cjs.js\",\n \"module\": \"dist/react-select-generate-magical"
},
{
"path": "docs/generate-magical-types/src/generate.ts",
"chars": 3325,
"preview": "import path from 'path';\n\n// @ts-ignore\nimport fs from 'fs-extra';\nimport * as flatted from 'flatted';\nimport { Project "
},
{
"path": "docs/generate-magical-types/src/serialize.ts",
"chars": 2281,
"preview": "import path from 'path';\n\n// @ts-ignore\nimport fs from 'fs-extra';\nimport * as flatted from 'flatted';\nimport { MagicalN"
},
{
"path": "docs/generate-magical-types/src/types.ts",
"chars": 438,
"preview": "import { MagicalNode, MagicalNodeIndex } from '@magical-types/types';\n\nexport type MagicalNodeMetadata = Record<\n strin"
},
{
"path": "docs/index.css",
"chars": 1271,
"preview": "@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,500,700');\n\nbody {\n -moz-font-feature-setti"
},
{
"path": "docs/index.html",
"chars": 1681,
"preview": "<!DOCTYPE html>\n<head>\n <meta charset=\"utf-8\" />\n <title>React-Select</title>\n <meta\n name=\"viewport\"\n content="
},
{
"path": "docs/index.tsx",
"chars": 172,
"preview": "import '@babel/polyfill';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDO"
},
{
"path": "docs/isArray.ts",
"chars": 196,
"preview": "/**\n * Alternative to Array.isArray that correctly narrows the type for readonly arrays.\n */\nexport default function isA"
},
{
"path": "docs/markdown/renderer.tsx",
"chars": 5540,
"preview": "/** @jsx emotionJSX */\nimport md, {\n CodeProps,\n CommonProps,\n HeadingProps,\n LinkProps,\n} from 'react-markings';\nim"
},
{
"path": "docs/markdown/store.ts",
"chars": 812,
"preview": "export interface Data {\n key: string;\n label: string;\n level: number;\n path: string;\n}\n\nclass HeadingStore {\n store"
},
{
"path": "docs/package.json",
"chars": 2226,
"preview": "{\n \"name\": \"@react-select/docs\",\n \"private\": true,\n \"version\": \"3.1.3\",\n \"main\": \"dist/docs.cjs.js\",\n \"author\": \"Je"
},
{
"path": "docs/pages/advanced/index.tsx",
"chars": 9905,
"preview": "import React, { Fragment } from 'react';\nimport Helmet from 'react-helmet';\nimport md from '../../markdown/renderer';\nim"
},
{
"path": "docs/pages/async/index.tsx",
"chars": 2658,
"preview": "import React, { Fragment } from 'react';\nimport Helmet from 'react-helmet';\nimport ExampleWrapper from '../../ExampleWra"
},
{
"path": "docs/pages/components/index.tsx",
"chars": 17573,
"preview": "import React, { Fragment } from 'react';\nimport { Helmet } from 'react-helmet';\n\nimport md from '../../markdown/renderer"
},
{
"path": "docs/pages/creatable/index.tsx",
"chars": 2563,
"preview": "import React, { Fragment } from 'react';\nimport Helmet from 'react-helmet';\nimport md from '../../markdown/renderer';\nim"
},
{
"path": "docs/pages/home/index.tsx",
"chars": 4611,
"preview": "import React from 'react';\nimport ExampleWrapper from '../../ExampleWrapper';\nimport md from '../../markdown/renderer';\n"
},
{
"path": "docs/pages/props/index.tsx",
"chars": 6939,
"preview": "import React, { Fragment } from 'react';\n\nimport { Helmet } from 'react-helmet';\nimport type { MagicalNodeRecord } from "
},
{
"path": "docs/pages/styles/index.tsx",
"chars": 9318,
"preview": "/** @jsx jsx */\nimport React, { Fragment } from 'react';\nimport { jsx } from '@emotion/react';\nimport Helmet from 'react"
},
{
"path": "docs/pages/typescript/index.tsx",
"chars": 4465,
"preview": "import React from 'react';\nimport Helmet from 'react-helmet';\nimport md from '../../markdown/renderer';\n\nexport default "
},
{
"path": "docs/pages/upgrade/index.tsx",
"chars": 17660,
"preview": "import React from 'react';\nimport Helmet from 'react-helmet';\nimport md from '../../markdown/renderer';\nimport { Cell, H"
},
{
"path": "docs/pages/upgrade-to-v2/index.tsx",
"chars": 9216,
"preview": "import React, { Fragment } from 'react';\nimport Helmet from 'react-helmet';\nimport md from '../../markdown/renderer';\n\ni"
},
{
"path": "docs/pages/upgrade-to-v2/props.tsx",
"chars": 8898,
"preview": "import React, {\n Component,\n Fragment,\n FunctionComponent,\n ReactElement,\n} from 'react';\n\nimport Select, { componen"
},
{
"path": "docs/styled-components.tsx",
"chars": 2722,
"preview": "/** @jsx emotionJSX */\nimport { jsx as emotionJSX } from '@emotion/react';\n\nimport SyntaxHighlighter, {\n registerLangua"
},
{
"path": "docs/tsconfig.json",
"chars": 243,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"module\": \"commonjs\",\n \"jsx\": \"react\",\n \"noEmit\": true,\n \"str"
},
{
"path": "docs/utils.ts",
"chars": 1038,
"preview": "import { useEffect, useState } from 'react';\nimport { MagicalNode, MagicalNodeIndex } from '@magical-types/types';\nimpor"
},
{
"path": "docs/webpack.config.ts",
"chars": 1837,
"preview": "import * as path from 'path';\nimport * as webpack from 'webpack';\nimport CopyWebpackPlugin from 'copy-webpack-plugin';\ni"
},
{
"path": "netlify.toml",
"chars": 110,
"preview": "[build]\n command = \"yarn build:docs\"\n publish = \"docs/dist\"\n\n[build.environment]\n YARN_VERSION = \"1.22.22\"\n"
},
{
"path": "package.json",
"chars": 4341,
"preview": "{\n \"name\": \"@react-select/monorepo\",\n \"private\": true,\n \"version\": \"1.0.0\",\n \"description\": \"A Select control built "
},
{
"path": "packages/react-select/CHANGELOG.md",
"chars": 116088,
"preview": "# react-select\n\n## 5.10.2\n\n### Patch Changes\n\n- [`bf0c8615`](https://github.com/JedWatson/react-select/commit/bf0c8615f8"
},
{
"path": "packages/react-select/LICENSE",
"chars": 1077,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2022 Jed Watson\n\nPermission is hereby granted, free of charge, to any person obtain"
},
{
"path": "packages/react-select/README.md",
"chars": 6685,
"preview": "[](https://www.npmjs.com/package/react-select)\n[![CircleCI](https:/"
},
{
"path": "packages/react-select/animated/package.json",
"chars": 149,
"preview": "{\n \"main\": \"dist/react-select-animated.cjs.js\",\n \"module\": \"dist/react-select-animated.esm.js\",\n \"types\": \"dist/react"
},
{
"path": "packages/react-select/async/package.json",
"chars": 140,
"preview": "{\n \"main\": \"dist/react-select-async.cjs.js\",\n \"module\": \"dist/react-select-async.esm.js\",\n \"types\": \"dist/react-selec"
},
{
"path": "packages/react-select/async-creatable/package.json",
"chars": 170,
"preview": "{\n \"main\": \"dist/react-select-async-creatable.cjs.js\",\n \"module\": \"dist/react-select-async-creatable.esm.js\",\n \"types"
},
{
"path": "packages/react-select/base/package.json",
"chars": 137,
"preview": "{\n \"main\": \"dist/react-select-base.cjs.js\",\n \"module\": \"dist/react-select-base.esm.js\",\n \"types\": \"dist/react-select-"
},
{
"path": "packages/react-select/creatable/package.json",
"chars": 152,
"preview": "{\n \"main\": \"dist/react-select-creatable.cjs.js\",\n \"module\": \"dist/react-select-creatable.esm.js\",\n \"types\": \"dist/rea"
},
{
"path": "packages/react-select/package.json",
"chars": 2876,
"preview": "{\n \"name\": \"react-select\",\n \"version\": \"5.10.2\",\n \"description\": \"A Select control built with and for ReactJS\",\n \"ma"
},
{
"path": "packages/react-select/src/Async.tsx",
"chars": 1142,
"preview": "import * as React from 'react';\nimport {\n forwardRef,\n MutableRefObject,\n ReactElement,\n RefAttributes,\n} from 'reac"
},
{
"path": "packages/react-select/src/AsyncCreatable.tsx",
"chars": 1516,
"preview": "import * as React from 'react';\nimport {\n forwardRef,\n MutableRefObject,\n ReactElement,\n RefAttributes,\n} from 'reac"
},
{
"path": "packages/react-select/src/Creatable.tsx",
"chars": 1346,
"preview": "import * as React from 'react';\nimport {\n forwardRef,\n MutableRefObject,\n ReactElement,\n RefAttributes,\n} from 'reac"
},
{
"path": "packages/react-select/src/NonceProvider.tsx",
"chars": 541,
"preview": "import * as React from 'react';\nimport { useMemo } from 'react';\nimport { ReactNode } from 'react';\nimport { CacheProvid"
},
{
"path": "packages/react-select/src/Select.tsx",
"chars": 66979,
"preview": "import * as React from 'react';\nimport {\n AriaAttributes,\n Component,\n FocusEventHandler,\n FormEventHandler,\n JSX,\n"
},
{
"path": "packages/react-select/src/__tests__/Async.test.tsx",
"chars": 6400,
"preview": "import React from 'react';\nimport cases from 'jest-in-case';\nimport { render, fireEvent, waitFor, act } from '@testing-l"
},
{
"path": "packages/react-select/src/__tests__/AsyncCreatable.test.tsx",
"chars": 2217,
"preview": "import React from 'react';\n\nimport AsyncCreatable from '../AsyncCreatable';\nimport { Option, OPTIONS } from './constants"
},
{
"path": "packages/react-select/src/__tests__/Creatable.test.tsx",
"chars": 8958,
"preview": "import React from 'react';\nimport { render, fireEvent } from '@testing-library/react';\nimport cases from 'jest-in-case';"
},
{
"path": "packages/react-select/src/__tests__/Select.test.tsx",
"chars": 100224,
"preview": "import React, { KeyboardEvent } from 'react';\nimport { render, fireEvent, EventType } from '@testing-library/react';\nimp"
},
{
"path": "packages/react-select/src/__tests__/StateManaged.test.tsx",
"chars": 16903,
"preview": "import React from 'react';\nimport { render, fireEvent, EventType } from '@testing-library/react';\nimport userEvent from "
},
{
"path": "packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap",
"chars": 5196,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`defaults - snapshot 1`] = `\n.emotion-0 {\n position: relative;\n bo"
},
{
"path": "packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap",
"chars": 5196,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`defaults - snapshot 1`] = `\n.emotion-0 {\n position: relative;\n bo"
},
{
"path": "packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap",
"chars": 5196,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`defaults - snapshot 1`] = `\n.emotion-0 {\n position: relative;\n bo"
},
{
"path": "packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap",
"chars": 5196,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`snapshot - defaults 1`] = `\n.emotion-0 {\n position: relative;\n bo"
},
{
"path": "packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap",
"chars": 5196,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`defaults > snapshot 1`] = `\n.emotion-0 {\n position: relative;\n bo"
},
{
"path": "packages/react-select/src/__tests__/constants.ts",
"chars": 2791,
"preview": "export interface Option {\n readonly label: string;\n readonly value: string;\n}\n\nexport const OPTIONS: readonly Option[]"
},
{
"path": "packages/react-select/src/__tests__/tsconfig.json",
"chars": 243,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"module\": \"commonjs\",\n \"jsx\": \"react\",\n \"noEmit\": true,\n \"str"
},
{
"path": "packages/react-select/src/accessibility/helpers.ts",
"chars": 743,
"preview": "/// <reference types=\"user-agent-data-types\" />\n\nfunction testPlatform(re: RegExp) {\n return typeof window !== 'undefin"
},
{
"path": "packages/react-select/src/accessibility/index.ts",
"chars": 6484,
"preview": "import type { AriaAttributes } from 'react';\nimport {\n ActionMeta,\n GroupBase,\n InitialInputFocusedActionMeta,\n OnCh"
},
{
"path": "packages/react-select/src/animated/Input.tsx",
"chars": 998,
"preview": "import * as React from 'react';\nimport { ReactElement } from 'react';\nimport { TransitionProps } from 'react-transition-"
},
{
"path": "packages/react-select/src/animated/MultiValue.tsx",
"chars": 1133,
"preview": "import * as React from 'react';\nimport { ReactElement } from 'react';\nimport { TransitionProps } from 'react-transition-"
},
{
"path": "packages/react-select/src/animated/Placeholder.tsx",
"chars": 896,
"preview": "import * as React from 'react';\nimport { ReactElement } from 'react';\nimport { PlaceholderProps } from '../components/Pl"
},
{
"path": "packages/react-select/src/animated/SingleValue.tsx",
"chars": 830,
"preview": "import * as React from 'react';\nimport { ReactElement } from 'react';\nimport { SingleValueProps } from '../components/Si"
},
{
"path": "packages/react-select/src/animated/ValueContainer.tsx",
"chars": 2908,
"preview": "import * as React from 'react';\nimport { useEffect, useState, ReactElement, ReactNode } from 'react';\nimport { Transitio"
},
{
"path": "packages/react-select/src/animated/index.ts",
"chars": 1402,
"preview": "import memoize from 'memoize-one';\nimport {\n defaultComponents,\n SelectComponentsGeneric,\n} from '../components/index'"
},
{
"path": "packages/react-select/src/animated/transitions.tsx",
"chars": 3504,
"preview": "import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { ComponentType, CSSProperties, Reac"
},
{
"path": "packages/react-select/src/async/index.ts",
"chars": 62,
"preview": "export * from '../Async';\nexport { default } from '../Async';\n"
},
{
"path": "packages/react-select/src/async-creatable/index.ts",
"chars": 80,
"preview": "export * from '../AsyncCreatable';\nexport { default } from '../AsyncCreatable';\n"
},
{
"path": "packages/react-select/src/base/index.ts",
"chars": 64,
"preview": "export * from '../Select';\nexport { default } from '../Select';\n"
},
{
"path": "packages/react-select/src/builtins.ts",
"chars": 523,
"preview": "import { GroupBase } from './types';\n\nexport const formatGroupLabel = <Option, Group extends GroupBase<Option>>(\n group"
},
{
"path": "packages/react-select/src/components/Control.tsx",
"chars": 2510,
"preview": "/** @jsx jsx */\nimport { JSX, ReactNode, Ref } from 'react';\nimport { jsx } from '@emotion/react';\n\nimport {\n CommonPro"
},
{
"path": "packages/react-select/src/components/Group.tsx",
"chars": 3772,
"preview": "/** @jsx jsx */\nimport { ComponentType, JSX, ReactNode } from 'react';\nimport { jsx } from '@emotion/react';\nimport { cl"
},
{
"path": "packages/react-select/src/components/Input.tsx",
"chars": 3019,
"preview": "/** @jsx jsx */\nimport { InputHTMLAttributes } from 'react';\nimport { jsx } from '@emotion/react';\n\nimport {\n CommonPro"
},
{
"path": "packages/react-select/src/components/LiveRegion.tsx",
"chars": 6117,
"preview": "/** @jsx jsx */\nimport { Fragment, ReactNode, useMemo } from 'react';\nimport { jsx } from '@emotion/react';\nimport A11yT"
}
]
// ... and 102 more files (download for full content)
About this extraction
This page contains the full source code of the JedWatson/react-select GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 302 files (885.2 KB), approximately 242.3k tokens, and a symbol index with 523 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.