├── .npmrc
├── .gitattributes
├── .eslintignore
├── src
    ├── index.js
    ├── constants.js
    ├── controller.js
    ├── __tests__
    │   └── index.js
    ├── item.js
    ├── utils.js
    ├── menu-status.js
    ├── input.js
    ├── menu.js
    └── autocomplete.js
├── examples
    ├── pages
    │   ├── react-select
    │   │   └── index.js
    │   ├── react-autocomplete
    │   │   └── index.js
    │   ├── index.js
    │   ├── _document.js
    │   ├── react-instantsearch
    │   │   └── index.js
    │   ├── axios-request
    │   │   └── index.js
    │   ├── apollo
    │   │   └── index.js
    │   ├── react-popper
    │   │   └── index.js
    │   ├── basic
    │   │   └── index.js
    │   └── semantic-ui
    │   │   └── index.js
    ├── .babelrc
    ├── .eslintrc
    ├── next.config.js
    ├── README.md
    ├── package.json
    └── other
    │   └── countries.js
├── CHANGELOG.md
├── .gitignore
├── .eslintrc
├── .babelrc
├── .travis.yml
├── jest.config.js
├── other
    ├── USERS.md
    ├── manual-releases.md
    ├── MAINTAINING.md
    └── CODE_OF_CONDUCT.md
├── LICENSE
├── .github
    ├── ISSUE_TEMPLATE.md
    └── PULL_REQUEST_TEMPLATE.md
├── package-scripts.js
├── package.json
├── .all-contributorsrc
├── CONTRIBUTING.md
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | registry=http://registry.npmjs.org/
2 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | *.js text eol=lf
3 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | dist
4 | examples/other/react-autocompletely
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Autocomplete from './autocomplete'
2 | 
3 | export default Autocomplete
4 | 


--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | export const AUTOCOMPLETE_CONTEXT = '__autocomplete__'
2 | export const MENU_CONTEXT = '__autocomplete_menu__'
3 | 


--------------------------------------------------------------------------------
/examples/pages/react-select/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | export default Examples
4 | 
5 | function Examples() {
6 |   return <div>react-select examples</div>
7 | }
8 | 


--------------------------------------------------------------------------------
/examples/pages/react-autocomplete/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | export default Examples
4 | 
5 | function Examples() {
6 |   return <div>react-autocomplete examples</div>
7 | }
8 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # CHANGELOG
2 | 
3 | The changelog is automatically updated using [semantic-release](https://github.com/semantic-release/semantic-release).
4 | You can see it on the [releases page](../../releases).
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | coverage
 3 | dist
 4 | .opt-in
 5 | .opt-out
 6 | .DS_Store
 7 | .next
 8 | examples/other/react-autocompletely
 9 | 
10 | # these cause more harm than good
11 | # when working with contributors
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "kentcdodds",
 4 |     "kentcdodds/react",
 5 |     "kentcdodds/jest",
 6 |     "kentcdodds/prettier",
 7 |   ],
 8 |   "rules": {
 9 |     "max-len": "off",
10 |     "max-lines": "off",
11 |     "func-style": "off"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "env",
 5 |       {
 6 |         "targets": {
 7 |           "node": "4.5"
 8 |         }
 9 |       }
10 |     ],
11 |     "react"
12 |   ],
13 |   "plugins": ["transform-class-properties", "transform-object-rest-spread"]
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "env",
 5 |       {
 6 |         "targets": {
 7 |           "node": "4.5"
 8 |         }
 9 |       }
