[ { "path": ".browserslistrc", "content": "> 0.25%\nie 11\nnot op_mini all\n" }, { "path": ".changeset/README.md", "content": "# Changesets\n\nHello 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)\n\nTo help you get started though, here are some things you should know about this folder:\n\n## Changesets are automatically generated\n\nChangesets 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.\n\n## Each changeset is its own folder\n\nWe 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.\n\n## Changesets are automatically removed\n\nWhen `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.\n\n## Changesets come in two parts\n\nYou should treat these parts quite differently:\n\n- `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.\n- `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.\n\n## I want to edit the information in a `changes.json` - how do I do it safely?\n\nThe best option is to make a new changeset using the changeset command, copy over the `changes.md`, then delete the old changeset.\n\n## Can I rename the folder for my changeset?\n\nAbsolutely! 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.\n\n## Can I manually delete changesets?\n\nYou can, but you should be aware this will remove the intent to release communicated by the changeset, and should be done with caution.\n" }, { "path": ".changeset/config.json", "content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@0.2.1/schema.json\",\n \"changelog\": \"./getChangelogEntry\",\n \"commit\": false,\n \"linked\": [],\n \"access\": \"public\"\n}\n" }, { "path": ".changeset/getChangelogEntry.js", "content": "require('dotenv').config();\nconst { getInfo } = require('@changesets/get-github-info');\n\nconst getReleaseLine = async (changeset, type) => {\n const [firstLine, ...futureLines] = changeset.summary\n .split('\\n')\n .map((l) => l.trimRight());\n let { links } = await getInfo({\n repo: 'JedWatson/react-select',\n commit: changeset.commit,\n });\n return `- ${links.commit}${links.pull === null ? '' : ` ${links.pull}`}${\n links.user === null ? '' : ` Thanks ${links.user}!`\n } - ${firstLine}\\n${futureLines.map((l) => ` ${l}`).join('\\n')}`;\n};\n\nconst getDependencyReleaseLine = async (changesets, dependenciesUpdated) => {\n if (dependenciesUpdated.length === 0) return '';\n\n const changesetLinks = changesets.map(\n (changeset) => `- Updated dependencies [${changeset.commit}]:`\n );\n\n const updatedDepenenciesList = dependenciesUpdated.map(\n (dependency) => ` - ${dependency.name}@${dependency.version}`\n );\n\n return [...changesetLinks, ...updatedDepenenciesList].join('\\n');\n};\n\nmodule.exports = {\n getReleaseLine,\n getDependencyReleaseLine,\n};\n" }, { "path": ".circleci/config.yml", "content": "version: 2\n\ndocker_defaults: &docker_defaults\n docker:\n - image: cypress/browsers:latest\n environment:\n TERM: xterm\n working_directory: ~/project/repo\n\nattach_workspace: &attach_workspace\n attach_workspace:\n at: ~/project\n\ninstall_steps: &install_steps\n steps:\n - checkout\n - restore_cache:\n name: Restore node_modules cache\n keys:\n - dependency-cache-{{ .Branch }}-{{ checksum \"yarn.lock\" }}\n - dependency-cache-{{ .Branch }}-\n - dependency-cache-\n - cache-{{ checksum \"package.json\" }}\n - run:\n name: Installing Dependencies\n command: |\n yarn install --silent\n - save_cache:\n name: Save node_modules cache\n key: dependency-cache-{{ .Branch }}-{{ checksum \"package.json\" }}\n paths:\n - ~/.cache\n - persist_to_workspace:\n root: ~/project\n paths:\n - repo\n\nworkflows:\n version: 2\n build_pipeline:\n jobs:\n - build\n - unit_test:\n requires:\n - build\n - end_to_end:\n requires:\n - build\njobs:\n build:\n <<: *docker_defaults\n <<: *install_steps\n unit_test:\n <<: *docker_defaults\n steps:\n - *attach_workspace\n - run:\n name: Running unit tests\n command: |\n yarn prettier:check\n yarn lint\n yarn type-check\n yarn test:jest\n yarn coveralls\n end_to_end:\n <<: *docker_defaults\n steps:\n - *attach_workspace\n - run:\n name: Running E2E tests\n command: |\n yarn global add cypress\n yarn install --silent\n yarn cypress install\n yarn e2e\n" }, { "path": ".codesandbox/ci.json", "content": "{\n \"buildCommand\": \"build\",\n \"packages\": [\"packages/*\"],\n \"sandboxes\": [\"nfmxw\"],\n \"node\": \"20\"\n}\n" }, { "path": ".coveralls.yml", "content": "service-name: travis-ci\nrepo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR\n" }, { "path": ".editorconfig", "content": "# This file is for unifying the coding style for different editors and IDEs\n# editorconfig.org\nroot = true\n\n[*]\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\nindent_style = space\nindent_size = 2\n\n[*.md]\ntrim_trailing_whitespace = false\n\n[.circleci/config.yml]\nindent_size = 4\n" }, { "path": ".eslintignore", "content": "coverage/*\ncypress/plugins/*\ncypress/support/*\n**/dist/*\nlib/*\nnode_modules/*\n**/node_modules/*\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n extends: ['plugin:react-hooks/recommended', 'plugin:@typescript-eslint/base'],\n parser: '@typescript-eslint/parser',\n env: {\n browser: true,\n es6: true,\n node: true,\n },\n plugins: ['react', '@typescript-eslint'],\n rules: {\n '@typescript-eslint/no-unused-vars': [\n 'error',\n {\n args: 'after-used',\n argsIgnorePattern: '^event$',\n ignoreRestSiblings: true,\n vars: 'all',\n varsIgnorePattern: 'jsx|emotionJSX',\n },\n ],\n curly: [2, 'multi-line'],\n 'jsx-quotes': 1,\n 'no-shadow': 0,\n '@typescript-eslint/no-shadow': 2,\n 'no-trailing-spaces': 1,\n 'no-underscore-dangle': 1,\n '@typescript-eslint/no-unused-expressions': 1,\n 'object-curly-spacing': [1, 'always'],\n '@typescript-eslint/quotes': [2, 'single', 'avoid-escape'],\n 'react/jsx-boolean-value': 1,\n 'react/jsx-no-undef': 1,\n 'react/jsx-uses-react': 1,\n 'react/jsx-uses-vars': 1,\n 'react/jsx-wrap-multilines': 1,\n 'react/no-did-mount-set-state': 1,\n 'react/no-did-update-set-state': 1,\n 'react/no-unknown-property': 1,\n 'react/react-in-jsx-scope': 1,\n 'react/self-closing-comp': 1,\n 'react/sort-prop-types': 1,\n '@typescript-eslint/semi': 2,\n '@typescript-eslint/no-inferrable-types': 2,\n strict: 0,\n },\n settings: {\n react: {\n version: 'detect',\n },\n },\n};\n" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\nThanks for your interest in React-Select. All forms of contribution are\nwelcome, from issue reports to PRs and documentation / write-ups.\n\nBefore you open a PR:\n\n- In development, run `yarn start` to build (+watch) the project source, and run\n the [development server](http://localhost:8000).\n- Please ensure all the examples work correctly after your change. If you're\n adding a major new use-case, add a new example demonstrating its use.\n- Be careful to follow the code style of the project. Run `yarn lint` after\n your changes and ensure you do not introduce any new errors or warnings.\n- This repository uses TypeScript, please run `yarn type-check` after your changes to ensure\n that you do not introduce any new type errors.\n\n- Ensure that your effort is aligned with the project's roadmap by talking to\n the maintainers, especially if you are going to spend a lot of time on it.\n- Make sure there's an issue open for any work you take on and intend to submit\n as a pull request - it helps core members review your concept and direction\n early and is a good way to discuss what you're planning to do.\n- If you open an issue and are interested in working on a fix, please let us\n know. We'll help you get started, rather than adding it to the queue.\n- Make sure you do not add regressions by running `yarn test`.\n- Where possible, include tests with your changes, either that demonstrates the\n bug, or tests the new functionality. If you're not sure how to test your\n changes, feel free to ping @gwyneplaine or @JedWatson\n- Run `yarn coveralls` to check that the coverage hasn't dropped, and look at the\n report (under the generated `coverage` directory) to check that your changes are\n covered\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: File a bug report\ntitle: ''\nlabels: [issue/bug-unconfirmed]\nassignees: ''\n---\n\n**Thanks for using react-select!**\n\nIf 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.\nQuestions and feature requests have their own place in our discussions section.\n\n## Are you reporting a bug or runtime error?\n\nPlease include a test case that demonstrates the issue you're reporting!\n\nThis is very helpful to maintainers in order to help us see the issue you're seeing.\n\nPlease note we are currently only directing our efforts towards the current major (v5) version and beyond.\n\nWe 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.\n\nTo report bugs against react-select v5 please fork the following code-sandbox:\nhttps://codesandbox.io/s/react-select-v5-sandbox-y5jtm\n\nYou 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.\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Feature request\n url: https://github.com/JedWatson/react-select/discussions/categories/ideas\n about: Got an idea for a feature or want to propose a change? Then this is the place for you.\n - name: Question on usage\n url: https://github.com/JedWatson/react-select/discussions/categories/q-a\n about: If you have a question regarding the usage of the library.\n - name: StackOverflow\n url: https://stackoverflow.com/questions/tagged/react-select\n about: Alternatively you can visit StackOverflow with the `[react-select]` tag\n" }, { "path": ".github/dependabot.yml", "content": "version: 2\nupdates:\n - package-ecosystem: 'npm'\n directory: '/'\n schedule:\n interval: 'weekly'\n ignore:\n - dependency-name: '*'\n update-types:\n ['version-update:semver-minor', 'version-update:semver-patch']\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n push:\n branches:\n - master\n\npermissions:\n contents: read\n\njobs:\n release:\n permissions:\n # for changesets/action\n contents: write\n pull-requests: write\n name: Release\n runs-on: ubuntu-latest\n steps:\n - name: Checkout Repo\n uses: actions/checkout@v3\n with:\n # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits\n fetch-depth: 0\n\n - name: Setup Node.js 22.x\n uses: actions/setup-node@v4\n with:\n node-version: 22.x\n\n - name: Install Dependencies\n run: yarn\n\n - name: Create Release Pull Request or Publish to npm\n uses: changesets/action@v1\n with:\n publish: yarn release\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n" }, { "path": ".gitignore", "content": "# 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.nyc_output\n\n# Cypress\ncypress/videos\ncypress/screenshots\ncypress/support\ncypress/plugins\n\n# Dependency directory\nnode_modules\nbower_components\n\n# Publish directory\n.publish\n\n# Editor artefacts\n.idea\n\n# Other\n.DS_Store\n.env\npackage-lock.json\n\n# Notes\n.NOTES.md\n\nmagical-types\n" }, { "path": ".nvmrc", "content": "22\n" }, { "path": ".prettierignore", "content": "coverage/*\ncypress/plugins/*\ncypress/support/*\n**/dist/*\nlib/*\nnode_modules/*\n**/node_modules/*\n**/magical-types/*\n" }, { "path": ".prettierrc.js", "content": "module.exports = {\n singleQuote: true,\n trailingComma: 'es5',\n overrides: [\n {\n files: '.changeset/pre.json',\n options: { parser: 'json-stringify' },\n },\n ],\n};\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\nThanks for your interest in React-Select. All forms of contribution are\nwelcome, from issue reports to PRs and documentation / write-ups.\n\nBefore you open a PR:\n\n- In development, run `yarn start` to build (and watch) the project source, and run\n the [development server](http://localhost:8000).\n- Please ensure all the examples work correctly after your change. If you're\n adding a major new use-case, add a new example `/docs/examples` and subsequent documentation demonstrating its use `/docs/pages`.\n- Ensure that your effort is aligned with the project's roadmap by talking to\n the maintainers, especially if you are going to spend a lot of time on it.\n- Make sure there's an issue open for any work you take on and intend to submit\n as a pull request - it helps core members review your concept and direction\n early and is a good way to discuss what you're planning to do.\n- If you open an issue and are interested in working on a fix, please let us\n know. We'll help you get started, rather than inadvertently doubling up on your hard work.\n- Make sure you do not add regressions by running `yarn test`.\n- Where possible, include tests with your changes, either that demonstrates the\n bug, or tests the new functionality.\n- All new features and changes need documentation.\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2022 Jed Watson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "[![NPM](https://img.shields.io/npm/v/react-select.svg)](https://www.npmjs.com/package/react-select)\n[![CircleCI](https://circleci.com/gh/JedWatson/react-select/tree/master.svg?style=shield)](https://circleci.com/gh/JedWatson/react-select/tree/master)\n[![Coverage Status](https://coveralls.io/repos/JedWatson/react-select/badge.svg?branch=master&service=github)](https://coveralls.io/github/JedWatson/react-select?branch=master)\n[![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=react-select)\n\n# React-Select\n\nThe Select control for [React](https://reactjs.org). Initially built for use in [KeystoneJS](https://www.keystonejs.com).\n\nSee [react-select.com](https://www.react-select.com) for live demos and comprehensive docs.\n\n`react-select` is funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com).\nWe are an open source project that is continuously supported by the community.\n\nReact 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.\n\nFor the story behind this component, watch Jed's talk at React Conf 2019 - [building React Select](https://youtu.be/yS0jUnmBujE)\n\nFeatures include:\n\n- Flexible approach to data, with customisable functions\n- Extensible styling API with [emotion](https://emotion.sh)\n- Component Injection API for complete control over the UI behaviour\n- Controllable state props and modular architecture\n- Long-requested features like option groups, portal support, animation, and more\n\n## Using an older version?\n\n- [v3, v4, and v5 upgrade guide](https://react-select.com/upgrade)\n- [v2 upgrade guide](https://react-select.com/upgrade-to-v2)\n- React Select v1 documentation and examples are available at [v1.react-select.com](https://v1.react-select.com)\n\n# Installation and usage\n\nThe easiest way to use react-select is to install it from npm and build it into your app with Webpack.\n\n```\nyarn add react-select\n```\n\nThen use it in your app:\n\n```js\nimport React, { useState } from 'react';\nimport Select from 'react-select';\n\nconst options = [\n { value: 'chocolate', label: 'Chocolate' },\n { value: 'strawberry', label: 'Strawberry' },\n { value: 'vanilla', label: 'Vanilla' },\n];\n\nexport default function App() {\n const [selectedOption, setSelectedOption] = useState(null);\n\n return (\n <div className=\"App\">\n <Select\n defaultValue={selectedOption}\n onChange={setSelectedOption}\n options={options}\n />\n </div>\n );\n}\n```\n\n## Props\n\nCommon props you may want to specify include:\n\n- `autoFocus` - focus the control when it mounts\n- `className` - apply a className to the control\n- `classNamePrefix` - apply classNames to inner elements with the given prefix\n- `isDisabled` - disable the control\n- `isMulti` - allow the user to select multiple values\n- `isSearchable` - allow the user to search for matching options\n- `name` - generate an HTML input with this name, containing the current value\n- `onChange` - subscribe to change events\n- `options` - specify the options the user can select from\n- `placeholder` - change the text displayed when no option is selected\n- `noOptionsMessage` - ({ inputValue: string }) => string | null - Text to display when there are no options\n- `value` - control the current value\n\nSee the [props documentation](https://www.react-select.com/props) for complete documentation on the props react-select supports.\n\n## Controllable Props\n\nYou can control the following props by providing values for them. If you don't, react-select will manage them for you.\n\n- `value` / `onChange` - specify the current value of the control\n- `menuIsOpen` / `onMenuOpen` / `onMenuClose` - control whether the menu is open\n- `inputValue` / `onInputChange` - control the value of the search input (changing this will update the available options)\n\nIf you don't provide these props, you can set the initial value of the state they control:\n\n- `defaultValue` - set the initial value of the control\n- `defaultMenuIsOpen` - set the initial open value of the menu\n- `defaultInputValue` - set the initial value of the search input\n\n## Methods\n\nReact-select exposes two public methods:\n\n- `focus()` - focus the control programmatically\n- `blur()` - blur the control programmatically\n\n## Customisation\n\nCheck the docs for more information on:\n\n- [Customising the styles](https://www.react-select.com/styles)\n- [Using custom components](https://www.react-select.com/components)\n- [Using the built-in animated components](https://www.react-select.com/home#animated-components)\n- [Creating an async select](https://www.react-select.com/async)\n- [Allowing users to create new options](https://www.react-select.com/creatable)\n- [Advanced use-cases](https://www.react-select.com/advanced)\n- [TypeScript guide](https://www.react-select.com/typescript)\n\n## TypeScript\n\nThe 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.\n\n# Thanks\n\nThank you to everyone who has contributed to this project. It's been a wild ride.\n\nIf you like React Select, you should [follow me on Twitter](https://twitter.com/jedwatson)!\n\nShout 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 ❤️\n\n## License\n\nMIT Licensed. Copyright (c) Jed Watson 2022.\n" }, { "path": "babel.config.js", "content": "module.exports = {\n plugins: [\n '@emotion/babel-plugin',\n ['@babel/plugin-proposal-class-properties', { loose: true }],\n ['@babel/plugin-proposal-private-methods', { loose: true }],\n '@babel/plugin-transform-runtime',\n ],\n presets: [\n '@babel/preset-env',\n '@babel/preset-react',\n '@babel/preset-typescript',\n ],\n};\n" }, { "path": "cypress/fixtures/selectors.json", "content": "{\n \"singleBasic\": \"#cypress-single\",\n \"singleBasicSelect\": \"#basic-select-single\",\n \"singleClearable\": \"#cypress-single-clearable\",\n \"singleClearableSelect\": \"#clearable-select-single\",\n \"singleGroupedSelect\": \"#grouped-options-single\",\n \"checkboxDisable\": \".disable-checkbox\",\n \"checkboxEscapeClearsValue\": \".escape-clears-value-checkbox\",\n \"groupHeading\": \".react-select__group-heading\",\n \"indicatorClear\": \".react-select__clear-indicator\",\n \"indicatorDropdown\": \".react-select__dropdown-indicator\",\n \"menu\": \".react-select__menu\",\n \"control\": \".react-select__control\",\n \"menuOption\": \".react-select__option\",\n \"noOptionsValue\": \".react-select__menu-notice--no-options\",\n \"placeholder\": \".react-select__placeholder\",\n \"singleValue\": \".react-select__single-value\",\n \"menuSingle\": \"#basic-select-single .react-select__menu\",\n \"singleSelectSingleInput\": \"#react-select-basic-select-single-input\",\n \"toggleMenuSingle\": \"#basic-select-single .react-select__dropdown-indicator\",\n \"firstMultiValueRemove\": \"#multi-select .react-select__multi-value__remove:first\",\n \"menuMulti\": \"#multi-select .react-select__menu\",\n \"multiSelectDefaultValues\": \"#multi-select .react-select__multi-value\",\n \"multiSelectInput\": \"#react-select-multi-select-input\",\n \"placeHolderMulti\": \"#multi-select .react-select__placeholder\",\n \"toggleMenuMulti\": \"#multi-select .react-select__dropdown-indicator\",\n \"focusedOption\": \".react-select__option--is-focused\"\n}\n" }, { "path": "cypress/integration/multi-select.spec.ts", "content": "import selector from '../fixtures/selectors.json';\nimport cypressJson from '../../cypress.json';\n\nconst setup = [\n { width: 1440, height: 900, viewport: 'macbook-15', device: 'Laptop' },\n { width: 375, height: 667, viewport: 'iphone-6', device: 'Mobile' },\n { width: 768, height: 1024, viewport: 'ipad-2', device: 'Tablet' },\n];\n\ndescribe('Multi Select', () => {\n before(() => {\n cy.visit(cypressJson.baseUrl);\n cy.title().should('equal', 'React-Select');\n cy.get('h1').should('contain', 'Test Page for Cypress');\n });\n beforeEach(() => {\n cy.reload();\n });\n\n for (let config of setup) {\n const { viewport } = config;\n it(`Should display several default values that can be removed in view: ${viewport}`, () => {\n cy.get(selector.multiSelectDefaultValues).then(function ($defaultValue) {\n expect($defaultValue).to.have.length(2);\n expect($defaultValue.eq(0)).to.contain('Purple');\n expect($defaultValue.eq(1)).to.contain('Red');\n });\n\n cy.get(selector.firstMultiValueRemove)\n .click()\n .get(selector.multiSelectDefaultValues)\n .then(function ($defaultValue) {\n expect($defaultValue).to.have.length(1);\n expect($defaultValue.eq(0)).to.contain('Red');\n })\n .get(selector.menuMulti)\n .should('not.be.visible');\n });\n\n it(`Should be able to remove values on keyboard actions in view: ${viewport}`, () => {\n cy.get(selector.multiSelectInput)\n .click()\n .type('{backspace}', { force: true })\n .get(selector.multiSelectDefaultValues)\n .then(function ($defaultValue) {\n expect($defaultValue).to.have.length(1);\n expect($defaultValue.eq(0)).to.contain('Purple');\n })\n .get(selector.multiSelectInput)\n .type('{backspace}', { force: true })\n .get(selector.placeHolderMulti)\n .should('contain', 'Select...');\n });\n\n it(`Should select different options using - click and enter in view: ${viewport}`, () => {\n cy.get(selector.menuMulti)\n .should('not.exist')\n .get(selector.toggleMenuMulti)\n .click()\n .get(selector.menuMulti)\n .should('exist')\n .get(selector.menuMulti)\n .should('be.visible')\n .get(selector.menuOption)\n .contains('Orange')\n .click()\n .get(selector.toggleMenuMulti)\n .click()\n .get(selector.menuOption)\n .contains('Yellow')\n .click()\n .get(selector.multiSelectInput)\n .click({ force: true })\n .type('Slate', { force: true })\n .type('{enter}', { force: true })\n .get(selector.multiSelectDefaultValues)\n .then(function ($defaultValue) {\n expect($defaultValue).to.have.length(5);\n expect($defaultValue.eq(0)).to.contain('Purple');\n expect($defaultValue.eq(1)).to.contain('Red');\n expect($defaultValue.eq(2)).to.contain('Orange');\n expect($defaultValue.eq(3)).to.contain('Yellow');\n expect($defaultValue.eq(4)).to.contain('Slate');\n });\n });\n }\n});\n" }, { "path": "cypress/integration/single-select.spec.ts", "content": "import selector from '../fixtures/selectors.json';\nimport cypressJson from '../../cypress.json';\n\nconst setup = [\n {\n width: 1440,\n height: 900,\n viewport: 'macbook-15' as const,\n device: 'Laptop',\n },\n { width: 375, height: 667, viewport: 'iphone-6' as const, device: 'Mobile' },\n { width: 768, height: 1024, viewport: 'ipad-2' as const, device: 'Tablet' },\n];\n\ndescribe('Single Select', () => {\n before(() => {\n cy.visit(cypressJson.baseUrl);\n cy.title().should('equal', 'React-Select');\n cy.get('h1').should('contain', 'Test Page for Cypress');\n });\n\n for (let config of setup) {\n const { viewport } = config;\n\n context(`Basic in view: ${viewport}`, () => {\n before(() => {\n cy.viewport(viewport);\n });\n\n beforeEach(() => {\n cy.reload();\n });\n\n // TODO:\n // This test seems to fail when cypress tab is focused.\n // Also, manual testing does not confirm the desired behavior.\n it.skip(`Should not display the options menu when touched and dragged in view: ${viewport}`, () => {\n cy.get(selector.toggleMenuSingle)\n .click()\n .click()\n .get(selector.menuSingle)\n .should('not.be.visible')\n // to be sure it says focus and the menu is closed\n .get(selector.singleSelectSingleInput)\n .trigger('mousedown')\n .get(selector.menuSingle)\n .should('not.be.visible');\n });\n it(`Should display a default value in view: ${viewport}`, () => {\n cy.get(selector.singleBasicSelect)\n .find(selector.singleValue)\n .should('contain', 'Ocean');\n });\n\n it(`Should expand the menu when expand icon is clicked in view: ${viewport}`, () => {\n cy\n // Menu is not yet open\n .get(selector.singleBasicSelect)\n .find(selector.menu)\n .should('not.exist')\n // A dropdown icon is shown\n .get(selector.singleBasicSelect)\n .find(selector.indicatorDropdown)\n .should('be.visible')\n // Click the icon to open the menu\n .click()\n .get(selector.singleBasicSelect)\n .find(selector.menu)\n .should('exist')\n .should('be.visible')\n .contains('Green');\n });\n\n it(`Should close the menu after selecting an option in view: ${viewport}`, () => {\n cy.get(selector.singleBasicSelect)\n .find(selector.indicatorDropdown)\n .click()\n .get(selector.singleBasicSelect)\n .find(selector.menu)\n .should('contain', 'Green')\n .contains('Green')\n .click()\n // Value has updated\n .get(selector.singleBasicSelect)\n .find(selector.singleValue)\n .should('contain', 'Green')\n // Menu has closed\n .get(selector.singleBasicSelect)\n .find(selector.menu)\n .should('not.exist');\n });\n\n it(`Should be disabled once disabled is checked in view: ${viewport}`, () => {\n cy\n // Does not start out disabled\n .get(selector.singleBasicSelect)\n // .click()\n .find('input')\n .should('exist')\n .should('not.be.disabled')\n // Disable the select component\n .get(selector.singleBasic)\n .find(selector.checkboxDisable)\n .click()\n // Now the input should be disabled\n .get(selector.singleBasicSelect)\n .click({ force: true })\n .find('input')\n .should('exist')\n .should('be.disabled')\n // control should have aria-disabled\n .get(selector.singleBasicSelect)\n .find(selector.control)\n .should('have.attr', 'aria-disabled', 'true');\n });\n\n it(`Should filter options when searching in view: ${viewport}`, () => {\n cy.get(selector.singleBasicSelect)\n .click()\n .find('input')\n .type('For', { force: true })\n .get(selector.singleBasicSelect)\n .find(selector.menu)\n .should('contain', 'Forest')\n .find(selector.menuOption)\n .should('have.length', 1);\n });\n\n it(`Should show \"No options\" if searched value is not found in view: ${viewport}`, () => {\n cy.get(selector.singleBasicSelect)\n .click()\n .find('input')\n .type('/', { force: true })\n .get(selector.noOptionsValue)\n .should('contain', 'No options');\n });\n\n it(`Should not clear the value when backspace is pressed in view: ${viewport}`, () => {\n cy.get(selector.singleBasicSelect)\n .click()\n .find('input')\n .type('{backspace}', { force: true })\n .get(selector.singleBasicSelect)\n .find(selector.placeholder)\n .should('not.be.visible');\n });\n });\n\n context(`Grouped in view: ${viewport}`, () => {\n before(() => {\n cy.viewport(viewport);\n });\n\n beforeEach(() => {\n cy.reload();\n });\n\n it(`Should display a default value in view: ${viewport}`, () => {\n cy.get(selector.singleGroupedSelect)\n .find(selector.singleValue)\n .should('contain', 'Blue');\n });\n\n it(`Should display group headings in the menu in view: ${viewport}`, () => {\n cy.get(selector.singleGroupedSelect)\n .find(selector.indicatorDropdown)\n .click()\n .get(selector.singleGroupedSelect)\n .find(selector.menu)\n .should('be.visible')\n .find(selector.groupHeading)\n .should('have.length', 2);\n });\n\n it(`Should focus next option on down arrow key press: ${viewport}`, () => {\n cy.get(selector.singleGroupedSelect)\n .click()\n .find('input')\n .type('{downarrow}', { force: true })\n .get(selector.focusedOption)\n .should('exist');\n });\n\n it(`Should focus next option on down arrow key press after filtering: ${viewport}`, () => {\n cy.get(selector.singleGroupedSelect)\n .click()\n .find('input')\n .type('o', { force: true })\n .type('{downarrow}', { force: true })\n .get(selector.focusedOption)\n .should('exist');\n });\n });\n\n context(`Clearable in view: ${viewport}`, () => {\n before(() => {\n cy.viewport(viewport);\n });\n\n beforeEach(() => {\n cy.reload();\n });\n\n it(`Should display a default value in view: ${viewport}`, () => {\n cy.get(selector.singleClearableSelect)\n .find(selector.singleValue)\n .should('contain', 'Blue');\n });\n\n it(`Should display a clear indicator in view: ${viewport}`, () => {\n cy.get(selector.singleClearableSelect)\n .find(selector.indicatorClear)\n .should('be.visible');\n });\n\n it(`Should clear the default value when clear is clicked in view: ${viewport}`, () => {\n cy.get(selector.singleClearableSelect)\n .find(selector.indicatorClear)\n .click()\n .get(selector.singleClearableSelect)\n .find(selector.placeholder)\n .should('be.visible')\n .should('contain', 'Select...');\n });\n\n // 'backspaceRemovesValue' is true by default\n it(`Should clear the value when backspace is pressed in view: ${viewport}`, () => {\n cy.get(selector.singleClearableSelect)\n .click()\n .find('input')\n .type('{backspace}', { force: true })\n .get(selector.singleClearableSelect)\n .find(selector.placeholder)\n .should('be.visible')\n .should('contain', 'Select...');\n });\n\n // 'backspaceRemovesValue' is true by default, and delete is included\n it(`Should clear the value when delete is pressed in view: ${viewport}`, () => {\n cy.get(selector.singleClearableSelect)\n .click()\n .find('input')\n .type('{del}', { force: true })\n .get(selector.singleClearableSelect)\n .find(selector.placeholder)\n .should('be.visible')\n .should('contain', 'Select...');\n });\n\n it(`Should not open the menu when a value is cleared with backspace in view: ${viewport}`, () => {\n cy.get(selector.singleClearableSelect)\n .click()\n .find('input')\n // Close the menu, but leave focused\n .type('{esc}', { force: true })\n .get(selector.singleClearableSelect)\n .find(selector.menu)\n .should('not.be.visible')\n // Clear the value, verify menu doesn't pop\n .get(selector.singleClearableSelect)\n .find('input')\n .type('{backspace}', { force: true })\n .get(selector.singleClearableSelect)\n .find(selector.menu)\n .should('not.be.visible');\n });\n\n it(`Should clear the value when escape is pressed if escapeClearsValue and menu is closed in view: ${viewport}`, () => {\n cy\n // nothing happens if escapeClearsValue is false\n .get(selector.singleClearableSelect)\n .click()\n .find('input')\n // Escape once to close the menu\n .type('{esc}', { force: true })\n .get(selector.singleBasicSelect)\n .find(selector.menu)\n .should('not.be.visible')\n // Escape again to verify value is not cleared\n .get(selector.singleClearableSelect)\n .find('input')\n .type('{esc}', { force: true })\n .get(selector.singleClearableSelect)\n .find(selector.placeholder)\n .should('not.be.visible')\n // Enable escapeClearsValue and try again, it should clear the value\n .get(selector.singleClearable)\n .find(selector.checkboxEscapeClearsValue)\n .click()\n .get(selector.singleClearableSelect)\n .click()\n .find('input')\n // Escape once to close the menu\n .type('{esc}', { force: true })\n .get(selector.singleBasicSelect)\n .find(selector.menu)\n .should('not.be.visible')\n // Escape again to clear value\n .get(selector.singleClearableSelect)\n .find('input')\n .type('{esc}', { force: true })\n .get(selector.singleClearableSelect)\n .find(selector.placeholder)\n .should('be.visible');\n });\n });\n }\n});\n" }, { "path": "cypress/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"module\": \"commonjs\",\n \"noEmit\": true,\n \"strict\": true,\n \"types\": [\"cypress\"],\n \"esModuleInterop\": true,\n \"resolveJsonModule\": true\n }\n}\n" }, { "path": "cypress.json", "content": "{\n \"baseUrl\": \"http://localhost:8000/cypress-tests\",\n \"video\": false\n}\n" }, { "path": "docs/App/Footer.tsx", "content": "/** @jsx jsx */\nimport { jsx } from '@emotion/react';\n\n// const smallDevice = '@media (max-width: 769px)';\nconst largeDevice = '@media (min-width: 770px)';\n\nconst Wrapper = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n backgroundColor: '#FAFBFC',\n borderTop: '1px solid #EBECF0',\n color: '#7A869A',\n fontSize: '0.85em',\n zIndex: 1,\n }}\n {...props}\n />\n);\nconst Container = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n boxSizing: 'border-box',\n maxWidth: 800,\n marginLeft: 'auto',\n marginRight: 'auto',\n paddingLeft: 20,\n paddingRight: 20,\n\n [largeDevice]: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n paddingBottom: 20,\n paddingTop: 20,\n },\n }}\n {...props}\n />\n);\nconst A = (props: JSX.IntrinsicElements['a']) => (\n <a\n {...props}\n css={{\n color: '#505F79',\n textDecoration: 'none',\n\n ':visited': {\n color: '#505F79',\n },\n ':hover': {\n textDecoration: 'underline',\n },\n }}\n target=\"_blank\"\n />\n);\n\nexport default function Footer() {\n return (\n <Wrapper>\n <Container>\n <p>\n Copyright © <A href=\"https://twitter.com/JedWatson\">Jed Watson</A>,\n 2022. MIT Licensed.\n </p>\n <p>\n Thanks to <A href=\"https://www.thinkmill.com.au\">Thinkmill</A> and{' '}\n <A href=\"https://www.atlassian.com\">Atlassian</A> for supporting this\n project.\n </p>\n </Container>\n </Wrapper>\n );\n}\n" }, { "path": "docs/App/GitHubButton.tsx", "content": "/** @jsx jsx */\nimport { jsx } from '@emotion/react';\n\ninterface Props {\n readonly count: number;\n readonly repo: string;\n}\n\nconst StarButton = ({ count, repo }: Props) => (\n <div css={{ alignItems: 'center', display: 'inline-flex', minWidth: 128 }}>\n <a\n aria-label=\"Star react-select on GitHub\"\n css={{\n alignItems: 'center',\n display: 'flex',\n borderRadius: 2,\n color: '#253858',\n backgroundColor: 'white',\n boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',\n cursor: 'pointer',\n fontSize: 13,\n fontWeight: 'bold',\n padding: '6px 10px',\n position: 'relative',\n textDecoration: 'none',\n\n ':hover': {\n boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.2)',\n color: '#091e42',\n },\n ':active': {\n background: '#DFE1E5',\n boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',\n color: '#091e42',\n bottom: -1,\n },\n }}\n style={{\n backgroundImage: 'linear-gradient(180deg, #fff 33%, #DFE1E5 100%)',\n }}\n href={repo}\n target=\"_blank\"\n >\n <svg\n version=\"1.1\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n fillRule=\"evenodd\"\n 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\"\n />\n </svg>\n <span css={{ paddingLeft: 4 }}>Star</span>\n </a>\n <a\n css={{\n backgroundColor: 'white',\n borderRadius: 2,\n color: '#253858',\n cursor: 'pointer',\n display: 'inline-block',\n fontSize: 13,\n fontWeight: 500,\n letterSpacing: '-0.01em',\n marginLeft: 6,\n opacity: count > 0 ? 1 : 0,\n padding: '6px 7px',\n position: 'relative',\n textDecoration: 'none',\n transition: 'opacity 200ms',\n\n '&:before': {\n border: '4px solid transparent',\n borderRightColor: 'white',\n content: '\" \"',\n height: 0,\n left: -8,\n top: '50%',\n marginTop: -4,\n position: 'absolute',\n width: 0,\n },\n }}\n href={`${repo}/stargazers`}\n target=\"_blank\"\n >\n <span>{count && count.toLocaleString()}</span>\n </a>\n </div>\n);\n\nexport default StarButton;\n" }, { "path": "docs/App/Header.tsx", "content": "/** @jsx jsx */\nimport fetch from 'unfetch';\nimport { Component, Ref, RefCallback } from 'react';\nimport { jsx } from '@emotion/react';\nimport { RouteComponentProps, withRouter } from 'react-router-dom';\n\nimport Select, { StylesConfig } from 'react-select';\nimport GitHubButton from './GitHubButton';\nimport TwitterButton from './TwitterButton';\nimport isArray from '../isArray';\n\nconst smallDevice = '@media (max-width: 769px)';\nconst largeDevice = '@media (min-width: 770px)';\n\ninterface Change {\n value: string;\n icon: string;\n label: string;\n}\n\nconst changes = [\n {\n value: '/typescript',\n icon: '🛠️',\n label: 'Written in TypeScript',\n },\n {\n value: '/props',\n icon: '❤️',\n label: 'Simpler and more extensible',\n },\n {\n value: '/styles',\n icon: '🎨',\n label: 'CSS-in-JS styling API',\n },\n {\n value: '/components',\n icon: '📦',\n label: 'Replaceable component architecture',\n },\n {\n value: '/advanced',\n icon: '🔥',\n label: 'Lots of advanced functionality',\n },\n {\n value: '/upgrade',\n icon: '🗺',\n label: 'Check out the Upgrade Guide',\n },\n];\n\nfunction getLabel({ icon, label }: Change) {\n return (\n <div style={{ alignItems: 'center', display: 'flex' }}>\n <span style={{ fontSize: 18, marginRight: '0.5em' }}>{icon}</span>\n <span style={{ fontSize: 14 }}>{label}</span>\n </div>\n );\n}\n\nconst headerSelectStyles: StylesConfig<Change, boolean> = {\n control: (base, { isFocused }) => ({\n ...base,\n backgroundClip: 'padding-box',\n borderColor: 'rgba(0,0,0,0.1)',\n boxShadow: isFocused ? '0 0 0 1px #4C9AFF' : undefined,\n\n ':hover': {\n borderColor: 'rgba(0,0,0,0.2)',\n },\n }),\n option: (base) => ({\n ...base,\n padding: '4px 12px',\n }),\n placeholder: (base) => ({\n ...base,\n color: 'black',\n }),\n};\n\nconst Gradient = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n backgroundColor: '#2684FF',\n backgroundImage: 'linear-gradient(135deg, #2684FF 0%, #0747A6 100%)',\n color: 'white',\n position: 'relative',\n zIndex: 2,\n\n [largeDevice]: {\n boxShadow: '0 5px 0 rgba(0, 0, 0, 0.08)',\n },\n }}\n {...props}\n />\n);\nconst Container = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n boxSizing: 'border-box',\n maxWidth: 800,\n marginLeft: 'auto',\n marginRight: 'auto',\n padding: 20,\n\n [largeDevice]: {\n paddingBottom: 40,\n paddingTop: 40,\n },\n }}\n {...props}\n />\n);\n\ninterface HeaderState {\n readonly stars: number;\n}\n\nconst apiUrl = 'https://api.github.com/repos/jedwatson/react-select';\n\nclass Header extends Component<RouteComponentProps, HeaderState> {\n nav: HTMLElement | undefined;\n content!: HTMLElement;\n state: HeaderState = { stars: 0 };\n componentDidMount() {\n this.getStarCount();\n }\n getStarCount = () => {\n fetch(apiUrl)\n .then((res) => res.json())\n .then((data) => {\n const stars = data.stargazers_count;\n this.setState({ stars });\n })\n .catch((err) => {\n console.error('Error retrieving data', err);\n });\n };\n isHome = (props = this.props) => {\n const valid = ['/', '/home'];\n return valid.includes(props.location.pathname);\n };\n setContentRef: RefCallback<HTMLDivElement> = (ref) => {\n if (!ref) return;\n this.content = ref;\n };\n getContentHeight = () => {\n if (!this.content) {\n return 'auto';\n }\n\n return this.content.scrollHeight;\n };\n render() {\n const { children, history } = this.props;\n const { stars } = this.state;\n\n return (\n <Gradient>\n {children}\n <Collapse\n isCollapsed={!this.isHome()}\n height={this.getContentHeight()}\n innerRef={this.setContentRef}\n >\n <Container>\n <h1\n css={{\n fontSize: '2.4em',\n fontWeight: 'bold',\n lineHeight: 1,\n margin: 0,\n marginTop: '-0.2em',\n textShadow: '1px 1px 0 rgba(0, 82, 204, 0.33)',\n color: 'inherit',\n\n [largeDevice]: {\n fontSize: '3.6em',\n },\n }}\n >\n React Select\n </h1>\n <Content\n stars={stars}\n onChange={(opt) => {\n history.push(opt.value);\n }}\n />\n </Container>\n </Collapse>\n </Gradient>\n );\n }\n}\n\ninterface CollapseProps {\n readonly height: 'auto' | number;\n readonly isCollapsed: boolean;\n readonly innerRef: Ref<HTMLDivElement>;\n}\n\nconst Collapse = ({\n height,\n isCollapsed,\n innerRef,\n ...props\n}: CollapseProps & JSX.IntrinsicElements['div']) => {\n return (\n <div\n ref={innerRef}\n css={{\n height: isCollapsed ? 0 : height,\n overflow: isCollapsed ? 'hidden' : undefined,\n transition: 'height 260ms cubic-bezier(0.2, 0, 0, 1)',\n }}\n {...props}\n />\n );\n};\n\ninterface ContentProps {\n readonly onChange: (option: Change) => void;\n readonly stars: number;\n}\n\nconst Content = ({ onChange, stars }: ContentProps) => (\n <div\n css={{\n marginTop: 16,\n\n [largeDevice]: { display: 'flex' },\n }}\n >\n <div css={{ flex: 1, [largeDevice]: { paddingRight: 30 } }}>\n <p\n style={{\n fontSize: '1.25em',\n lineHeight: 1.4,\n marginTop: -5,\n }}\n >\n A flexible and beautiful Select Input control for ReactJS with\n multiselect, autocomplete, async and creatable support.\n </p>\n <div css={{ flex: 1, alignItems: 'center' }}>\n <GitHubButton\n count={stars}\n repo=\"https://github.com/jedwatson/react-select\"\n />\n <TwitterButton />\n </div>\n </div>\n <div\n css={{\n color: 'black',\n flex: '0 1 320px',\n [smallDevice]: {\n paddingTop: 30,\n },\n }}\n >\n <div className=\"animate-dropin\">\n <Select\n formatOptionLabel={getLabel}\n isSearchable={false}\n options={changes}\n onChange={(option) => {\n if (option && !isArray(option)) {\n onChange(option);\n }\n }}\n value={null}\n placeholder=\"🎉 Feature Highlights\"\n styles={headerSelectStyles}\n />\n </div>\n </div>\n </div>\n);\n\nexport default withRouter(Header);\n" }, { "path": "docs/App/PageNav.tsx", "content": "/** @jsx jsx */\nimport { Component, FunctionComponent, MouseEvent, RefCallback } from 'react';\nimport { jsx } from '@emotion/react';\nimport { Route, RouteComponentProps, Switch } from 'react-router-dom';\n\nimport { animatedScrollTo } from 'react-select/src/utils';\nimport routes from './routes';\nimport ScrollSpy from './ScrollSpy';\nimport Sticky from './Sticky';\nimport store, { Data } from '../markdown/store';\n\nconst navWidth = 180;\nconst appGutter = 20;\nconst contentGutter = 30;\n\nconst smallDevice = '@media (max-width: 769px)';\nconst largeDevice = '@media (min-width: 770px)';\n\nconst NavSection: FunctionComponent<RouteComponentProps> = () => {\n const routeKeys = Object.keys(routes);\n return (\n <Switch>\n {routeKeys.map((r) => (\n <Route key={r} path={r} render={(p) => <PageNav {...p} />} />\n ))}\n </Switch>\n );\n};\n\ninterface NavState {\n readonly links: readonly Data[];\n readonly activeId: string | null;\n}\n\nclass PageNav extends Component<RouteComponentProps, NavState> {\n scrollSpy!: ScrollSpy;\n state: NavState = { activeId: null, links: [] };\n componentDidMount() {\n const { match } = this.props;\n\n // eslint-disable-next-line\n this.setState({ links: store.getPageHeadings(match.path) });\n }\n componentDidUpdate({ history, location }: RouteComponentProps) {\n const { hash } = this.props.location; // old hash\n const shouldRefresh = location.hash !== hash && history.action !== 'POP';\n\n // this makes everything work, need those fresh nodes\n if (shouldRefresh && this.scrollSpy.buildNodeList) {\n this.scrollSpy.buildNodeList();\n }\n }\n getSelected = (ids: readonly (string | null)[]) => {\n const activeId = ids[0];\n if (activeId !== this.state.activeId) {\n this.setState({ activeId });\n }\n };\n getScrollSpy: RefCallback<ScrollSpy> = (ref) => {\n if (!ref) return;\n this.scrollSpy = ref;\n };\n handleItemClick = ({\n event,\n hash,\n }: {\n readonly event: MouseEvent<HTMLDivElement>;\n readonly hash: string;\n }) => {\n event.preventDefault();\n const path = `#${hash}`;\n const el = document.querySelector<HTMLElement>(path);\n const { history } = this.props;\n\n if (el && el.offsetTop) {\n history.replace(path);\n animatedScrollTo(window, el.offsetTop);\n }\n };\n render() {\n const { activeId, links } = this.state;\n const isSmallDevice = window.innerWidth <= 769;\n\n return links && links.length ? (\n <Sticky preserveHeight={isSmallDevice}>\n <ScrollSpy ref={this.getScrollSpy} onChange={this.getSelected}>\n <Nav>\n {links.map((l) => {\n const hash = l.path.slice(1);\n const selected = hash === activeId;\n\n return l.level > 0 ? (\n <NavItem\n data-hash={hash}\n key={hash}\n selected={selected}\n level={l.level}\n onClick={(event) => {\n this.handleItemClick({ event, hash });\n }}\n >\n {l.label}\n </NavItem>\n ) : null;\n })}\n </Nav>\n </ScrollSpy>\n </Sticky>\n ) : null;\n }\n}\n\nexport default NavSection;\n\nconst Nav = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n [smallDevice]: {\n backgroundColor: 'rgba(255, 255, 255, 0.96)',\n boxShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.1)',\n display: 'flex',\n fontSize: 13,\n marginLeft: -appGutter,\n marginRight: -appGutter,\n overflowX: 'auto',\n WebkitOverflowScrolling: 'touch',\n },\n\n [largeDevice]: {\n display: 'block',\n float: 'left',\n paddingBottom: contentGutter,\n paddingTop: contentGutter,\n width: navWidth,\n zIndex: 1,\n },\n }}\n {...props}\n />\n);\n\ninterface NavItemProps {\n readonly level: number;\n readonly selected: boolean;\n}\n\nconst NavItem = ({\n level,\n selected,\n ...props\n}: NavItemProps & JSX.IntrinsicElements['div']) => (\n <div\n role=\"button\"\n css={{\n color: selected ? '#091e42' : '#7A869A',\n cursor: 'pointer',\n display: 'inline-block',\n padding: `15px ${appGutter}px`,\n position: 'relative',\n textDecoration: 'none',\n whiteSpace: 'nowrap',\n\n ':hover, :active': {\n color: selected ? 'hsl(0, 0%, 10%)' : '#2684FF',\n },\n\n [smallDevice]: {\n display: level === 3 ? 'none' : undefined,\n boxShadow: selected ? 'inset 0 -1px 0 black' : undefined,\n padding: `10px ${appGutter}px`,\n },\n\n [largeDevice]: {\n backgroundColor: selected ? 'white' : 'transparent',\n display: 'block',\n fontSize: level === 3 ? '0.9em' : undefined,\n fontWeight: selected ? 800 : 'inherit',\n padding: '10px 20px 10px 0',\n paddingLeft: level === 3 ? 10 : 0,\n transition: 'padding-left 150ms ease-out',\n },\n }}\n {...props}\n />\n);\n" }, { "path": "docs/App/ScrollSpy.tsx", "content": "import React, { Component, ReactElement, RefCallback } from 'react';\nimport rafSchedule from 'raf-schd';\nimport NodeResolver from 'react-node-resolver';\n\ninterface Props {\n readonly children: ReactElement;\n readonly onChange: (elements: readonly (string | null)[]) => void;\n}\ninterface State {\n readonly elements: readonly HTMLElement[];\n}\n\nfunction getStyle(el: HTMLElement, prop: string) {\n const val = window.getComputedStyle(el, null).getPropertyValue(prop);\n return parseFloat(val);\n}\nfunction isInView(el: HTMLElement) {\n let rect = el.getBoundingClientRect();\n\n const topOffset =\n (getStyle(el, 'padding-top') + getStyle(el, 'margin-top')) * -1;\n\n if (rect.top >= topOffset && rect.bottom <= window.innerHeight) {\n return true;\n }\n\n return false;\n}\n\nexport default class ScrollSpy extends Component<Props, State> {\n nav: HTMLElement | undefined;\n allIds = [];\n state: State = { elements: [] };\n static defaultProps = { preserveHeight: false };\n componentDidMount() {\n window.addEventListener('scroll', this.handleScroll, false);\n this.buildNodeList();\n }\n componentWillUnmount() {\n window.removeEventListener('scroll', this.handleScroll);\n }\n handleScroll = rafSchedule((event: Event) => {\n event.preventDefault();\n const { onChange } = this.props;\n const { elements } = this.state;\n if (!elements.length) return;\n\n const idsInView = elements\n .filter(isInView)\n .map((i) => i.getAttribute('id'));\n if (idsInView.length) {\n onChange(idsInView);\n }\n });\n getElements: RefCallback<HTMLElement> = (ref) => {\n if (!ref) return;\n this.nav = ref;\n };\n buildNodeList = () => {\n if (!this.nav) return;\n\n const anchorList = this.nav.querySelectorAll<HTMLElement>('[data-hash]');\n const elements = Array.from(anchorList).map(\n (i) => document.querySelector<HTMLElement>(`#${i.dataset.hash}`)!\n );\n\n this.setState({ elements });\n };\n render() {\n return (\n <NodeResolver innerRef={this.getElements}>\n {this.props.children}\n </NodeResolver>\n );\n }\n}\n" }, { "path": "docs/App/Section.tsx", "content": "import React, { FunctionComponent } from 'react';\nimport { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';\n\nimport routes from './routes';\n\nconst Section: FunctionComponent<RouteComponentProps> = () => {\n const routeKeys = Object.keys(routes);\n return (\n <Switch>\n {routeKeys.map((r) => (\n <Route key={r} path={r} render={(p) => <Content {...p} />} />\n ))}\n <Redirect from=\"/\" to=\"/home\" />\n </Switch>\n );\n};\n\nconst Content = ({ location, match }: RouteComponentProps) => {\n const page = routes[match.path];\n\n return (\n <Route\n path={match.path}\n render={() => (\n <Switch>\n <Route exact key={location.key} path={match.path} component={page} />\n </Switch>\n )}\n />\n );\n};\n\nexport default Section;\n" }, { "path": "docs/App/Sticky.tsx", "content": "import React, { Component, CSSProperties, RefCallback } from 'react';\nimport rafSchedule from 'raf-schd';\n\ninterface Props {\n readonly preserveHeight: boolean;\n}\ninterface State {\n readonly height: number | 'auto';\n readonly isFixed: boolean;\n readonly overScroll: number;\n readonly scrollHeight: number | null | undefined;\n readonly width: number | 'auto';\n}\n\nexport default class Sticky extends Component<Props, State> {\n innerEl: HTMLDivElement | undefined;\n outerEl: HTMLDivElement | undefined;\n state: State = {\n height: 'auto',\n isFixed: false,\n overScroll: 0,\n scrollHeight: null,\n width: 'auto',\n };\n static defaultProps = { preserveHeight: false };\n componentDidMount() {\n window.addEventListener('scroll', this.handleScroll, false);\n // this.handleScroll();\n }\n componentWillUnmount() {\n window.removeEventListener('scroll', this.handleScroll);\n }\n handleScroll = rafSchedule((event: Event) => {\n if (!this.innerEl || !this.outerEl) return;\n\n const offsetBottom = 88; // footer height\n const { top: outerTop } = this.outerEl.getBoundingClientRect();\n const innerTop = (this.innerEl.offsetTop && this.innerEl.offsetTop) || 0;\n const scrollY = window.pageYOffset;\n const maxScroll =\n document.body &&\n document.body.scrollHeight - window.innerHeight - offsetBottom;\n const { isFixed, overScroll } = this.state;\n\n // check for `isFixed` before setting state to prevent thrashing\n if (isFixed && outerTop > 0) {\n this.setState({ isFixed: false });\n } else if (!isFixed && scrollY >= innerTop) {\n this.setState({ isFixed: true });\n }\n\n // handle over scroll\n if (maxScroll && scrollY >= maxScroll) {\n this.setState({ overScroll: scrollY - maxScroll });\n } else if (overScroll > 0 && scrollY < maxScroll) {\n this.setState({ overScroll: 0 });\n }\n });\n getOuterEl: RefCallback<HTMLDivElement> = (ref) => {\n if (!ref) return;\n\n this.outerEl = ref;\n };\n getInnerEl: RefCallback<HTMLDivElement> = (ref) => {\n if (!ref) return;\n\n this.innerEl = ref;\n\n // get dimensions once, we're not interested in resize events\n const firstChild = ref.firstElementChild!;\n const availableHeight = window.innerHeight;\n let { height, width } = firstChild.getBoundingClientRect();\n let scrollHeight;\n\n if (typeof this.state.height !== 'number') {\n if (height > availableHeight) scrollHeight = availableHeight;\n this.setState({ height, scrollHeight, width });\n }\n };\n render() {\n const { preserveHeight } = this.props;\n const { height, isFixed, overScroll, scrollHeight, width } = this.state;\n const outerStyle = isFixed && preserveHeight ? { height } : undefined;\n const fixedStyles: CSSProperties = {\n position: 'fixed',\n top: 0,\n width,\n zIndex: 1,\n };\n const scrollStyles = scrollHeight\n ? {\n height: overScroll ? scrollHeight - overScroll : scrollHeight,\n overflow: 'scroll',\n }\n : null;\n const innerStyle = isFixed\n ? { ...fixedStyles, ...scrollStyles }\n : undefined;\n\n return (\n <div ref={this.getOuterEl} style={outerStyle}>\n <div ref={this.getInnerEl} style={innerStyle}>\n {this.props.children}\n </div>\n </div>\n );\n }\n}\n" }, { "path": "docs/App/TwitterButton.tsx", "content": "/** @jsx jsx */\nimport { jsx } from '@emotion/react';\n\nconst TwitterButton = () => (\n <div css={{ alignItems: 'center', display: 'inline-flex' }}>\n <a\n aria-label=\"Follow @JedWatson on Twitter\"\n css={{\n alignItems: 'center',\n display: 'flex',\n borderRadius: 2,\n color: 'white',\n border: '1px solid rgba(255, 255, 255, 0.3)',\n background: 'rgba(255, 255, 255, 0.1)',\n cursor: 'pointer',\n fontSize: 13,\n fontWeight: 'bold',\n padding: '5px 12px 5px 8px',\n marginLeft: '16px',\n position: 'relative',\n textDecoration: 'none',\n\n ':hover': {\n border: '1px solid rgba(255, 255, 255, 0.4)',\n background: 'rgba(255, 255, 255, 0.15)',\n },\n }}\n href=\"https://twitter.com/JedWatson\"\n target=\"_blank\"\n >\n <svg\n version=\"1.1\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 2000 1625.36\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <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\" />\n </svg>\n <span css={{ paddingLeft: 8 }}>Follow</span>\n </a>\n </div>\n);\n\nexport default TwitterButton;\n" }, { "path": "docs/App/components.tsx", "content": "/** @jsx jsx */\nimport { Component } from 'react';\nimport {\n Link,\n LinkProps,\n RouteComponentProps,\n withRouter,\n} from 'react-router-dom';\nimport { jsx } from '@emotion/react';\n\nconst navWidth = 180;\nconst appWidth = 800;\nconst appGutter = 20;\nconst contentGutter = 30;\nconst smallDevice = '@media (max-width: 769px)';\nconst largeDevice = '@media (min-width: 770px)';\n\nexport const AppContainer = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n boxSizing: 'border-box',\n marginLeft: 'auto',\n marginRight: 'auto',\n maxWidth: appWidth,\n minHeight: '100vh',\n padding: `0 ${appGutter}px`,\n }}\n {...props}\n />\n);\nexport const PageContent = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n paddingBottom: contentGutter * 4,\n paddingTop: contentGutter,\n\n [smallDevice]: {\n paddingTop: contentGutter * 2,\n },\n }}\n {...props}\n />\n);\nexport const AppContent = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n flex: '1 1 auto',\n marginLeft: 'auto',\n marginRight: 'auto',\n\n [largeDevice]: {\n paddingLeft: navWidth + contentGutter,\n },\n }}\n {...props}\n />\n);\n\n// ==============================\n// Navigation\n// ==============================\n\nexport const PrimaryNav = (props: JSX.IntrinsicElements['div']) => (\n <div\n css={{\n backgroundColor: 'rgba(0, 0, 0, 0.11)',\n fontWeight: 500,\n overflowX: 'auto',\n top: 0,\n width: '100%',\n WebkitOverflowScrolling: 'touch',\n }}\n >\n <div\n css={{\n boxSizing: 'border-box',\n display: 'flex',\n maxWidth: 800,\n marginLeft: 'auto',\n marginRight: 'auto',\n }}\n {...props}\n />\n </div>\n);\nexport const PrimaryNavItem = ({\n selected,\n ...props\n}: LinkProps & { readonly selected: boolean }) => (\n <Link\n css={{\n color: selected ? 'white' : '#DEEBFF',\n display: 'inline-block',\n opacity: selected ? 1 : 0.8,\n padding: `20px ${appGutter}px`,\n position: 'relative',\n textDecoration: 'none',\n whiteSpace: 'nowrap',\n\n ':hover, :active': {\n opacity: 1,\n },\n\n [smallDevice]: {\n fontSize: 13,\n padding: `10px ${appGutter}px`,\n },\n }}\n {...props}\n />\n);\n\n// ==============================\n// Scroll Restoration\n// ==============================\n\n// Return scroll to top on route change\nclass ScrollToTop extends Component<RouteComponentProps> {\n componentDidUpdate(prevProps: RouteComponentProps) {\n const { history, location } = this.props;\n\n // do not influence scroll on browser back/forward\n if (history.action === 'POP') return;\n\n // no scroll when extending the current path\n const pathArr = location.pathname.split('/');\n if (!prevProps.location.pathname.includes(pathArr[1])) {\n window.scrollTo(0, 0);\n }\n }\n\n render() {\n return this.props.children;\n }\n}\n\nexport const ScrollRestoration = withRouter(ScrollToTop);\n" }, { "path": "docs/App/index.tsx", "content": "import React, { Component, Fragment } from 'react';\nimport { BrowserRouter, Route, Switch } from 'react-router-dom';\nimport { Helmet } from 'react-helmet';\n\nimport Header from './Header';\nimport Footer from './Footer';\n// import NoMatch from '../NoMatch';\n\nimport {\n AppContainer,\n AppContent,\n PageContent,\n PrimaryNav,\n PrimaryNavItem,\n ScrollRestoration,\n} from './components';\nimport Section from './Section';\nimport PageNav from './PageNav';\nimport Tests from '../Tests';\n\nconst sections = [\n { label: 'Home', path: '/home' },\n { label: 'Props', path: '/props' },\n { label: 'Styles', path: '/styles' },\n { label: 'Components', path: '/components' },\n { label: 'Async', path: '/async' },\n { label: 'Creatable', path: '/creatable' },\n { label: 'Advanced', path: '/advanced' },\n { label: 'TypeScript', path: '/typescript' },\n { label: 'Upgrading', path: '/upgrade' },\n];\n\nexport default class App extends Component {\n render() {\n return (\n <BrowserRouter>\n <Switch>\n <Route exact path=\"/cypress-tests\" component={Tests} />\n <Route>\n <div>\n <Header>\n <Route\n render={({ location }) => (\n <PrimaryNav>\n {sections.map((l) => {\n const selected = location.pathname.includes(l.path);\n\n return (\n <PrimaryNavItem\n key={l.path}\n selected={selected}\n to={l.path}\n >\n {l.label}\n </PrimaryNavItem>\n );\n })}\n </PrimaryNav>\n )}\n />\n </Header>\n\n <ScrollRestoration>\n <AppContainer>\n <Helmet>\n <title>React Select\n \n \n (\n \n \n \n \n
\n \n \n \n )}\n />\n \n \n