10 |     ],
11 |     "react"
12 |   ],
13 |   "plugins": [
14 |     "babel-macros",
15 |     "transform-class-properties",
16 |     "transform-object-rest-spread"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | cache:
 4 |   directories:
 5 |     - node_modules
 6 | notifications:
 7 |   email: false
 8 | node_js:
 9 |   - '8'
10 | script:
11 |   - npm start validate
12 | after_success:
13 |   - npx codecov
14 | # uncomment this when we're ready to auto-release
15 | #  - npx semantic-release pre && npm publish && npx semantic-release post
16 | branches:
17 |   only:
18 |     - master
19 | 


--------------------------------------------------------------------------------
/examples/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "../node_modules/eslint-config-kentcdodds/possible-errors.js",
 4 |     "../node_modules/eslint-config-kentcdodds/es6/possible-errors.js",
 5 |     "../node_modules/eslint-config-kentcdodds/react.js",
 6 |     "../node_modules/eslint-config-kentcdodds/prettier.js",
 7 |   ],
 8 |   "root": true,
 9 |   "rules": {
10 |     "max-len": "off",
11 |     "no-console": "off",
12 |     "no-alert": "off",
13 |     "react/prop-types": "off",
14 |     "react/jsx-closing-bracket-location": "off"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   testEnvironment: 'jsdom',
 3 |   collectCoverageFrom: ['src/**/*.js'],
 4 |   testPathIgnorePatterns: ['/node_modules/', '/fixtures/'],
 5 |   coveragePathIgnorePatterns: ['/node_modules/', '/fixtures/'],
 6 |   // enable this once we're ready for it...
 7 |   // coverageThreshold: {
 8 |   //   global: {
 9 |   //     branches: 100,
10 |   //     functions: 100,
11 |   //     lines: 100,
12 |   //     statements: 100,
13 |   //   },
14 |   // },
15 |   snapshotSerializers: ['enzyme-to-json/serializer'],
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/next.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   webpack: config => {
 5 |     config.module.rules.push({
 6 |       test: /\.js(\?[^?]*)?$/,
 7 |       loader: 'babel-loader',
 8 |       include: [path.join(__dirname, '../src')],
 9 |       options: {cacheDirectory: false, babelrc: true},
10 |     })
11 | 
12 |     // this is useful if you want to see the transpiled
13 |     // version of the code (like if you're working on the
14 |     // babel plugin or something).
15 |     // config.devtool = 'eval'
16 | 
17 |     return config
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
 1 | # react-autocompletely examples
 2 | 
 3 | This is a Next.js app for the examples. This library is a library of primitives
 4 | and that's hard to communicate the value of with regular docs. We need examples
 5 | and lots of them. Each folder in the `pages` directory is a page for examples
 6 | of `react-autocompletely`. We could really use help adding more and more of
 7 | these examples!
 8 | 
 9 | **Note**: Unfortunately there were some problems trying to import directly
10 | from `../src`, so as a pre-build/start script we copy the `../src` to
11 | `./other/react-autocompletely`.
12 | 


--------------------------------------------------------------------------------
/other/USERS.md:
--------------------------------------------------------------------------------
 1 | # Users
 2 | 
 3 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 4 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 5 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 6 | 
 7 | If you or your company uses this project, add your name to this list! Eventually
 8 | we may have a website to showcase these (wanna build it!?)
 9 | 
10 | > No users have been added yet!
11 | 
12 | <!--
13 | This file should just be a bulleted list like this:
14 | 
15 | - [Company/Project/Person](https://example.com) uses it in [some app](https://example.com)
16 | -->
17 | 


--------------------------------------------------------------------------------
/src/controller.js:
--------------------------------------------------------------------------------
 1 | import {Component} from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import {AUTOCOMPLETE_CONTEXT} from './constants'
 5 | 
 6 | class Controller extends Component {
 7 |   static contextTypes = {
 8 |     [AUTOCOMPLETE_CONTEXT]: PropTypes.object.isRequired,
 9 |   }
10 |   static propTypes = {
11 |     children: PropTypes.func.isRequired,
12 |   }
13 | 
14 |   constructor(props, context) {
15 |     super(props, context)
16 |     this.autocomplete = this.context[AUTOCOMPLETE_CONTEXT]
17 |   }
18 | 
19 |   render() {
20 |     return this.props.children(
21 |       this.autocomplete.getControllerStateAndHelpers(),
22 |     )
23 |   }
24 | }
25 | 
26 | export default Controller
27 | 


--------------------------------------------------------------------------------
/examples/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | import preval from 'preval.macro'
 4 | 
 5 | const routes = preval`
 6 |   const fs = require('fs')
 7 |   const path = require('path')
 8 | 
 9 |   module.exports = fs.readdirSync(__dirname)
10 |     .filter(file => {
11 |       return fs
12 |         .lstatSync(path.join(__dirname, file))
13 |         .isDirectory()
14 |     })
15 | `
16 | 
17 | export default Index
18 | 
19 | function Index() {
20 |   return (
21 |     <div>
22 |       See the examples:
23 |       <ul>
24 |         {routes.map(route =>
25 |           (<li key={route}>
26 |             <Link href={`/${route}`}>
27 |               <a>
28 |                 {route}
29 |               </a>
30 |             </Link>
31 |           </li>),
32 |         )}
33 |       </ul>
34 |     </div>
35 |   )
36 | }
37 | 


--------------------------------------------------------------------------------
/src/__tests__/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {mount} from 'enzyme'
 3 | import Autocomplete from '../'
 4 | 
 5 | function BasicAutocomplete() {
 6 |   const items = ['Red', 'Green', 'Blue', 'Orange', 'Purple']
 7 |   return (
 8 |     <Autocomplete onChange={() => {}}>
 9 |       <Autocomplete.Input />
10 |       <Autocomplete.Menu>
11 |         {() =>
12 |           // prettier is doing weeeeird things to this
13 |           // prettier-ignore
14 |           items
15 |             .map((item, index) => (
16 |               <Autocomplete.Item
17 |                 value={item}
18 |                 index={index}
19 |                 key={item}
20 |               >
21 |                 {item}
22 |               </Autocomplete.Item>
23 |             ))}
24 |       </Autocomplete.Menu>
25 |     </Autocomplete>
26 |   )
27 | }
28 | 
29 | test('renders', () => {
30 |   expect(() => mount(<BasicAutocomplete />)).not.toThrow()
31 | })
32 | 


--------------------------------------------------------------------------------
/examples/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Document, { Head, Main, NextScript } from "next/document";
 3 | import { renderStatic } from "glamor/server";
 4 | 
 5 | export default class MyDocument extends Document {
 6 |   static getInitialProps({ renderPage }) {
 7 |     const page = renderPage();
 8 |     const styles = renderStatic(() => page.html);
 9 |     return Promise.resolve({ ...page, ...styles });
10 |   }
11 | 
12 |   constructor(props) {
13 |     super(props);
14 |     const { __NEXT_DATA__, ids } = props;
15 |     if (ids) {
16 |       __NEXT_DATA__.ids = this.props.ids;
17 |     }
18 |   }
19 | 
20 |   render() {
21 |     return (
22 |       <html lang={this.props.locale}>
23 |         <Head>
24 |           <title>react-autocompletely examples</title>
25 |           <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
26 |           <meta name="viewport" content="width=device-width, initial-scale=1" />
27 |         </Head>
28 |         <body>
29 |           <Main />
30 |           <NextScript />
31 |         </body>
32 |       </html>
33 |     );
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | Copyright (c) 2017 PayPal
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining a copy
 5 | of this software and associated documentation files (the "Software"), to deal
 6 | in the Software without restriction, including without limitation the rights
 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the Software is
 9 | furnished to do so, subject to the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be included in all
12 | copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20 | SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!
 3 | Please make sure that you are familiar with and follow the Code of Conduct for
 4 | this project (found in the CODE_OF_CONDUCT.md file).
 5 | 
 6 | Please fill out this template with all the relevant information so we can
 7 | understand what's going on and fix the issue.
 8 | 
 9 | I'll probably ask you to submit the fix (after giving some direction). If you've
10 | never done that before, that's great! Check this free short video tutorial to
11 | learn how: http://kcd.im/pull-request
12 | -->
13 | 
14 | - `react-autocompletely` version:
15 | - `node` version:
16 | - `npm` (or `yarn`) version:
17 | 
18 | Relevant code or config
19 | 
20 | ```javascript
21 | 
22 | ```
23 | 
24 | What you did:
25 | 
26 | 
27 | 
28 | What happened:
29 | 
30 | <!-- Please provide the full error message/screenshots/anything -->
31 | 
32 | Reproduction repository:
33 | 
34 | <!--
35 | If possible, please create a repository that reproduces the issue with the
36 | minimal amount of code possible.
37 | -->
38 | 
39 | Problem description:
40 | 
41 | 
42 | 
43 | Suggested solution:
44 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!
 3 | 
 4 | Please make sure that you are familiar with and follow the Code of Conduct for
 5 | this project (found in the CODE_OF_CONDUCT.md file).
 6 | 
 7 | Also, please make sure you're familiar with and follow the instructions in the
 8 | contributing guidelines (found in the CONTRIBUTING.md file).
 9 | 
10 | If you're new to contributing to open source projects, you might find this free
11 | video course helpful: http://kcd.im/pull-request
12 | 
13 | Please fill out the information below to expedite the review and (hopefully)
14 | merge of your pull request!
15 | -->
16 | 
17 | <!-- What changes are being made? (What feature/bug is being fixed here?) -->
18 | **What**:
19 | 
20 | <!-- Why are these changes necessary? -->
21 | **Why**:
22 | 
23 | <!-- How were these changes implemented? -->
24 | **How**:
25 | 
26 | <!-- Have you done all of these things?  -->
27 | **Checklist**:
28 | <!-- add "N/A" to the end of each line that's irrelevant to your changes -->
29 | <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
30 | - [ ] Documentation
31 | - [ ] Tests
32 | - [ ] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
33 | - [ ] Added myself to contributors table <!-- this is optional, see the contributing guidelines for instructions -->
34 | 
35 | <!-- feel free to add additional comments -->
36 | 


--------------------------------------------------------------------------------
/examples/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "examples",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "cleanup": "rimraf other/react-autocompletely node_modules/.cache && cpy \"./**/*.js\" ../examples/other/react-autocompletely --cwd=\"../src\" --parents",
 9 |     "prestart": "npm run cleanup -s",
10 |     "start": "next",
11 |     "prebuild": "npm run cleanup -s",
12 |     "build": "next build"
13 |   },
14 |   "keywords": [],
15 |   "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
16 |   "license": "MIT",
17 |   "devDependencies": {
18 |     "babel-core": "^6.25.0",
19 |     "babel-macros": "^0.5.2",
20 |     "babel-plugin-module-alias": "^1.6.0",
21 |     "babel-plugin-transform-class-properties": "^6.24.1",
22 |     "babel-plugin-transform-object-rest-spread": "^6.23.0",
23 |     "babel-preset-env": "^1.6.0",
24 |     "babel-preset-react": "^6.24.1",
25 |     "cpy-cli": "^1.0.1",
26 |     "next": "^2.4.7",
27 |     "preval.macro": "^1.0.1",
28 |     "rimraf": "^2.6.1"
29 |   },
30 |   "dependencies": {
31 |     "axios": "^0.16.2",
32 |     "glamor": "^2.20.37",
33 |     "glamorous": "^3.24.0",
34 |     "match-sorter": "^1.8.0",
35 |     "react": "^15.6.1",
36 |     "react-popper": "^0.7.2",
37 |     "react-apollo": "^1.4.8",
38 |     "react-dom": "^15.6.1",
39 |     "react-instantsearch": "^4.0.9",
40 |     "throttle-debounce": "^1.0.1"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/examples/pages/react-instantsearch/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {InstantSearch, Highlight} from 'react-instantsearch/dom'
 3 | import {connectAutoComplete} from 'react-instantsearch/connectors'
 4 | import Autocomplete from '../../other/react-autocompletely'
 5 | 
 6 | export default Examples
 7 | 
 8 | function RawAutoComplete({refine, hits}) {
 9 |   return (
10 |     <Autocomplete onChange={item => alert(JSON.stringify(item))}>
11 |       <Autocomplete.Input onChange={e => refine(e.target.value)} />
12 |       <Autocomplete.Menu>
13 |         {({selectedItem, highlightedIndex}) =>
14 |           hits.map((item, index) =>
15 |             (<Autocomplete.Item
16 |               value={item}
17 |               index={index}
18 |               key={item.objectID}
19 |               style={{
20 |                 backgroundColor: highlightedIndex === index ? 'gray' : 'white',
21 |                 fontWeight: selectedItem === item ? 'bold' : 'normal',
22 |               }}
23 |             >
24 |               <Highlight attributeName="name" hit={item} tagName="mark" />
25 |             </Autocomplete.Item>),
26 |           )}
27 |       </Autocomplete.Menu>
28 |     </Autocomplete>
29 |   )
30 | }
31 | 
32 | const AutoCompleteWithData = connectAutoComplete(RawAutoComplete)
33 | 
34 | function Examples() {
35 |   return (
36 |     <InstantSearch
37 |       appId="latency"
38 |       apiKey="6be0576ff61c053d5f9a3225e2a90f76"
39 |       indexName="actors"
40 |     >
41 |       Algolia{' '}
42 |       <a href="https://community.algolia.com/react-instantsearch/">
43 |         React InstantSearch
44 |       </a>{' '}
45 |       example
46 |       <AutoCompleteWithData />
47 |     </InstantSearch>
48 |   )
49 | }
50 | 


--------------------------------------------------------------------------------
/other/manual-releases.md:
--------------------------------------------------------------------------------
 1 | # manual-releases
 2 | 
 3 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 4 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 5 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 6 | 
 7 | This project has an automated release set up. So things are only released when there are
 8 | useful changes in the code that justify a release. But sometimes things get messed up one way or another
 9 | and we need to trigger the release ourselves. When this happens, simply bump the number below and commit
10 | that with the following commit message based on your needs:
11 | 
12 | **Major**
13 | 
14 | ```
15 | fix(release): manually release a major version
16 | 
17 | There was an issue with a major release, so this manual-releases.md
18 | change is to release a new major version.
19 | 
20 | Reference: #<the number of a relevant pull request, issue, or commit>
21 | 
22 | BREAKING CHANGE: <mention any relevant breaking changes (this is what triggers the major version change so don't skip this!)>
23 | ```
24 | 
25 | **Minor**
26 | 
27 | ```
28 | feat(release): manually release a minor version
29 | 
30 | There was an issue with a minor release, so this manual-releases.md
31 | change is to release a new minor version.
32 | 
33 | Reference: #<the number of a relevant pull request, issue, or commit>
34 | ```
35 | 
36 | **Patch**
37 | 
38 | ```
39 | fix(release): manually release a patch version
40 | 
41 | There was an issue with a patch release, so this manual-releases.md
42 | change is to release a new patch version.
43 | 
44 | Reference: #<the number of a relevant pull request, issue, or commit>
45 | ```
46 | 
47 | The number of times we've had to do a manual release is: 0
48 | 


--------------------------------------------------------------------------------
/src/item.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import {AUTOCOMPLETE_CONTEXT, MENU_CONTEXT} from './constants'
 5 | import {compose} from './utils'
 6 | 
 7 | class Item extends Component {
 8 |   static contextTypes = {
 9 |     [MENU_CONTEXT]: PropTypes.object.isRequired,
10 |     [AUTOCOMPLETE_CONTEXT]: PropTypes.object.isRequired,
11 |   }
12 |   static propTypes = {
13 |     onMouseEnter: PropTypes.func,
14 |     onClick: PropTypes.func,
15 |     ref: PropTypes.func,
16 |     index: PropTypes.number.isRequired,
17 |     value: PropTypes.any.isRequired,
18 |   }
19 |   constructor(props, context) {
20 |     super(props, context)
21 |     this.menu = this.context[MENU_CONTEXT]
22 |     this.autocomplete = this.context[AUTOCOMPLETE_CONTEXT]
23 |     this.handleMouseEnter = compose(
24 |       this.handleMouseEnter,
25 |       this.props.onMouseEnter,
26 |     )
27 |     this.handleClick = compose(this.handleClick, this.props.onClick)
28 |     this.ref = compose(node => (this.node = node), this.props.ref)
29 |   }
30 |   handleMouseEnter = () => {
31 |     this.menu.setHighlightedIndex(this.props.index)
32 |   }
33 |   handleClick = () => {
34 |     this.autocomplete.selectItemAtIndex(this.props.index)
35 |   }
36 |   componentWillMount() {
37 |     this.menu.addItemInstance(this)
38 |   }
39 |   componentWillUnmount() {
40 |     this.menu.removeItemInstance(this)
41 |   }
42 |   render() {
43 |     // eslint-disable-next-line no-unused-vars
44 |     const {index, value, ...rest} = this.props
45 |     return (
46 |       <div
47 |         {...rest}
48 |         ref={this.ref}
49 |         onMouseEnter={this.handleMouseEnter}
50 |         onClick={this.handleClick}
51 |       />
52 |     )
53 |   }
54 | }
55 | 
56 | export default Item
57 | 


--------------------------------------------------------------------------------
/package-scripts.js:
--------------------------------------------------------------------------------
 1 | const npsUtils = require('nps-utils')
 2 | 
 3 | const series = npsUtils.series
 4 | const concurrent = npsUtils.concurrent
 5 | const rimraf = npsUtils.rimraf
 6 | const crossEnv = npsUtils.crossEnv
 7 | const commonTags = npsUtils.commonTags
 8 | const oneLine = commonTags.oneLine
 9 | 
10 | module.exports = {
11 |   scripts: {
12 |     contributors: {
13 |       add: {
14 |         description: 'When new people contribute to the project, run this',
15 |         script: 'all-contributors add',
16 |       },
17 |       generate: {
18 |         description: 'Update the badge and contributors table',
19 |         script: 'all-contributors generate',
20 |       },
21 |     },
22 |     test: {
23 |       default: crossEnv('NODE_ENV=test jest --coverage'),
24 |       update: crossEnv('NODE_ENV=test jest --coverage --updateSnapshot'),
25 |       watch: crossEnv('NODE_ENV=test jest --watch'),
26 |     },
27 |     build: {
28 |       description: 'delete the dist directory and run babel to build the files',
29 |       script: series(
30 |         rimraf('dist'),
31 |         'babel --copy-files --out-dir dist --ignore __tests__ src'
32 |       ),
33 |     },
34 |     lint: {
35 |       description: 'lint the entire project',
36 |       script: 'eslint .',
37 |     },
38 |     validate: {
39 |       description: oneLine`
40 |         This runs several scripts to make sure things look
41 |         good before committing or on clean install
42 |       `,
43 |       script: concurrent.nps('lint', 'build', 'test'),
44 |     },
45 |   },
46 |   options: {
47 |     silent: false,
48 |   },
49 | }
50 | 
51 | // this is not transpiled
52 | /*
53 |   eslint
54 |   comma-dangle: [
55 |     2,
56 |     {
57 |       arrays: 'always-multiline',
58 |       objects: 'always-multiline',
59 |       functions: 'never'
60 |     }
61 |   ]
62 |  */
63 | 


--------------------------------------------------------------------------------
/examples/pages/axios-request/index.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import axios from 'axios'
 3 | import Autocomplete from '../../other/react-autocompletely'
 4 | 
 5 | const baseEndpoint = 'https://api.github.com/search/repositories?q='
 6 | 
 7 | export default Examples
 8 | 
 9 | function Examples() {
10 |   return (
11 |     <div>
12 |       axios examples
13 |       <AxiosAutocomplete />
14 |     </div>
15 |   )
16 | }
17 | 
18 | class AxiosAutocomplete extends Component {
19 |   constructor(props) {
20 |     super(props)
21 |     this.state = {items: []}
22 |   }
23 | 
24 |   render() {
25 |     return (
26 |       <Autocomplete onChange={item => alert(item)}>
27 |         <Autocomplete.Input
28 |           onChange={event => {
29 |             const inputValue = event.target.value
30 |             if (!inputValue) {
31 |               return
32 |             }
33 |             axios
34 |               .get(baseEndpoint + inputValue)
35 |               .then(response => {
36 |                 const items = response.data.items.map(
37 |                   item => `${item.name} (id:${item.id.toString()})`,
38 |                 ) // Added ID to make it unique
39 |                 this.setState({items})
40 |               })
41 |               .catch(error => {
42 |                 console.log(error)
43 |               })
44 |           }}
45 |         />
46 |         <Autocomplete.Menu>
47 |           {({inputValue, selectedItem, highlightedIndex}) => {
48 |             // prettier-ignore
49 |             return this.state.items.map((item, index) => (
50 |               <Autocomplete.Item
51 |                 value={item}
52 |                 index={index}
53 |                 key={item}
54 |                 style={{
55 |                   backgroundColor: highlightedIndex === index ? 'gray' : 'white',
56 |                   fontWeight: selectedItem === item ? 'bold' : 'normal',
57 |                 }}
58 |               >
59 |                 {item}
60 |               </Autocomplete.Item>
61 |             ))
62 |           }}
63 |         </Autocomplete.Menu>
64 |       </Autocomplete>
65 |     )
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-autocompletely",
 3 |   "version": "0.0.0-semantically-released",
 4 |   "description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components",
 5 |   "main": "dist/index.js",
 6 |   "engines": {
 7 |     "node": "> 4",
 8 |     "npm": "> 3"
 9 |   },
10 |   "scripts": {
11 |     "start": "nps",
12 |     "test": "nps test",
13 |     "precommit": "lint-staged && opt --in pre-commit --exec \"npm start validate\""
14 |   },
15 |   "files": ["dist"],
16 |   "keywords": [],
17 |   "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
18 |   "license": "MIT",
19 |   "dependencies": {
20 |     "mitt": "^1.1.2"
21 |   },
22 |   "peerDependencies": {
23 |     "react": ">=15",
24 |     "prop-types": ">=15"
25 |   },
26 |   "devDependencies": {
27 |     "all-contributors-cli": "^4.3.0",
28 |     "babel-cli": "^6.24.1",
29 |     "babel-jest": "^20.0.3",
30 |     "babel-plugin-transform-class-properties": "^6.24.1",
31 |     "babel-plugin-transform-object-rest-spread": "^6.23.0",
32 |     "babel-preset-env": "^1.6.0",
33 |     "babel-preset-react": "^6.24.1",
34 |     "babel-register": "^6.24.1",
35 |     "enzyme": "^2.9.1",
36 |     "enzyme-to-json": "^1.5.1",
37 |     "eslint": "^4.2.0",
38 |     "eslint-config-kentcdodds": "^12.4.2",
39 |     "husky": "^0.14.3",
40 |     "jest": "^20.0.4",
41 |     "lint-staged": "^4.0.1",
42 |     "nps": "^5.4.0",
43 |     "nps-utils": "^1.2.0",
44 |     "opt-cli": "^1.5.1",
45 |     "prettier-eslint-cli": "^4.1.1",
46 |     "prop-types": "^15.5.10",
47 |     "react": "^15.6.1",
48 |     "react-dom": "^15.6.1",
49 |     "react-test-renderer": "^15.6.1"
50 |   },
51 |   "lint-staged": {
52 |     "*.js": [
53 |       "prettier-eslint --write --no-semi --single-quote --trailing-comma=all --no-bracket-spacing",
54 |       "git add"
55 |     ]
56 |   },
57 |   "repository": {
58 |     "type": "git",
59 |     "url": "https://github.com/paypal/react-autocompletely.git"
60 |   },
61 |   "bugs": {
62 |     "url": "https://github.com/paypal/react-autocompletely/issues"
63 |   },
64 |   "homepage": "https://github.com/paypal/react-autocompletely#readme"
65 | }
66 | 


--------------------------------------------------------------------------------
/examples/pages/apollo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {
 3 |   ApolloClient,
 4 |   ApolloProvider,
 5 |   createNetworkInterface,
 6 |   gql,
 7 |   graphql,
 8 | } from 'react-apollo'
 9 | import Autocomplete from '../../other/react-autocompletely'
10 | 
11 | export default Examples
12 | 
13 | const networkInterface = createNetworkInterface({
14 |   uri: 'https://api.graph.cool/simple/v1/cj5k7w90bjt2i0122z6v0syvu',
15 | })
16 | 
17 | const client = new ApolloClient({
18 |   networkInterface,
19 | })
20 | 
21 | function Examples() {
22 |   return (
23 |     <ApolloProvider client={client}>
24 |       <div>
25 |         apollo examples
26 |         <ApolloAutocomplete />
27 |       </div>
28 |     </ApolloProvider>
29 |   )
30 | }
31 | 
32 | function ApolloAutocomplete() {
33 |   // prettier-ignore
34 |   return (
35 |     <Autocomplete onChange={item => alert(item)}>
36 |       <Autocomplete.Input />
37 |       <Autocomplete.Menu>
38 |         {({inputValue, selectedItem, highlightedIndex}) => (
39 |           <ApolloAutocompleteMenuWithData
40 |             {...{inputValue, selectedItem, highlightedIndex}}
41 |           />
42 |         )}
43 |       </Autocomplete.Menu>
44 |     </Autocomplete>
45 |   )
46 | }
47 | 
48 | function ApolloAutocompleteMenu({
49 |   data: {allColors, loading},
50 |   selectedItem,
51 |   highlightedIndex,
52 | }) {
53 |   if (loading) {
54 |     return <div>Loading...</div>
55 |   }
56 |   // prettier-ignore
57 |   return (
58 |     <div>
59 |       {allColors.map(({name: item}, index) => (
60 |         <Autocomplete.Item
61 |           value={item}
62 |           index={index}
63 |           key={item}
64 |           style={{
65 |             backgroundColor: highlightedIndex === index ? 'gray' : 'white',
66 |             fontWeight: selectedItem === item ? 'bold' : 'normal',
67 |           }}
68 |         >
69 |           {item}
70 |         </Autocomplete.Item>
71 |       ))}
72 |     </div>
73 |   )
74 | }
75 | 
76 | const SEARCH_COLORS = gql`
77 |   query AllColors($inputValue: String!) {
78 |     allColors(filter: {name_contains: $inputValue}) {
79 |       name
80 |     }
81 |   }
82 | `
83 | 
84 | const ApolloAutocompleteMenuWithData = graphql(SEARCH_COLORS)(
85 |   ApolloAutocompleteMenu,
86 | )
87 | 


--------------------------------------------------------------------------------
/examples/pages/react-popper/index.js:
--------------------------------------------------------------------------------
 1 | import React, {PureComponent} from 'react'
 2 | import {Manager, Target, Popper} from 'react-popper'
 3 | import Autocomplete from '../../other/react-autocompletely'
 4 | 
 5 | export default Examples
 6 | 
 7 | function Examples() {
 8 |   return (
 9 |     <div
10 |       style={{
11 |         display: 'flex',
12 |         flexDirection: 'column',
13 |         height: 'calc(100vh - 8px * 2)',
14 |       }}
15 |     >
16 |       react-popper integration example
17 |       <ReactPopperAutocomplete />
18 |     </div>
19 |   )
20 | }
21 | 
22 | class ReactPopperAutocomplete extends PureComponent {
23 |   static defaultProps = {
24 |     items: [
25 |       'top',
26 |       'top-start',
27 |       'top-end',
28 |       'bottom-start',
29 |       'bottom',
30 |       'bottom-end',
31 |     ],
32 |   }
33 |   state = {
34 |     selected: 'bottom-start',
35 |   }
36 | 
37 |   render() {
38 |     return (
39 |       <div
40 |         style={{
41 |           flex: 1,
42 |           display: 'flex',
43 |           alignItems: 'center',
44 |           justifyContent: 'center',
45 |         }}
46 |       >
47 |         <Manager>
48 |           <Autocomplete
49 |             onChange={selected => this.setState({selected})}
50 |             style={{display: 'inline-block', position: 'relative'}}
51 |           >
52 |             <Target>
53 |               <Autocomplete.Input />
54 |             </Target>
55 |             <Autocomplete.Menu>
56 |               {({inputValue, selectedItem, highlightedIndex}) =>
57 |                 (<Popper
58 |                   placement={this.state.selected}
59 |                   style={{backgroundColor: 'orange'}}
60 |                 >
61 |                   {this.props.items
62 |                     .filter(
63 |                       i =>
64 |                         !inputValue ||
65 |                         i.toLowerCase().includes(inputValue.toLowerCase()),
66 |                     )
67 |                     .map((item, index) =>
68 |                       (<Autocomplete.Item
69 |                         value={item}
70 |                         index={index}
71 |                         key={item}
72 |                         style={{
73 |                           backgroundColor:
74 |                             highlightedIndex === index
75 |                               ? 'rgba(0, 0, 0, .2)'
76 |                               : 'transparent',
77 |                           fontWeight: selectedItem === item ? 'bold' : 'normal',
78 |                         }}
79 |                       >
80 |                         {item}
81 |                       </Autocomplete.Item>),
82 |                     )}
83 |                 </Popper>)}
84 |             </Autocomplete.Menu>
85 |           </Autocomplete>
86 |         </Manager>
87 |       </div>
88 |     )
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "projectName": "react-autocompletely",
 3 |   "projectOwner": "paypal",
 4 |   "files": [
 5 |     "README.md"
 6 |   ],
 7 |   "imageSize": 100,
 8 |   "commit": false,
 9 |   "contributors": [
10 |     {
11 |       "login": "kentcdodds",
12 |       "name": "Kent C. Dodds",
13 |       "avatar_url": "https://avatars.githubusercontent.com/u/1500684?v=3",
14 |       "profile": "https://kentcdodds.com",
15 |       "contributions": [
16 |         "code",
17 |         "doc",
18 |         "infra",
19 |         "test"
20 |       ]
21 |     },
22 |     {
23 |       "login": "jtmthf",
24 |       "name": "Jack Moore",
25 |       "avatar_url": "https://avatars1.githubusercontent.com/u/8162598?v=4",
26 |       "profile": "https://github.com/jtmthf",
27 |       "contributions": [
28 |         "example"
29 |       ]
30 |     },
31 |     {
32 |       "login": "souporserious",
33 |       "name": "Travis Arnold",
34 |       "avatar_url": "https://avatars1.githubusercontent.com/u/2762082?v=4",
35 |       "profile": "http://travisrayarnold.com",
36 |       "contributions": [
37 |         "code",
38 |         "doc"
39 |       ]
40 |     },
41 |     {
42 |       "login": "tizmagik",
43 |       "name": "Jeremy Gayed",
44 |       "avatar_url": "https://avatars2.githubusercontent.com/u/244704?v=4",
45 |       "profile": "http://www.jeremygayed.com",
46 |       "contributions": [
47 |         "example"
48 |       ]
49 |     },
50 |     {
51 |       "login": "Haroenv",
52 |       "name": "Haroen Viaene",
53 |       "avatar_url": "https://avatars3.githubusercontent.com/u/6270048?v=4",
54 |       "profile": "https://haroen.me",
55 |       "contributions": [
56 |         "example"
57 |       ]
58 |     },
59 |     {
60 |       "login": "rezof",
61 |       "name": "monssef",
62 |       "avatar_url": "https://avatars2.githubusercontent.com/u/15073300?v=4",
63 |       "profile": "https://github.com/rezof",
64 |       "contributions": [
65 |         "example"
66 |       ]
67 |     },
68 |     {
69 |       "login": "FezVrasta",
70 |       "name": "Federico Zivolo",
71 |       "avatar_url": "https://avatars2.githubusercontent.com/u/5382443?v=4",
72 |       "profile": "https://fezvrasta.github.io",
73 |       "contributions": [
74 |         "doc"
75 |       ]
76 |     },
77 |     {
78 |       "login": "divyenduz",
79 |       "name": "Divyendu Singh",
80 |       "avatar_url": "https://avatars3.githubusercontent.com/u/746482?v=4",
81 |       "profile": "https://divyendusingh.com",
82 |       "contributions": [
83 |         "example"
84 |       ]
85 |     },
86 |     {
87 |       "login": "salmanmanekia",
88 |       "name": "Muhammad Salman",
89 |       "avatar_url": "https://avatars1.githubusercontent.com/u/841955?v=4",
90 |       "profile": "https://github.com/salmanmanekia",
91 |       "contributions": [
92 |         "code"
93 |       ]
94 |     }
95 |   ]
96 | }
97 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Thanks for being willing to contribute!
 4 | 
 5 | **Working on your first Pull Request?** You can learn how from this *free* series
 6 | [How to Contribute to an Open Source Project on GitHub][egghead]
 7 | 
 8 | ## Project setup
 9 | 
10 | 1. Fork and clone the repo
11 | 2. `$ npm install` to install dependencies
12 | 3. `$ npm start validate` to validate you've got it working
13 | 4. Create a branch for your PR
14 | 
15 | This project uses [`nps`][nps] and you can run `npm start help` to see what
16 | scripts are available.
17 | 
18 | > Tip: Keep your `master` branch pointing at the original repository and make
19 | > pull requests from branches on your fork. To do this, run:
20 | >
21 | > ```
22 | > git remote add upstream https://github.com/paypal/react-autocompletely.git
23 | > git fetch upstream
24 | > git branch --set-upstream-to=upstream/master master
25 | > ```
26 | >
27 | > This will add the original repository as a "remote" called "upstream,"
28 | > Then fetch the git information from that remote, then set your local `master`
29 | > branch to use the upstream master branch whenever you run `git pull`.
30 | > Then you can make all of your pull request branches based on this `master`
31 | > branch. Whenever you want to update your version of `master`, do a regular
32 | > `git pull`.
33 | 
34 | ## Add yourself as a contributor
35 | 
36 | This project follows the [all contributors][all-contributors] specification.
37 | To add yourself to the table of contributors on the README.md, please use the
38 | automated script as part of your PR:
39 | 
40 | ```console
41 | npm start contributors.add
42 | ```
43 | 
44 | Follow the prompt. If you've already added yourself to the list and are making
45 | a new type of contribution, you can run it again and select the added
46 | contribution type.
47 | 
48 | ## Committing and Pushing changes
49 | 
50 | This project uses [`semantic-release`][semantic-release] to do automatic
51 | releases and generate a changelog based on the commit history. So we follow
52 | [a convention][convention] for commit messages. You don't have to follow this
53 | convention if you don't like to. Just know that when we merge your commit, we'll
54 | probably use "Squash and Merge" so we can change the commit message :)
55 | 
56 | Please make sure to run the tests before you commit your changes. You can run
57 | `npm start test.update` which will update any snapshots that need updating.
58 | Make sure to include those changes (if they exist) in your commit.
59 | 
60 | ### opt into git hooks
61 | 
62 | There are git hooks set up with this project that are automatically installed
63 | when you install dependencies. They're really handy, but are turned off by
64 | default (so as to not hinder new contributors). You can opt into these by
65 | creating a file called `.opt-in` at the root of the project and putting this
66 | inside:
67 | 
68 | ```
69 | pre-commit
70 | ```
71 | 
72 | ## Help needed
73 | 
74 | Please checkout the [the open issues][issues]
75 | 
76 | Also, please watch the repo and respond to questions/bug reports/feature requests! Thanks!
77 | 
78 | [egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
79 | [semantic-release]: https://npmjs.com/package/semantic-release
80 | [convention]: https://github.com/conventional-changelog/conventional-changelog-angular/blob/ed32559941719a130bb0327f886d6a32a8cbc2ba/convention.md
81 | [all-contributors]: https://github.com/kentcdodds/all-contributors
82 | [issues]: https://github.com/paypal/react-autocompletely/issues
83 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * This is a utilities file for the autocomplete component.
  3 |  * Part of the reason it exists is to be able to stub out
  4 |  * some things that don't work with jsdom.
  5 |  */
  6 | 
  7 | /**
  8 |  * This will take a node and select the given range of text from start to end in a
  9 |  * way that works for iOS
 10 |  * @param  {HTMLInputElement} node - the input to select the text in
 11 |  * @param  {Number} start - the index to start the selection
 12 |  * @param  {Number} end - the index to end the selection
 13 |  */
 14 | function selectRangeOfText(node, start, end) {
 15 |   // select all the text, but do it on the next tick because iOS has issues otherwise
 16 |   setTimeout(() => {
 17 |     // we're using setSelectionRange rather than select because select doesn't work with iOS
 18 |     node.setSelectionRange(start, end)
 19 |   })
 20 | }
 21 | 
 22 | /**
 23 |  * This will take a node and select all the text in it in a way that works for iOS
 24 |  * @param {HTMLInputElement} node - the input to select the text in
 25 |  */
 26 | function selectAllText(node) {
 27 |   selectRangeOfText(node, 0, node.value.length)
 28 | }
 29 | 
 30 | /**
 31 |  * This moves the cursor position to the end of the text in the input node in a way
 32 |  * that works on iOS
 33 |  * @param {HTMLInputElement} node - the input to set the cursor position in
 34 |  */
 35 | function moveCursorToTheEnd(node) {
 36 |   const {length} = node.value
 37 |   node.setSelectionRange(length, length)
 38 | }
 39 | 
 40 | /**
 41 |  * Accepts a parameter and returns it if it's a function
 42 |  * or a noop function if it's not. This allows us to
 43 |  * accept a callback, but not worry about it if it's not
 44 |  * passed.
 45 |  * @param {Function} cb the callback
 46 |  * @return {Function} a function
 47 |  */
 48 | function cbToCb(cb) {
 49 |   return typeof cb === 'function' ? cb : noop
 50 | }
 51 | function noop() {}
 52 | 
 53 | /**
 54 |  * Get the closest parent element that scrolls
 55 |  * @param {HTMLElement} node - the child element to start searching for scroll parent at
 56 |  * @return {HTMLElement} the closest parentNode that scrolls
 57 |  */
 58 | function getScrollParent(node) {
 59 |   if (node === null) {
 60 |     return null
 61 |   } else if (node.scrollHeight > node.clientHeight) {
 62 |     return node
 63 |   } else {
 64 |     return getScrollParent(node.parentNode)
 65 |   }
 66 | }
 67 | 
 68 | /**
 69 |  * Scroll node into view
 70 |  * @param {HTMLInputElement} node - the element that should scroll into view
 71 |  */
 72 | function scrollIntoView(node) {
 73 |   const scrollParent = getScrollParent(node)
 74 |   if (scrollParent) {
 75 |     const nodeTop = node.offsetTop - scrollParent.offsetTop
 76 |     if (scrollParent.scrollTop >= nodeTop) {
 77 |       scrollParent.scrollTop = nodeTop
 78 |     } else if (
 79 |       nodeTop + node.offsetHeight >=
 80 |       scrollParent.scrollTop + scrollParent.offsetHeight
 81 |     ) {
 82 |       scrollParent.scrollTop =
 83 |         nodeTop + node.offsetHeight - scrollParent.offsetHeight
 84 |     }
 85 |   }
 86 | }
 87 | 
 88 | function debounce(fn, time) {
 89 |   let timeoutId
 90 |   return wrapper
 91 |   function wrapper(...args) {
 92 |     if (timeoutId) {
 93 |       clearTimeout(timeoutId)
 94 |     }
 95 |     timeoutId = setTimeout(() => {
 96 |       timeoutId = null
 97 |       fn(...args)
 98 |     }, time)
 99 |   }
100 | }
101 | 
102 | function compose(...fns) {
103 |   return (...args) => fns.forEach(fn => fn && fn(...args))
104 | }
105 | 
106 | export {
107 |   cbToCb,
108 |   compose,
109 |   debounce,
110 |   moveCursorToTheEnd,
111 |   scrollIntoView,
112 |   selectAllText,
113 |   selectRangeOfText,
114 | }
115 | 


--------------------------------------------------------------------------------
/src/menu-status.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react'
  2 | import PropTypes from 'prop-types'
  3 | 
  4 | import {MENU_CONTEXT} from './constants'
  5 | import {debounce} from './utils'
  6 | 
  7 | class MenuStatus extends Component {
  8 |   static contextTypes = {
  9 |     [MENU_CONTEXT]: PropTypes.object.isRequired,
 10 |   }
 11 | 
 12 |   static defaultProps = {
 13 |     getA11yStatusMessage({resultCount, highlightedItem, getInputValue}) {
 14 |       if (!resultCount) {
 15 |         return 'No results.'
 16 |       } else if (!highlightedItem) {
 17 |         return `${resultCount} ${resultCount === 1 ?
 18 |           'result is' :
 19 |           'results are'} available, use up and down arrow keys to navigate.`
 20 |       }
 21 |       return getInputValue(highlightedItem)
 22 |     },
 23 |   }
 24 | 
 25 |   static propTypes = {
 26 |     highlightedIndex: PropTypes.number,
 27 |     inputValue: PropTypes.string,
 28 |     getA11yStatusMessage: PropTypes.func,
 29 |   }
 30 | 
 31 |   constructor(props, context) {
 32 |     super(props, context)
 33 |     this.menu = this.context[MENU_CONTEXT]
 34 |     this.updateStatus = debounce(this.updateStatus, 200)
 35 |   }
 36 |   // have to do this because updateStatus is debounced
 37 |   _isMounted = false
 38 |   state = {statuses: []}
 39 | 
 40 |   updateStatus = (highlightedIndex = this.props.highlightedIndex) => {
 41 |     if (!this._isMounted) {
 42 |       return
 43 |     }
 44 |     const {
 45 |       items = [],
 46 |       getItemFromIndex,
 47 |       autocomplete: {getInputValue},
 48 |     } = this.menu
 49 |     const {statuses} = this.state
 50 |     const resultCount = items.length
 51 |     const itemInstance = getItemFromIndex(highlightedIndex) || {
 52 |       props: {},
 53 |     }
 54 |     const status = this.props.getA11yStatusMessage({
 55 |       resultCount,
 56 |       highlightedItem: itemInstance.props.value,
 57 |       getInputValue,
 58 |     })
 59 |     const isSameAsLast = statuses[statuses.length - 1] === status
 60 |     if (isSameAsLast) {
 61 |       this.setState(({statuses: currentStatuses}) => ({
 62 |         statuses: [...currentStatuses, status],
 63 |       }))
 64 |     } else {
 65 |       this.setState({statuses: [status]})
 66 |     }
 67 |   }
 68 | 
 69 |   componentWillReceiveProps(nextProps) {
 70 |     if (
 71 |       nextProps.highlightedIndex !== this.props.highlightedIndex ||
 72 |       this.props.inputValue !== nextProps.inputValue
 73 |     ) {
 74 |       this.updateStatus(nextProps.highlightedIndex)
 75 |     }
 76 |   }
 77 | 
 78 |   componentDidMount() {
 79 |     this._isMounted = true
 80 |     this.menu.emitter.on('changeHighlighedIndex', this.updateStatus)
 81 |     this.updateStatus()
 82 |   }
 83 | 
 84 |   componentWillUnmount() {
 85 |     this._isMounted = false
 86 |     this.menu.emitter.off('changeHighlighedIndex', this.updateStatus)
 87 |   }
 88 | 
 89 |   renderStatus = (status, index) => {
 90 |     return (
 91 |       <div
 92 |         style={{
 93 |           display: index === this.state.statuses.length - 1 ? 'block' : 'none',
 94 |         }}
 95 |         key={index}
 96 |       >
 97 |         {status}
 98 |       </div>
 99 |     )
100 |   }
101 | 
102 |   render() {
103 |     return (
104 |       <div
105 |         role="status"
106 |         aria-live="assertive"
107 |         aria-relevant="additions text"
108 |         style={{
109 |           border: '0',
110 |           clip: 'rect(0 0 0 0)',
111 |           height: '1px',
112 |           margin: '-1px',
113 |           overflow: 'hidden',
114 |           padding: '0',
115 |           position: 'absolute',
116 |           width: '1px',
117 |         }}
118 |       >
119 |         {this.state.statuses.map(this.renderStatus)}
120 |       </div>
121 |     )
122 |   }
123 | }
124 | 
125 | export default MenuStatus
126 | 


--------------------------------------------------------------------------------
/other/MAINTAINING.md:
--------------------------------------------------------------------------------
 1 | # Maintaining
 2 | 
 3 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 4 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 5 | **Table of Contents**
 6 | 
 7 | - [Code of Conduct](#code-of-conduct)
 8 | - [Issues](#issues)
 9 | - [Pull Requests](#pull-requests)
10 | - [Release](#release)
11 | - [Thanks!](#thanks)
12 | 
13 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
14 | 
15 | This is documentation for maintainers of this project.
16 | 
17 | ## Code of Conduct
18 | 
19 | Please review, understand, and be an example of it. Violations of the code of conduct are
20 | taken seriously, even (especially) for maintainers.
21 | 
22 | ## Issues
23 | 
24 | We want to support and build the community. We do that best by helping people learn to solve
25 | their own problems. We have an issue template and hopefully most folks follow it. If it's
26 | not clear what the issue is, invite them to create a minimal reproduction of what they're trying
27 | to accomplish or the bug they think they've found.
28 | 
29 | Once it's determined that a code change is necessary, point people to
30 | [makeapullrequest.com](http://makeapullrequest.com) and invite them to make a pull request.
31 | If they're the one who needs the feature, they're the one who can build it. If they need
32 | some hand holding and you have time to lend a hand, please do so. It's an investment into
33 | another human being, and an investment into a potential maintainer.
34 | 
35 | Remember that this is open source, so the code is not yours, it's ours. If someone needs a change
36 | in the codebase, you don't have to make it happen yourself. Commit as much time to the project
37 | as you want/need to. Nobody can ask any more of you than that.
38 | 
39 | ## Pull Requests
40 | 
41 | As a maintainer, you're fine to make your branches on the main repo or on your own fork. Either
42 | way is fine.
43 | 
44 | When we receive a pull request, a travis build is kicked off automatically (see the `.travis.yml`
45 | for what runs in the travis build). We avoid merging anything that breaks the travis build.
46 | 
47 | Please review PRs and focus on the code rather than the individual. You never know when this is
48 | someone's first ever PR and we want their experience to be as positive as possible, so be
49 | uplifting and constructive.
50 | 
51 | When you merge the pull request, 99% of the time you should use the
52 | [Squash and merge](https://help.github.com/articles/merging-a-pull-request/) feature. This keeps
53 | our git history clean, but more importantly, this allows us to make any necessary changes to the
54 | commit message so we release what we want to release. See the next section on Releases for more
55 | about that.
56 | 
57 | ## Release
58 | 
59 | Our releases are automatic. They happen whenever code lands into `master`. A travis build gets
60 | kicked off and if it's successful, a tool called
61 | [`semantic-release`](https://github.com/semantic-release/semantic-release) is used to
62 | automatically publish a new release to npm as well as a changelog to GitHub. It is only able to
63 | determine the version and whether a release is necessary by the git commit messages. With this
64 | in mind, **please brush up on [the commit message convention][commit] which drives our releases.**
65 | 
66 | > One important note about this: Please make sure that commit messages do NOT contain the words
67 | > "BREAKING CHANGE" in them unless we want to push a major version. I've been burned by this
68 | > more than once where someone will include "BREAKING CHANGE: None" and it will end up releasing
69 | > a new major version. Not a huge deal honestly, but kind of annoying...
70 | 
71 | ## Thanks!
72 | 
73 | Thank you so much for helping to maintain this project!
74 | 
75 | [commit]: https://github.com/conventional-changelog-archived-repos/conventional-changelog-angular/blob/ed32559941719a130bb0327f886d6a32a8cbc2ba/convention.md
76 | 


--------------------------------------------------------------------------------
/src/input.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react'
  2 | import PropTypes from 'prop-types'
  3 | 
  4 | import {AUTOCOMPLETE_CONTEXT} from './constants'
  5 | import {compose, moveCursorToTheEnd} from './utils'
  6 | 
  7 | class Input extends Component {
  8 |   static contextTypes = {
  9 |     [AUTOCOMPLETE_CONTEXT]: PropTypes.object.isRequired,
 10 |   }
 11 |   static ignoreKeys = ['Shift', 'Meta', 'Alt', 'Control']
 12 |   static propTypes = {
 13 |     onChange: PropTypes.func,
 14 |     onKeyDown: PropTypes.func,
 15 |     onBlur: PropTypes.func,
 16 |     getValue: PropTypes.func,
 17 |     defaultValue: PropTypes.string,
 18 |   }
 19 |   static defaultProps = {
 20 |     getValue: i => String(i),
 21 |   }
 22 |   constructor(props, context) {
 23 |     super(props, context)
 24 |     this.autocomplete = this.context[AUTOCOMPLETE_CONTEXT]
 25 |     this.autocomplete.input = this
 26 |     this.handleChange = compose(this.handleChange, this.props.onChange)
 27 |     this.handleKeyDown = compose(this.handleKeyDown, this.props.onKeyDown)
 28 |     this.handleBlur = compose(this.handleBlur, this.props.onBlur)
 29 |   }
 30 | 
 31 |   keyDownHandlers = {
 32 |     ArrowDown(event) {
 33 |       event.preventDefault()
 34 |       const amount = event.shiftKey ? 5 : 1
 35 |       this.autocomplete.moveHighlightedIndex(amount)
 36 |     },
 37 | 
 38 |     ArrowUp(event) {
 39 |       event.preventDefault()
 40 |       const amount = event.shiftKey ? -5 : -1
 41 |       this.autocomplete.moveHighlightedIndex(amount)
 42 |     },
 43 | 
 44 |     Enter(event) {
 45 |       event.preventDefault()
 46 |       this.autocomplete.selectHighlightedItem()
 47 |     },
 48 | 
 49 |     Escape(event) {
 50 |       event.preventDefault()
 51 |       this.autocomplete.reset()
 52 |     },
 53 |   }
 54 | 
 55 |   handleKeyDown = event => {
 56 |     if (event.key && this.keyDownHandlers[event.key]) {
 57 |       this.keyDownHandlers[event.key].call(this, event)
 58 |     } else if (!Input.ignoreKeys.includes(event.key)) {
 59 |       this.autocomplete.open()
 60 |       this.autocomplete.highlightIndex(
 61 |         this.autocomplete.state.menu.props.defaultHighlightedIndex,
 62 |       )
 63 |     }
 64 |   }
 65 | 
 66 |   handleChange = event => {
 67 |     this.updateInputValue(event.target.value)
 68 |   }
 69 | 
 70 |   handleBlur = () => {
 71 |     if (!this.autocomplete.isMouseDown) {
 72 |       this.autocomplete.reset()
 73 |     }
 74 |   }
 75 | 
 76 |   reset = () => {
 77 |     moveCursorToTheEnd(this._inputNode)
 78 |   }
 79 | 
 80 |   focusInput = () => {
 81 |     this._inputNode.focus()
 82 |   }
 83 | 
 84 |   getValue = item => {
 85 |     return item ? this.props.getValue(item) : null
 86 |   }
 87 | 
 88 |   componentWillUnmount() {
 89 |     if (this.autocomplete.input === this) {
 90 |       this.autocomplete.input = null
 91 |     }
 92 |   }
 93 | 
 94 |   componentDidMount() {
 95 |     if (this.props.defaultValue) {
 96 |       this.updateInputValue(this.props.defaultValue)
 97 |     }
 98 |   }
 99 | 
100 |   updateInputValue(value) {
101 |     if (this.autocomplete.state.inputValue !== value) {
102 |       this.autocomplete.setState({
103 |         inputValue: value,
104 |       })
105 |     }
106 |   }
107 | 
108 |   render() {
109 |     // eslint-disable-next-line no-unused-vars
110 |     const {defaultValue, getValue, ...rest} = this.props
111 |     const {inputValue, selectedItem, isOpen} = this.autocomplete.state
112 |     const selectedItemValue = this.getValue(selectedItem)
113 |     return (
114 |       <input
115 |         role="combobox"
116 |         aria-autocomplete="list"
117 |         aria-expanded={isOpen}
118 |         autoComplete="off"
119 |         value={(inputValue === null ? selectedItemValue : inputValue) || ''}
120 |         {...rest}
121 |         onChange={this.handleChange}
122 |         onKeyDown={this.handleKeyDown}
123 |         onBlur={this.handleBlur}
124 |         ref={node => (this._inputNode = node)}
125 |       />
126 |     )
127 |   }
128 | }
129 | 
130 | export default Input
131 | 


--------------------------------------------------------------------------------
/other/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 4 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 5 | **Table of Contents**
 6 | 
 7 | - [Our Pledge](#our-pledge)
 8 | - [Our Standards](#our-standards)
 9 | - [Our Responsibilities](#our-responsibilities)
10 | - [Scope](#scope)
11 | - [Enforcement](#enforcement)
12 | - [Attribution](#attribution)
13 | 
14 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
15 | 
16 | ## Our Pledge
17 | 
18 | In the interest of fostering an open and welcoming environment, we as
19 | contributors and maintainers pledge to making participation in our project and
20 | our community a harassment-free experience for everyone, regardless of age, body
21 | size, disability, ethnicity, gender identity and expression, level of experience,
22 | nationality, personal appearance, race, religion, or sexual identity and
23 | orientation.
24 | 
25 | ## Our Standards
26 | 
27 | Examples of behavior that contributes to creating a positive environment
28 | include:
29 | 
30 | * Using welcoming and inclusive language
31 | * Being respectful of differing viewpoints and experiences
32 | * Gracefully accepting constructive criticism
33 | * Focusing on what is best for the community
34 | * Showing empathy towards other community members
35 | 
36 | Examples of unacceptable behavior by participants include:
37 | 
38 | * The use of sexualized language or imagery and unwelcome sexual attention or
39 | advances
40 | * Trolling, insulting/derogatory comments, and personal or political attacks
41 | * Public or private harassment
42 | * Publishing others' private information, such as a physical or electronic
43 |   address, without explicit permission
44 | * Other conduct which could reasonably be considered inappropriate in a
45 |   professional setting
46 | 
47 | ## Our Responsibilities
48 | 
49 | Project maintainers are responsible for clarifying the standards of acceptable
50 | behavior and are expected to take appropriate and fair corrective action in
51 | response to any instances of unacceptable behavior.
52 | 
53 | Project maintainers have the right and responsibility to remove, edit, or
54 | reject comments, commits, code, wiki edits, issues, and other contributions
55 | that are not aligned to this Code of Conduct, or to ban temporarily or
56 | permanently any contributor for other behaviors that they deem inappropriate,
57 | threatening, offensive, or harmful.
58 | 
59 | ## Scope
60 | 
61 | This Code of Conduct applies both within project spaces and in public spaces
62 | when an individual is representing the project or its community. Examples of
63 | representing a project or community include using an official project e-mail
64 | address, posting via an official social media account, or acting as an appointed
65 | representative at an online or offline event. Representation of a project may be
66 | further defined and clarified by project maintainers.
67 | 
68 | ## Enforcement
69 | 
70 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
71 | reported by contacting the project team at kent+coc@doddsfamily.us. All
72 | complaints will be reviewed and investigated and will result in a response that
73 | is deemed necessary and appropriate to the circumstances. The project team is
74 | obligated to maintain confidentiality with regard to the reporter of an incident.
75 | Further details of specific enforcement policies may be posted separately.
76 | 
77 | Project maintainers who do not follow or enforce the Code of Conduct in good
78 | faith may face temporary or permanent repercussions as determined by other
79 | members of the project's leadership.
80 | 
81 | ## Attribution
82 | 
83 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
84 | available at [http://contributor-covenant.org/version/1/4][version]
85 | 
86 | [homepage]: http://contributor-covenant.org
87 | [version]: http://contributor-covenant.org/version/1/4/
88 | 


--------------------------------------------------------------------------------
/examples/pages/basic/index.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react'
  2 | import glamorous, {Div} from 'glamorous'
  3 | import Autocomplete from '../../other/react-autocompletely'
  4 | 
  5 | class Examples extends Component {
  6 |   state = {
  7 |     selectedColor: '',
  8 |   }
  9 | 
 10 |   changeHandler(selectedColor) {
 11 |     this.setState({selectedColor})
 12 |   }
 13 | 
 14 |   render() {
 15 |     const items = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
 16 |     return (
 17 |       <div>
 18 |         <Div
 19 |           css={{
 20 |             margin: '50px auto',
 21 |             maxWidth: 600,
 22 |             textAlign: 'center',
 23 |           }}
 24 |         >
 25 |           <h2>basic example</h2>
 26 |           <Div display="flex" justifyContent="center">
 27 |             <span
 28 |               style={{
 29 |                 height: '2em',
 30 |                 width: '2em',
 31 |                 padding: '.3em',
 32 |                 borderRadius: '5px',
 33 |                 marginRight: '.5em',
 34 |                 backgroundColor: this.state.selectedColor
 35 |                   ? this.state.selectedColor
 36 |                   : 'transparent',
 37 |               }}
 38 |             />
 39 |             <BasicAutocomplete
 40 |               items={items}
 41 |               onChange={this.changeHandler.bind(this)}
 42 |             />
 43 |           </Div>
 44 |         </Div>
 45 |       </div>
 46 |     )
 47 |   }
 48 | }
 49 | 
 50 | const Item = glamorous(Autocomplete.Item, {
 51 |   rootEl: 'div',
 52 |   forwardProps: ['index', 'value', 'key'],
 53 | })(
 54 |   {
 55 |     cursor: 'pointer',
 56 |     display: 'block',
 57 |     border: 'none',
 58 |     height: 'auto',
 59 |     textAlign: 'left',
 60 |     borderTop: 'none',
 61 |     lineHeight: '1em',
 62 |     color: 'rgba(0,0,0,.87)',
 63 |     fontSize: '1rem',
 64 |     textTransform: 'none',
 65 |     fontWeight: '400',
 66 |     boxShadow: 'none',
 67 |     padding: '.8rem 1.1rem',
 68 |     boxSizing: 'border-box',
 69 |     whiteSpace: 'normal',
 70 |     wordWrap: 'normal',
 71 |   },
 72 |   ({index, item, highlightedIndex, selectedItem}) => ({
 73 |     backgroundColor: highlightedIndex === index ? 'lightgrey' : 'white',
 74 |     fontWeight: selectedItem === item ? 'bold' : 'normal',
 75 |     '&:hover, &:focus': {
 76 |       borderColor: '#96c8da',
 77 |       boxShadow: '0 2px 3px 0 rgba(34,36,38,.15)',
 78 |     },
 79 |   }),
 80 | )
 81 | 
 82 | const Input = glamorous(Autocomplete.Input, {
 83 |   rootEl: 'div',
 84 |   forwardProps: ['placeholder'],
 85 | })({
 86 |   fontSize: 14,
 87 |   wordWrap: 'break-word',
 88 |   lineHeight: '1em',
 89 |   outline: 0,
 90 |   whiteSpace: 'normal',
 91 |   minHeight: '2em',
 92 |   background: '#fff',
 93 |   display: 'inline-block',
 94 |   padding: '.5em 2em .5em 1em',
 95 |   color: 'rgba(0,0,0,.87)',
 96 |   boxShadow: 'none',
 97 |   border: '1px solid rgba(34,36,38,.15)',
 98 |   transition: 'box-shadow .1s ease,width .1s ease',
 99 |   margin: 0,
100 |   marginBottom: '-2px',
101 |   '&:hover, &focus': {
102 |     borderColor: 'rgba(34,36,38,.35)',
103 |     boxShadow: 'none',
104 |   },
105 | })
106 | 
107 | function BasicAutocomplete({items, onChange}) {
108 |   return (
109 |     <Autocomplete onChange={onChange}>
110 |       <Input placeholder="Favorite color ?" />
111 |       <Autocomplete.Menu style={{border: '1px solid rgba(34,36,38,.15)'}}>
112 |         {({inputValue, selectedItem, highlightedIndex}) =>
113 |           // prettier is doing weeeeird things to this
114 |           // prettier-ignore
115 |           items.filter(i => !inputValue || i.toLowerCase().includes(inputValue.toLowerCase()))
116 |             .map((item, index) => (
117 |               <Item
118 |                 value={item}
119 |                 index={index}
120 |                 key={item}
121 |                 highlightedIndex={highlightedIndex}
122 |                 selectedItem={selectedItem}
123 |               >
124 |                 {item}
125 |               </Item>
126 |             ))}
127 |       </Autocomplete.Menu>
128 |     </Autocomplete>
129 |   )
130 | }
131 | 
132 | export default Examples
133 | 


--------------------------------------------------------------------------------
/src/menu.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import mitt from 'mitt'
  4 | 
  5 | import MenuStatus from './menu-status'
  6 | import {AUTOCOMPLETE_CONTEXT, MENU_CONTEXT} from './constants'
  7 | import {cbToCb, compose, scrollIntoView} from './utils'
  8 | 
  9 | class Menu extends Component {
 10 |   static contextTypes = {
 11 |     [AUTOCOMPLETE_CONTEXT]: PropTypes.object.isRequired,
 12 |   }
 13 | 
 14 |   static childContextTypes = {
 15 |     [MENU_CONTEXT]: PropTypes.object.isRequired,
 16 |   }
 17 | 
 18 |   static propTypes = {
 19 |     ref: PropTypes.func,
 20 |     defaultHighlightedIndex: PropTypes.number,
 21 |     children: PropTypes.func.isRequired,
 22 |   }
 23 | 
 24 |   static defaultProps = {
 25 |     defaultHighlightedIndex: null,
 26 |   }
 27 | 
 28 |   static initialState = {
 29 |     highlightedIndex: null,
 30 |   }
 31 | 
 32 |   constructor(props, context) {
 33 |     super(props, context)
 34 |     this.autocomplete = this.context[AUTOCOMPLETE_CONTEXT]
 35 |     this.ref = compose(node => (this.node = node), this.props.ref)
 36 |   }
 37 | 
 38 |   state = Menu.initialState
 39 |   items = []
 40 |   emitter = mitt()
 41 | 
 42 |   reset = cb => {
 43 |     this.setState(Menu.initialState, cbToCb(cb))
 44 |   }
 45 | 
 46 |   changeHighlighedIndex = moveAmount => {
 47 |     const {highlightedIndex} = this.state
 48 |     const baseIndex = highlightedIndex === null ? -1 : highlightedIndex
 49 |     const itemsLastIndex = this.items.length - 1
 50 |     if (itemsLastIndex < 0) {
 51 |       return
 52 |     }
 53 |     let newIndex = baseIndex + moveAmount
 54 |     if (newIndex < 0) {
 55 |       newIndex = itemsLastIndex
 56 |     } else if (newIndex > itemsLastIndex) {
 57 |       newIndex = 0
 58 |     }
 59 |     this.setState({
 60 |       highlightedIndex: newIndex,
 61 |     })
 62 |     this.emitter.emit('changeHighlighedIndex', newIndex)
 63 |   }
 64 | 
 65 |   setHighlightedIndex = highlightedIndex => {
 66 |     this.setState({highlightedIndex})
 67 |   }
 68 | 
 69 |   setDefaultHighlightedIndex = () => {
 70 |     if (typeof this.props.defaultHighlightedIndex !== 'undefined') {
 71 |       this.setHighlightedIndex(this.props.defaultHighlightedIndex)
 72 |     }
 73 |   }
 74 | 
 75 |   getItemFromIndex = index => {
 76 |     if (!this.items || !this.items[0]) {
 77 |       return null
 78 |     }
 79 |     return this.items.find(itemInstance => {
 80 |       return itemInstance.props.index === index
 81 |     })
 82 |   }
 83 | 
 84 |   maybeScrollToHighlightedElement() {
 85 |     const itemInstance = this.getItemFromIndex(this.state.highlightedIndex)
 86 |     if (!itemInstance || !itemInstance.node) {
 87 |       return
 88 |     }
 89 |     scrollIntoView(itemInstance.node)
 90 |   }
 91 | 
 92 |   addItemInstance(itemInstance) {
 93 |     this.items.push(itemInstance)
 94 |   }
 95 | 
 96 |   removeItemInstance(itemInstance) {
 97 |     const index = this.items.indexOf(itemInstance)
 98 |     if (index !== -1) {
 99 |       this.items.splice(index, 1)
100 |     }
101 |   }
102 | 
103 |   getChildContext() {
104 |     return {[MENU_CONTEXT]: this}
105 |   }
106 | 
107 |   componentDidMount() {
108 |     this.autocomplete.setMenu(this)
109 |     this.autocomplete.emitter.on('menu:open', this.setDefaultHighlightedIndex)
110 |   }
111 | 
112 |   componentDidUpdate() {
113 |     this.maybeScrollToHighlightedElement()
114 |   }
115 | 
116 |   componentWillUnmount() {
117 |     this.autocomplete.removeMenu(this)
118 |     this.autocomplete.emitter.off('menu:open', this.setDefaultHighlightedIndex)
119 |   }
120 | 
121 |   render() {
122 |     if (!this.autocomplete.state.isOpen) {
123 |       return null
124 |     }
125 |     const {inputValue} = this.autocomplete.state
126 |     const {highlightedIndex} = this.state
127 |     // eslint-disable-next-line no-unused-vars
128 |     const {defaultHighlightedIndex, children, ...rest} = this.props
129 |     return (
130 |       <div {...rest} ref={this.ref}>
131 |         <div>
132 |           {children(this.autocomplete.getControllerStateAndHelpers())}
133 |         </div>
134 |         <MenuStatus
135 |           highlightedIndex={highlightedIndex}
136 |           inputValue={inputValue}
137 |         />
138 |       </div>
139 |     )
140 |   }
141 | }
142 | 
143 | export default Menu
144 | 


--------------------------------------------------------------------------------
/examples/pages/semantic-ui/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import matchSorter from 'match-sorter'
  3 | import glamorous, {Div} from 'glamorous'
  4 | import items from '../../other/countries'
  5 | import Autocomplete from '../../other/react-autocompletely'
  6 | 
  7 | export default Examples
  8 | 
  9 | function Examples() {
 10 |   return (
 11 |     <div>
 12 |       semantic-ui examples
 13 |       <Div
 14 |         css={{
 15 |           margin: '50px auto',
 16 |           maxWidth: 600,
 17 |           textAlign: 'center',
 18 |         }}
 19 |       >
 20 |         <p>This is still a work in progress.</p>
 21 |         <Div display="flex" justifyContent="center">
 22 |           <SemanticUIAutocomplete />
 23 |         </Div>
 24 |       </Div>
 25 |     </div>
 26 |   )
 27 | }
 28 | 
 29 | const Item = glamorous(Autocomplete.Item, {
 30 |   rootEl: 'div',
 31 |   forwardProps: ['index', 'value'],
 32 | })(
 33 |   {
 34 |     position: 'relative',
 35 |     cursor: 'pointer',
 36 |     display: 'block',
 37 |     border: 'none',
 38 |     height: 'auto',
 39 |     textAlign: 'left',
 40 |     borderTop: 'none',
 41 |     lineHeight: '1em',
 42 |     color: 'rgba(0,0,0,.87)',
 43 |     fontSize: '1rem',
 44 |     textTransform: 'none',
 45 |     fontWeight: '400',
 46 |     boxShadow: 'none',
 47 |     padding: '.8rem 1.1rem',
 48 |     whiteSpace: 'normal',
 49 |     wordWrap: 'normal',
 50 |   },
 51 |   ({isActive, isSelected}) => {
 52 |     const styles = []
 53 |     if (isActive) {
 54 |       styles.push({
 55 |         color: 'rgba(0,0,0,.95)',
 56 |         background: 'rgba(0,0,0,.03)',
 57 |       })
 58 |     }
 59 |     if (isSelected) {
 60 |       styles.push({
 61 |         color: 'rgba(0,0,0,.95)',
 62 |         fontWeight: '700',
 63 |       })
 64 |     }
 65 |     return styles
 66 |   },
 67 | )
 68 | const onAttention = '&:hover, &:focus'
 69 | const Input = glamorous(Autocomplete.Input, {
 70 |   rootEl: 'input',
 71 |   forwardProps: ['getValue'],
 72 | })(
 73 |   {
 74 |     width: 'calc(100% - 16px)', // full width - icon width/2 - border
 75 |     fontSize: 14,
 76 |     wordWrap: 'break-word',
 77 |     lineHeight: '1em',
 78 |     outline: 0,
 79 |     whiteSpace: 'normal',
 80 |     minHeight: '2em',
 81 |     background: '#fff',
 82 |     display: 'inline-block',
 83 |     padding: '.5em 2em .5em 1em',
 84 |     color: 'rgba(0,0,0,.87)',
 85 |     boxShadow: 'none',
 86 |     border: '1px solid rgba(34,36,38,.15)',
 87 |     borderRadius: '.30rem',
 88 |     transition: 'box-shadow .1s ease,width .1s ease',
 89 |     ':hover': {
 90 |       borderColor: 'rgba(34,36,38,.35)',
 91 |       boxShadow: 'none',
 92 |     },
 93 |     [onAttention]: {
 94 |       borderColor: '#96c8da',
 95 |       boxShadow: '0 2px 3px 0 rgba(34,36,38,.15)',
 96 |     },
 97 |   },
 98 |   ({isOpen}) =>
 99 |     isOpen
100 |       ? {
101 |           borderBottomLeftRadius: '0',
102 |           borderBottomRightRadius: '0',
103 |         }
104 |       : null,
105 | )
106 | 
107 | const Menu = glamorous(Autocomplete.Menu, {
108 |   rootEl: 'div',
109 |   forwardProps: ['defaultHighlightedIndex'],
110 | })({
111 |   maxHeight: '20rem',
112 |   overflowY: 'auto',
113 |   overflowX: 'hidden',
114 |   borderTopWidth: '0',
115 |   outline: '0',
116 |   borderRadius: '0 0 .28571429rem .28571429rem',
117 |   transition: 'opacity .1s ease',
118 |   boxShadow: '0 2px 3px 0 rgba(34,36,38,.15)',
119 |   borderColor: '#96c8da',
120 |   borderRightWidth: 1,
121 |   borderBottomWidth: 1,
122 |   borderLeftWidth: 1,
123 |   borderStyle: 'solid',
124 | })
125 | 
126 | const ControllerButton = glamorous.button({
127 |   backgroundColor: 'transparent',
128 |   border: 'none',
129 |   position: 'absolute',
130 |   right: 8,
131 |   top: 12,
132 |   cursor: 'pointer',
133 | })
134 | 
135 | function advancedFilter(theItems, value) {
136 |   return matchSorter(theItems, value, {
137 |     keys: ['name', 'code'],
138 |   })
139 | }
140 | 
141 | function SemanticUIAutocomplete() {
142 |   return (
143 |     <Autocomplete
144 |       onChange={item => alert(item.name)}
145 |       style={{
146 |         width: '250px',
147 |       }}
148 |     >
149 |       <Autocomplete.Controller>
150 |         {({isOpen, toggleMenu, clearSelection, selectedItem}) =>
151 |           (<Div position="relative" css={{paddingRight: '1.75em'}}>
152 |             <Input
153 |               getValue={i => i.name}
154 |               isOpen={isOpen}
155 |               placeholder="Enter some info"
156 |             />
157 |             {selectedItem
158 |               ? <ControllerButton
159 |                 css={{paddingTop: 4}}
160 |                 onClick={clearSelection}
161 |                 aria-label="clear selection"
162 |                 >
163 |                 <XIcon />
164 |               </ControllerButton>
165 |               : <ControllerButton
166 |                 onClick={toggleMenu}
167 |                 aria-label={isOpen ? 'close menu' : 'open menu'}
168 |                 >
169 |                 <ArrowIcon isOpen={isOpen} />
170 |               </ControllerButton>}
171 |           </Div>)}
172 |       </Autocomplete.Controller>
173 |       <Menu defaultHighlightedIndex={0}>
174 |         {({inputValue, highlightedIndex, selectedItem}) =>
175 |           // prettier-ignore
176 |           (inputValue ? advancedFilter(items, inputValue) : items)
177 |             .map((item, index) => (
178 |               <Item
179 |                 value={item}
180 |                 index={index}
181 |                 key={item.code}
182 |                 isActive={highlightedIndex === index}
183 |                 isSelected={selectedItem === item}
184 |               >
185 |                 {item.name}
186 |               </Item>
187 |             ))}
188 |       </Menu>
189 |     </Autocomplete>
190 |   )
191 | }
192 | 
193 | function ArrowIcon({isOpen}) {
194 |   return (
195 |     <svg
196 |       viewBox="0 0 20 20"
197 |       preserveAspectRatio="none"
198 |       width={16}
199 |       fill="transparent"
200 |       stroke="#979797"
201 |       strokeWidth="1.1px"
202 |       transform={isOpen ? 'rotate(180)' : null}
203 |     >
204 |       <path d="M1,6 L10,15 L19,6" />
205 |     </svg>
206 |   )
207 | }
208 | 
209 | function XIcon() {
210 |   return (
211 |     <svg
212 |       viewBox="0 0 20 20"
213 |       preserveAspectRatio="none"
214 |       width={12}
215 |       fill="transparent"
216 |       stroke="#979797"
217 |       strokeWidth="1.1px"
218 |     >
219 |       <path d="M1,1 L19,19" />
220 |       <path d="M19,1 L1,19" />
221 |     </svg>
222 |   )
223 | }
224 | 


--------------------------------------------------------------------------------
/src/autocomplete.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import mitt from 'mitt'
  4 | 
  5 | import Controller from './controller'
  6 | import Input from './input'
  7 | import Item from './item'
  8 | import Menu from './menu'
  9 | import MenuStatus from './menu-status'
 10 | import {AUTOCOMPLETE_CONTEXT} from './constants'
 11 | import {cbToCb, compose} from './utils'
 12 | 
 13 | class Autocomplete extends Component {
 14 |   static Input = Input
 15 |   static Menu = Menu
 16 |   static MenuStatus = MenuStatus
 17 |   static Item = Item
 18 |   static Controller = Controller
 19 |   static childContextTypes = {
 20 |     [AUTOCOMPLETE_CONTEXT]: PropTypes.object.isRequired,
 21 |   }
 22 | 
 23 |   static propTypes = {
 24 |     ref: PropTypes.func,
 25 |     onChange: PropTypes.func.isRequired,
 26 |   }
 27 | 
 28 |   constructor(...args) {
 29 |     super(...args)
 30 |     this.ref = compose(node => (this._rootNode = node), this.props.ref)
 31 |   }
 32 | 
 33 |   state = {
 34 |     inputValue: null,
 35 |     selectedItem: null,
 36 |     isOpen: false,
 37 |     menu: null,
 38 |   }
 39 |   input = null
 40 |   emitter = mitt()
 41 | 
 42 |   setMenu = menuInstance => {
 43 |     this.setState({
 44 |       menu: menuInstance,
 45 |     })
 46 |   }
 47 | 
 48 |   removeMenu = menuInstance => {
 49 |     this.setState(({menu}) => {
 50 |       // only remove the menu from the state
 51 |       // if the current menu is the same as
 52 |       // the one we're trying to remove
 53 |       if (menu === menuInstance) {
 54 |         return {menu: null}
 55 |       }
 56 |       return {}
 57 |     })
 58 |   }
 59 | 
 60 |   moveHighlightedIndex = amount => {
 61 |     if (!this.state.menu) {
 62 |       return
 63 |     }
 64 |     if (this.state.isOpen) {
 65 |       this.open(() => {
 66 |         this.state.menu.changeHighlighedIndex(amount)
 67 |       })
 68 |     } else {
 69 |       this.highlightIndex(this.state.menu.props.defaultHighlightedIndex)
 70 |     }
 71 |   }
 72 | 
 73 |   highlightIndex = index => {
 74 |     if (!this.state.menu) {
 75 |       return
 76 |     }
 77 |     this.open(() => {
 78 |       this.state.menu.setHighlightedIndex(index)
 79 |     })
 80 |   }
 81 | 
 82 |   clearSelection = () => {
 83 |     this.setState(
 84 |       {
 85 |         selectedItem: null,
 86 |         inputValue: null,
 87 |         isOpen: false,
 88 |       },
 89 |       () => {
 90 |         this.input.focusInput()
 91 |       },
 92 |     )
 93 |   }
 94 | 
 95 |   selectItem = item => {
 96 |     this.reset()
 97 |     this.setState(
 98 |       {selectedItem: item, inputValue: this.getInputValue(item)},
 99 |       () => {
100 |         this.props.onChange(item)
101 |       },
102 |     )
103 |   }
104 | 
105 |   selectItemAtIndex = itemIndex => {
106 |     if (itemIndex === null) {
107 |       // no item highlighted
108 |       return
109 |     }
110 |     const itemInstance = this.state.menu.getItemFromIndex(itemIndex)
111 |     if (!itemInstance) {
112 |       // TODO: see if this is even possible?
113 |       return
114 |     }
115 |     this.selectItem(itemInstance.props.value)
116 |   }
117 | 
118 |   selectHighlightedItem = () => {
119 |     return this.selectItemAtIndex(
120 |       this.state.menu ? this.state.menu.state.highlightedIndex : null,
121 |     )
122 |   }
123 | 
124 |   getControllerStateAndHelpers() {
125 |     const {selectedItem, inputValue, isOpen} = this.state
126 |     const menu = this.state.menu || {state: {}} // handle the null case (before the menu's been rendered)
127 |     const {
128 |       toggleMenu,
129 |       openMenu,
130 |       closeMenu,
131 |       clearSelection,
132 |       selectItem,
133 |       selectItemAtIndex,
134 |       selectHighlightedItem,
135 |     } = this
136 |     const {setHighlightedIndex} = menu
137 |     const {highlightedIndex} = menu.state
138 |     return {
139 |       selectedItem,
140 |       selectItem,
141 |       selectItemAtIndex,
142 |       selectHighlightedItem,
143 |       highlightedIndex,
144 |       setHighlightedIndex,
145 |       inputValue,
146 |       isOpen,
147 |       toggleMenu,
148 |       openMenu,
149 |       closeMenu,
150 |       clearSelection,
151 |     }
152 |   }
153 | 
154 |   reset = () => {
155 |     this.setState(
156 |       ({selectedItem}) => ({
157 |         isOpen: false,
158 |         inputValue: this.getInputValue(selectedItem),
159 |       }),
160 |       () => {
161 |         this.state.menu && this.state.menu.reset()
162 |         this.input && this.input.reset()
163 |       },
164 |     )
165 |   }
166 | 
167 |   open = cb => {
168 |     if (this.state.isOpen) {
169 |       cbToCb(cb)()
170 |     } else {
171 |       this.emitter.emit('menu:open')
172 |       this.setState({isOpen: true}, cbToCb(cb))
173 |     }
174 |   }
175 | 
176 |   toggleMenu = (newState, cb) => {
177 |     this.setState(({isOpen}) => {
178 |       let nextIsOpen = !isOpen
179 |       if (typeof newState === 'boolean') {
180 |         nextIsOpen = newState
181 |       }
182 |       if (nextIsOpen) {
183 |         this.emitter.emit('menu:open')
184 |       }
185 |       return {isOpen: nextIsOpen}
186 |     }, cbToCb(cb))
187 |   }
188 | 
189 |   openMenu = () => {
190 |     this.autocomplete.toggleMenu(true)
191 |   }
192 | 
193 |   closeMenu = () => {
194 |     this.autocomplete.toggleMenu(false)
195 |   }
196 | 
197 |   getInputValue = item => {
198 |     return this.input.getValue(item)
199 |   }
200 | 
201 |   getChildContext() {
202 |     return {[AUTOCOMPLETE_CONTEXT]: this}
203 |   }
204 | 
205 |   componentDidMount() {
206 |     // this.isMouseDown helps us track whether the mouse is currently held down.
207 |     // This is useful when the user clicks on an item in the list, but holds the mouse
208 |     // down long enough for the list to disappear (because the blur event fires on the input)
209 |     // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
210 |     // trigger hiding the menu.
211 |     const onMouseDown = () => {
212 |       this.isMouseDown = true
213 |     }
214 |     const onMouseUp = event => {
215 |       this.isMouseDown = false
216 |       const {target} = event
217 |       if (!this._rootNode.contains(target)) {
218 |         this.reset()
219 |       }
220 |     }
221 |     document.body.addEventListener('mousedown', onMouseDown)
222 |     document.body.addEventListener('mouseup', onMouseUp)
223 | 
224 |     this.unregisterClickTracker = () => {
225 |       document.body.removeEventListener('mousedown', onMouseDown)
226 |       document.body.removeEventListener('mouseup', onMouseUp)
227 |     }
228 |   }
229 | 
230 |   componentWillUnmount() {
231 |     this.unregisterClickTracker() // avoids memory leak
232 |   }
233 | 
234 |   render() {
235 |     // eslint-disable-next-line no-unused-vars
236 |     const {ref, onChange, ...rest} = this.props
237 |     return <div {...rest} ref={this.ref} />
238 |   }
239 | }
240 | 
241 | export default Autocomplete
242 | 


--------------------------------------------------------------------------------
/examples/other/countries.js:
--------------------------------------------------------------------------------
  1 | export default [
  2 |   {code: 'af', name: 'Afghanistan'},
  3 |   {code: 'ax', name: 'Aland Islands'},
  4 |   {code: 'al', name: 'Albania'},
  5 |   {code: 'dz', name: 'Algeria'},
  6 |   {code: 'as', name: 'American Samoa'},
  7 |   {code: 'ad', name: 'Andorra'},
  8 |   {code: 'ao', name: 'Angola'},
  9 |   {code: 'ai', name: 'Anguilla'},
 10 |   {code: 'ag', name: 'Antigua'},
 11 |   {code: 'ar', name: 'Argentina'},
 12 |   {code: 'am', name: 'Armenia'},
 13 |   {code: 'aw', name: 'Aruba'},
 14 |   {code: 'au', name: 'Australia'},
 15 |   {code: 'at', name: 'Austria'},
 16 |   {code: 'az', name: 'Azerbaijan'},
 17 |   {code: 'bs', name: 'Bahamas'},
 18 |   {code: 'bh', name: 'Bahrain'},
 19 |   {code: 'bd', name: 'Bangladesh'},
 20 |   {code: 'bb', name: 'Barbados'},
 21 |   {code: 'by', name: 'Belarus'},
 22 |   {code: 'be', name: 'Belgium'},
 23 |   {code: 'bz', name: 'Belize'},
 24 |   {code: 'bj', name: 'Benin'},
 25 |   {code: 'bm', name: 'Bermuda'},
 26 |   {code: 'bt', name: 'Bhutan'},
 27 |   {code: 'bo', name: 'Bolivia'},
 28 |   {code: 'ba', name: 'Bosnia'},
 29 |   {code: 'bw', name: 'Botswana'},
 30 |   {code: 'bv', name: 'Bouvet Island'},
 31 |   {code: 'br', name: 'Brazil'},
 32 |   {code: 'vg', name: 'British Virgin Islands'},
 33 |   {code: 'bn', name: 'Brunei'},
 34 |   {code: 'bg', name: 'Bulgaria'},
 35 |   {code: 'bf', name: 'Burkina Faso'},
 36 |   {code: 'mm', name: 'Burma'},
 37 |   {code: 'bi', name: 'Burundi'},
 38 |   {code: 'tc', name: 'Caicos Islands'},
 39 |   {code: 'kh', name: 'Cambodia'},
 40 |   {code: 'cm', name: 'Cameroon'},
 41 |   {code: 'ca', name: 'Canada'},
 42 |   {code: 'cv', name: 'Cape Verde'},
 43 |   {code: 'ky', name: 'Cayman Islands'},
 44 |   {code: 'cf', name: 'Central African Republic'},
 45 |   {code: 'td', name: 'Chad'},
 46 |   {code: 'cl', name: 'Chile'},
 47 |   {code: 'cn', name: 'China'},
 48 |   {code: 'cx', name: 'Christmas Island'},
 49 |   {code: 'cc', name: 'Cocos Islands'},
 50 |   {code: 'co', name: 'Colombia'},
 51 |   {code: 'km', name: 'Comoros'},
 52 |   {code: 'cg', name: 'Congo Brazzaville'},
 53 |   {code: 'cd', name: 'Congo'},
 54 |   {code: 'ck', name: 'Cook Islands'},
 55 |   {code: 'cr', name: 'Costa Rica'},
 56 |   {code: 'ci', name: 'Cote Divoire'},
 57 |   {code: 'hr', name: 'Croatia'},
 58 |   {code: 'cu', name: 'Cuba'},
 59 |   {code: 'cy', name: 'Cyprus'},
 60 |   {code: 'cz', name: 'Czech Republic'},
 61 |   {code: 'dk', name: 'Denmark'},
 62 |   {code: 'dj', name: 'Djibouti'},
 63 |   {code: 'dm', name: 'Dominica'},
 64 |   {code: 'do', name: 'Dominican Republic'},
 65 |   {code: 'ec', name: 'Ecuador'},
 66 |   {code: 'eg', name: 'Egypt'},
 67 |   {code: 'sv', name: 'El Salvador'},
 68 |   {code: 'gb', name: 'England'},
 69 |   {code: 'gq', name: 'Equatorial Guinea'},
 70 |   {code: 'er', name: 'Eritrea'},
 71 |   {code: 'ee', name: 'Estonia'},
 72 |   {code: 'et', name: 'Ethiopia'},
 73 |   {code: 'eu', name: 'European Union'},
 74 |   {code: 'fk', name: 'Falkland Islands'},
 75 |   {code: 'fo', name: 'Faroe Islands'},
 76 |   {code: 'fj', name: 'Fiji'},
 77 |   {code: 'fi', name: 'Finland'},
 78 |   {code: 'fr', name: 'France'},
 79 |   {code: 'gf', name: 'French Guiana'},
 80 |   {code: 'pf', name: 'French Polynesia'},
 81 |   {code: 'tf', name: 'French Territories'},
 82 |   {code: 'ga', name: 'Gabon'},
 83 |   {code: 'gm', name: 'Gambia'},
 84 |   {code: 'ge', name: 'Georgia'},
 85 |   {code: 'de', name: 'Germany'},
 86 |   {code: 'gh', name: 'Ghana'},
 87 |   {code: 'gi', name: 'Gibraltar'},
 88 |   {code: 'gr', name: 'Greece'},
 89 |   {code: 'gl', name: 'Greenland'},
 90 |   {code: 'gd', name: 'Grenada'},
 91 |   {code: 'gp', name: 'Guadeloupe'},
 92 |   {code: 'gu', name: 'Guam'},
 93 |   {code: 'gt', name: 'Guatemala'},
 94 |   {code: 'gw', name: 'Guinea-Bissau'},
 95 |   {code: 'gn', name: 'Guinea'},
 96 |   {code: 'gy', name: 'Guyana'},
 97 |   {code: 'ht', name: 'Haiti'},
 98 |   {code: 'hm', name: 'Heard Island'},
 99 |   {code: 'hn', name: 'Honduras'},
100 |   {code: 'hk', name: 'Hong Kong'},
101 |   {code: 'hu', name: 'Hungary'},
102 |   {code: 'is', name: 'Iceland'},
103 |   {code: 'in', name: 'India'},
104 |   {code: 'io', name: 'Indian Ocean Territory'},
105 |   {code: 'id', name: 'Indonesia'},
106 |   {code: 'ir', name: 'Iran'},
107 |   {code: 'iq', name: 'Iraq'},
108 |   {code: 'ie', name: 'Ireland'},
109 |   {code: 'il', name: 'Israel'},
110 |   {code: 'it', name: 'Italy'},
111 |   {code: 'jm', name: 'Jamaica'},
112 |   {code: 'jp', name: 'Japan'},
113 |   {code: 'jo', name: 'Jordan'},
114 |   {code: 'kz', name: 'Kazakhstan'},
115 |   {code: 'ke', name: 'Kenya'},
116 |   {code: 'ki', name: 'Kiribati'},
117 |   {code: 'kw', name: 'Kuwait'},
118 |   {code: 'kg', name: 'Kyrgyzstan'},
119 |   {code: 'la', name: 'Laos'},
120 |   {code: 'lv', name: 'Latvia'},
121 |   {code: 'lb', name: 'Lebanon'},
122 |   {code: 'ls', name: 'Lesotho'},
123 |   {code: 'lr', name: 'Liberia'},
124 |   {code: 'ly', name: 'Libya'},
125 |   {code: 'li', name: 'Liechtenstein'},
126 |   {code: 'lt', name: 'Lithuania'},
127 |   {code: 'lu', name: 'Luxembourg'},
128 |   {code: 'mo', name: 'Macau'},
129 |   {code: 'mk', name: 'Macedonia'},
130 |   {code: 'mg', name: 'Madagascar'},
131 |   {code: 'mw', name: 'Malawi'},
132 |   {code: 'my', name: 'Malaysia'},
133 |   {code: 'mv', name: 'Maldives'},
134 |   {code: 'ml', name: 'Mali'},
135 |   {code: 'mt', name: 'Malta'},
136 |   {code: 'mh', name: 'Marshall Islands'},
137 |   {code: 'mq', name: 'Martinique'},
138 |   {code: 'mr', name: 'Mauritania'},
139 |   {code: 'mu', name: 'Mauritius'},
140 |   {code: 'yt', name: 'Mayotte'},
141 |   {code: 'mx', name: 'Mexico'},
142 |   {code: 'fm', name: 'Micronesia'},
143 |   {code: 'md', name: 'Moldova'},
144 |   {code: 'mc', name: 'Monaco'},
145 |   {code: 'mn', name: 'Mongolia'},
146 |   {code: 'me', name: 'Montenegro'},
147 |   {code: 'ms', name: 'Montserrat'},
148 |   {code: 'ma', name: 'Morocco'},
149 |   {code: 'mz', name: 'Mozambique'},
150 |   {code: 'na', name: 'Namibia'},
151 |   {code: 'nr', name: 'Nauru'},
152 |   {code: 'np', name: 'Nepal'},
153 |   {code: 'an', name: 'Netherlands Antilles'},
154 |   {code: 'nl', name: 'Netherlands'},
155 |   {code: 'nc', name: 'New Caledonia'},
156 |   {code: 'pg', name: 'New Guinea'},
157 |   {code: 'nz', name: 'New Zealand'},
158 |   {code: 'ni', name: 'Nicaragua'},
159 |   {code: 'ne', name: 'Niger'},
160 |   {code: 'ng', name: 'Nigeria'},
161 |   {code: 'nu', name: 'Niue'},
162 |   {code: 'nf', name: 'Norfolk Island'},
163 |   {code: 'kp', name: 'North Korea'},
164 |   {code: 'mp', name: 'Northern Mariana Islands'},
165 |   {code: 'no', name: 'Norway'},
166 |   {code: 'om', name: 'Oman'},
167 |   {code: 'pk', name: 'Pakistan'},
168 |   {code: 'pw', name: 'Palau'},
169 |   {code: 'ps', name: 'Palestine'},
170 |   {code: 'pa', name: 'Panama'},
171 |   {code: 'py', name: 'Paraguay'},
172 |   {code: 'pe', name: 'Peru'},
173 |   {code: 'ph', name: 'Philippines'},
174 |   {code: 'pn', name: 'Pitcairn Islands'},
175 |   {code: 'pl', name: 'Poland'},
176 |   {code: 'pt', name: 'Portugal'},
177 |   {code: 'pr', name: 'Puerto Rico'},
178 |   {code: 'qa', name: 'Qatar'},
179 |   {code: 're', name: 'Reunion'},
180 |   {code: 'ro', name: 'Romania'},
181 |   {code: 'ru', name: 'Russia'},
182 |   {code: 'rw', name: 'Rwanda'},
183 |   {code: 'sh', name: 'Saint Helena'},
184 |   {code: 'kn', name: 'Saint Kitts and Nevis'},
185 |   {code: 'lc', name: 'Saint Lucia'},
186 |   {code: 'pm', name: 'Saint Pierre'},
187 |   {code: 'vc', name: 'Saint Vincent'},
188 |   {code: 'ws', name: 'Samoa'},
189 |   {code: 'sm', name: 'San Marino'},
190 |   {code: 'gs', name: 'Sandwich Islands'},
191 |   {code: 'st', name: 'Sao Tome'},
192 |   {code: 'sa', name: 'Saudi Arabia'},
193 |   {code: 'sn', name: 'Senegal'},
194 |   {code: 'cs', name: 'Serbia'},
195 |   {code: 'rs', name: 'Serbia'},
196 |   {code: 'sc', name: 'Seychelles'},
197 |   {code: 'sl', name: 'Sierra Leone'},
198 |   {code: 'sg', name: 'Singapore'},
199 |   {code: 'sk', name: 'Slovakia'},
200 |   {code: 'si', name: 'Slovenia'},
201 |   {code: 'sb', name: 'Solomon Islands'},
202 |   {code: 'so', name: 'Somalia'},
203 |   {code: 'za', name: 'South Africa'},
204 |   {code: 'kr', name: 'South Korea'},
205 |   {code: 'es', name: 'Spain'},
206 |   {code: 'lk', name: 'Sri Lanka'},
207 |   {code: 'sd', name: 'Sudan'},
208 |   {code: 'sr', name: 'Suriname'},
209 |   {code: 'sj', name: 'Svalbard'},
210 |   {code: 'sz', name: 'Swaziland'},
211 |   {code: 'se', name: 'Sweden'},
212 |   {code: 'ch', name: 'Switzerland'},
213 |   {code: 'sy', name: 'Syria'},
214 |   {code: 'tw', name: 'Taiwan'},
215 |   {code: 'tj', name: 'Tajikistan'},
216 |   {code: 'tz', name: 'Tanzania'},
217 |   {code: 'th', name: 'Thailand'},
218 |   {code: 'tl', name: 'Timorleste'},
219 |   {code: 'tg', name: 'Togo'},
220 |   {code: 'tk', name: 'Tokelau'},
221 |   {code: 'to', name: 'Tonga'},
222 |   {code: 'tt', name: 'Trinidad'},
223 |   {code: 'tn', name: 'Tunisia'},
224 |   {code: 'tr', name: 'Turkey'},
225 |   {code: 'tm', name: 'Turkmenistan'},
226 |   {code: 'tv', name: 'Tuvalu'},
227 |   {code: 'ug', name: 'Uganda'},
228 |   {code: 'ua', name: 'Ukraine'},
229 |   {code: 'ae', name: 'United Arab Emirates'},
230 |   {code: 'us', name: 'United States'},
231 |   {code: 'uy', name: 'Uruguay'},
232 |   {code: 'um', name: 'Us Minor Islands'},
233 |   {code: 'vi', name: 'Us Virgin Islands'},
234 |   {code: 'uz', name: 'Uzbekistan'},
235 |   {code: 'vu', name: 'Vanuatu'},
236 |   {code: 'va', name: 'Vatican City'},
237 |   {code: 've', name: 'Venezuela'},
238 |   {code: 'vn', name: 'Vietnam'},
239 |   {code: 'wf', name: 'Wallis and Futuna'},
240 |   {code: 'eh', name: 'Western Sahara'},
241 |   {code: 'ye', name: 'Yemen'},
242 |   {code: 'zm', name: 'Zambia'},
243 |   {code: 'zw', name: 'Zimbabwe'},
244 | ]
245 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | <h1>react-autocompletely 🔮</h1>
  3 | 
  4 | Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components
  5 | </div>
  6 | 
  7 | <hr />
  8 | 
  9 | [![Build Status][build-badge]][build]
 10 | [![Code Coverage][coverage-badge]][coverage]
 11 | [![version][version-badge]][package]
 12 | [![downloads][downloads-badge]][npmcharts]
 13 | [![MIT License][license-badge]][LICENSE]
 14 | 
 15 | [![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors)
 16 | [![PRs Welcome][prs-badge]][prs]
 17 | [![Code of Conduct][coc-badge]][coc]
 18 | 
 19 | [![Watch on GitHub][github-watch-badge]][github-watch]
 20 | [![Star on GitHub][github-star-badge]][github-star]
 21 | [![Tweet][twitter-badge]][twitter]
 22 | 
 23 | ## The problem
 24 | 
 25 | You need an autocomplete experience in your application and you want it to be
 26 | accessible. You also want it to be simple and flexible to account for your use
 27 | cases.
 28 | 
 29 | ## This solution
 30 | 
 31 | This is a collection of primitive components that you can compose together to
 32 | create an autocomplete component which you can reuse in your application. It's
 33 | based on ideas from the talk ["Compound Components"][compound-components-talk]
 34 | which effectively gives you maximum flexibility with a minimal API because you
 35 | are responsible for the rendering of the autocomplete components.
 36 | 
 37 | This differs from other solutions which render things for their use case and
 38 | then expose many options to allow for extensibility causing an API that is less
 39 | easy to use and less flexible as well as making the implementation more
 40 | complicated and harder to contribute to.
 41 | 
 42 | ## Installation
 43 | 
 44 | **This component is currently under development and is not yet released...**
 45 | 
 46 | This module is distributed via [npm][npm] which is bundled with [node][node] and
 47 | should be installed as one of your project's `dependencies`:
 48 | 
 49 | ```
 50 | npm install --save react-autocompletely
 51 | ```
 52 | 
 53 | > This package also depends on `react` and `prop-types`. Please make sure you have
 54 | > those installed as well.
 55 | 
 56 | ## Usage
 57 | 
 58 | **Things are still in flux a little bit (looking for feedback).**
 59 | 
 60 | ```jsx
 61 | import Autocomplete from 'react-autocompletely'
 62 | 
 63 | // use components together here.
 64 | ```
 65 | 
 66 | Available components and relevant props:
 67 | 
 68 | ### Autocomplete
 69 | 
 70 | This is the main component. It renders a `div` and forwards props. Wrap
 71 | everything in this.
 72 | 
 73 | #### onChange
 74 | 
 75 | > `function(item: any)` | *required*
 76 | 
 77 | Called when the user selects an item
 78 | 
 79 | ### Autocomplete.Input
 80 | 
 81 | This is the input component. It renders an `input` and forwards props.
 82 | 
 83 | #### defaultValue
 84 | 
 85 | > `string` / `null` | *defaults to null*
 86 | 
 87 | The initial value the input should have when it's mounted.
 88 | 
 89 | #### getValue
 90 | 
 91 | > `function(item: any)` | defaults to an identity function (`i => String(i)`)
 92 | 
 93 | Used to determine the `inputValue` for the selected item.
 94 | 
 95 | ### Autocomplete.Controller
 96 | 
 97 | This component allows you to receive and interact with the state of the
 98 | autocomplete component.
 99 | 
100 | #### children
101 | 
102 | > `function({})` | *required*
103 | 
104 | This is called with an object with the properties listed below:
105 | 
106 | <!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
107 | 
108 | | property                | type                       | description                                                                                                      |
109 | |-------------------------|----------------------------|------------------------------------------------------------------------------------------------------------------|
110 | | `highlightedIndex`      | `number` / `null`          | the currently highlighted item                                                                                   |
111 | | `setHighlightedIndex`   | `function(index: number)`  | call to set a new highlighted index                                                                              |
112 | | `inputValue`            | `string` / `null`          | the current value of the input                                                                                   |
113 | | `isOpen`                | `boolean`                  | the menu open state                                                                                              |
114 | | `toggleMenu`            | `function(state: boolean)` | toggle the menu open state (if `state` is not provided, then it will be set to the inverse of the current state) |
115 | | `openMenu`              | `function()`               | opens the menu                                                                                                   |
116 | | `closeMenu`             | `function()`               | closes the menu                                                                                                  |
117 | | `selectedItem`          | `any`                      | the currently selected item                                                                                      |
118 | | `clearSelection`        | `function()`               | clears the selection                                                                                             |
119 | | `selectItem`            | `function(item: any)`      | selects the given item                                                                                           |
120 | | `selectItemAtIndex`     | `function(index: number)`  | selects the item at the given index                                                                              |
121 | | `selectHighlightedItem` | `function()`               | selects the item that is currently highlighted                                                                   |
122 | 
123 | ### Autocomplete.Menu
124 | 
125 | This component allows you to render the items based on the user input. It
126 | renders a `div` with another `div` for your items and a `div` for the menu
127 | status (for accessibility purposes)
128 | 
129 | #### defaultHighlightedIndex
130 | 
131 | > `number`/`null` | defaults to `null`
132 | 
133 | This is the initial index to highlight when the menu first opens.
134 | 
135 | #### children
136 | 
137 | > `function({})` | *required*
138 | 
139 | This is called with the same things that the `children` prop is called with for
140 | `Autocomplete.Controller`
141 | 
142 | ### Autocomplete.Item
143 | 
144 | Render your items inside this component. This renders a `div` and forwards all
145 | props.
146 | 
147 | #### index
148 | 
149 | > `number` | *required*
150 | 
151 | this is how `react-autocompletely` keeps track of your item when updating the
152 | `highlightedIndex` as the user keys around.
153 | 
154 | #### value
155 | 
156 | > `any` | *required*
157 | 
158 | This is the item data that will be selected when the user selects a particular
159 | item.
160 | 
161 | ## Examples
162 | 
163 | Examples exist on [codesandbox.io][examples]:
164 | 
165 | - [react-autocompletely Apollo example](https://codesandbox.io/s/j2omZpK3W)
166 | 
167 | If you would like to add an example, follow these steps:
168 | 
169 | 1. Fork [this codesandbox](http://kcd.im/rac-example)
170 | 2. Update the code for your example (add some form of documentation to explain what it is)
171 | 3. Update the title and description
172 | 4. Add the tag: `react-autocompletely:example`
173 | 
174 | ## Inspiration
175 | 
176 | I was heavily inspired by [Ryan Florence][ryan] and his talk entitled:
177 | ["Compound Components"][compound-components-talk]. I also took a few ideas from
178 | the code in [`react-autocomplete`][react-autocomplete] and
179 | [jQuery UI's Autocomplete][jquery-complete].
180 | 
181 | You can watch me build the first iteration of `react-autocompletely` on YouTube:
182 | 
183 | - [Part 1](https://youtu.be/2kzD1IjDy5s)
184 | - [Part 2](https://youtu.be/w1Z7Jvj08_s)
185 | 
186 | ## Other Solutions
187 | 
188 | You can implement these other solutions using `react-autocompletely`, but if
189 | you'd prefer to use these out of the box solutions, then that's fine too:
190 | 
191 | - [`react-select`](https://github.com/JedWatson/react-select)
192 | - [`react-autocomplete`](https://github.com/reactjs/react-autocomplete)
193 | 
194 | ## Contributors
195 | 
196 | Thanks goes to these people ([emoji key][emojis]):
197 | 
198 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
199 | | [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub>Kent C. Dodds</sub>](https://kentcdodds.com)<br />[💻](https://github.com/paypal/react-autocompletely/commits?author=kentcdodds "Code") [📖](https://github.com/paypal/react-autocompletely/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/paypal/react-autocompletely/commits?author=kentcdodds "Tests") | [<img src="https://avatars1.githubusercontent.com/u/8162598?v=4" width="100px;"/><br /><sub>Jack Moore</sub>](https://github.com/jtmthf)<br />[💡](#example-jtmthf "Examples") | [<img src="https://avatars1.githubusercontent.com/u/2762082?v=4" width="100px;"/><br /><sub>Travis Arnold</sub>](http://travisrayarnold.com)<br />[💻](https://github.com/paypal/react-autocompletely/commits?author=souporserious "Code") [📖](https://github.com/paypal/react-autocompletely/commits?author=souporserious "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/244704?v=4" width="100px;"/><br /><sub>Jeremy Gayed</sub>](http://www.jeremygayed.com)<br />[💡](#example-tizmagik "Examples") | [<img src="https://avatars3.githubusercontent.com/u/6270048?v=4" width="100px;"/><br /><sub>Haroen Viaene</sub>](https://haroen.me)<br />[💡](#example-Haroenv "Examples") | [<img src="https://avatars2.githubusercontent.com/u/15073300?v=4" width="100px;"/><br /><sub>monssef</sub>](https://github.com/rezof)<br />[💡](#example-rezof "Examples") | [<img src="https://avatars2.githubusercontent.com/u/5382443?v=4" width="100px;"/><br /><sub>Federico Zivolo</sub>](https://fezvrasta.github.io)<br />[📖](https://github.com/paypal/react-autocompletely/commits?author=FezVrasta "Documentation") |
200 | | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
201 | | [<img src="https://avatars3.githubusercontent.com/u/746482?v=4" width="100px;"/><br /><sub>Divyendu Singh</sub>](https://divyendusingh.com)<br />[💡](#example-divyenduz "Examples") | [<img src="https://avatars1.githubusercontent.com/u/841955?v=4" width="100px;"/><br /><sub>Muhammad Salman</sub>](https://github.com/salmanmanekia)<br />[💻](https://github.com/paypal/react-autocompletely/commits?author=salmanmanekia "Code") |
202 | <!-- ALL-CONTRIBUTORS-LIST:END -->
203 | 
204 | This project follows the [all-contributors][all-contributors] specification.
205 | Contributions of any kind welcome!
206 | 
207 | ## LICENSE
208 | 
209 | MIT
210 | 
211 | [npm]: https://www.npmjs.com/
212 | [node]: https://nodejs.org
213 | [build-badge]: https://img.shields.io/travis/paypal/react-autocompletely.svg?style=flat-square
214 | [build]: https://travis-ci.org/paypal/react-autocompletely
215 | [coverage-badge]: https://img.shields.io/codecov/c/github/paypal/react-autocompletely.svg?style=flat-square
216 | [coverage]: https://codecov.io/github/paypal/react-autocompletely
217 | [version-badge]: https://img.shields.io/npm/v/react-autocompletely.svg?style=flat-square
218 | [package]: https://www.npmjs.com/package/react-autocompletely
219 | [downloads-badge]: https://img.shields.io/npm/dm/react-autocompletely.svg?style=flat-square
220 | [npmcharts]: http://npmcharts.com/compare/react-autocompletely
221 | [license-badge]: https://img.shields.io/npm/l/react-autocompletely.svg?style=flat-square
222 | [license]: https://github.com/paypal/react-autocompletely/blob/master/LICENSE
223 | [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
224 | [prs]: http://makeapullrequest.com
225 | [donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
226 | [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
227 | [coc]: https://github.com/paypal/react-autocompletely/blob/master/other/CODE_OF_CONDUCT.md
228 | [github-watch-badge]: https://img.shields.io/github/watchers/paypal/react-autocompletely.svg?style=social
229 | [github-watch]: https://github.com/paypal/react-autocompletely/watchers
230 | [github-star-badge]: https://img.shields.io/github/stars/paypal/react-autocompletely.svg?style=social
231 | [github-star]: https://github.com/paypal/react-autocompletely/stargazers
232 | [twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-autocompletely!%20https://github.com/paypal/react-autocompletely%20%F0%9F%91%8D
233 | [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/paypal/react-autocompletely.svg?style=social
234 | [emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
235 | [all-contributors]: https://github.com/kentcdodds/all-contributors
236 | [ryan]: https://github.com/ryanflorence
237 | [compound-components-talk]: https://www.youtube.com/watch?v=hEGg-3pIHlE
238 | [react-autocomplete]: https://www.npmjs.com/package/react-autocomplete
239 | [jquery-complete]: https://jqueryui.com/autocomplete/
240 | [examples]: https://codesandbox.io/search?refinementList%5Btags%5D%5B0%5D=react-autocompletely%3Aexample&page=1
241 | 


--------------------------------------------------------------------------------