feat: multi window context render (#204)

* add contributor

* add eventTarget prop

* update readme

* prop name change eventName --> environment

* make environment only a window obj

* update readme

* add unit test

* simplify unit test

* add typings

* fix types

.all-contributorsrc

@@ -271,6 +271,15 @@
       "contributions": [
         "example"
       ]
+    },
+    {
+      "login": "paul-veevers",
+      "name": "Paul Veevers",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/8969456?v=4",
+      "profile": "https://github.com/paul-veevers",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -15,7 +15,7 @@ autocomplete/dropdown/select/combobox components</p>
 [![version][version-badge]][package]
 [![MIT License][license-badge]][LICENSE]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-28-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-29-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Chat][chat-badge]][chat]
 [![Code of Conduct][coc-badge]][coc]
@@ -296,6 +296,13 @@ You should not normally need to set this prop. It's only useful if you're
 server rendering items (which each have an `id` prop generated based on the
 `downshift` `id`). For more information see the `FAQ` below.
 
+### environment
+
+> `window` | defaults to `window`
+
+You should not normally need to set this prop. It's only useful if you're
+ rendering into a different `window` context from where your JavaScript is running, for example an iframe.
+
 ## Control Props
 
 downshift manages its own state internally and calls your `onChange` and
@@ -596,6 +603,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<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/downshift/commits?author=FezVrasta "Documentation") | [<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/downshift/commits?author=salmanmanekia "Code") | [<img src="https://avatars3.githubusercontent.com/u/10820159?v=4" width="100px;"/><br /><sub>João Alberto</sub>](https://twitter.com/psicotropidev)<br />[💻](https://github.com/paypal/downshift/commits?author=psicotropicos "Code") | [<img src="https://avatars0.githubusercontent.com/u/16327281?v=4" width="100px;"/><br /><sub>Bernard Lin</sub>](https://github.com/bernard-lin)<br />[💻](https://github.com/paypal/downshift/commits?author=bernard-lin "Code") [📖](https://github.com/paypal/downshift/commits?author=bernard-lin "Documentation") |
 | [<img src="https://avatars1.githubusercontent.com/u/7330124?v=4" width="100px;"/><br /><sub>Geoff Davis</sub>](https://geoffdavis.info)<br />[💡](#example-geoffdavis92 "Examples") | [<img src="https://avatars0.githubusercontent.com/u/3415488?v=4" width="100px;"/><br /><sub>Anup</sub>](https://github.com/reznord)<br />[📖](https://github.com/paypal/downshift/commits?author=reznord "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/340520?v=4" width="100px;"/><br /><sub>Ferdinand Salis</sub>](http://ferdinandsalis.com)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Aferdinandsalis "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=ferdinandsalis "Code") | [<img src="https://avatars2.githubusercontent.com/u/662750?v=4" width="100px;"/><br /><sub>Kye Hohenberger</sub>](https://github.com/tkh44)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Atkh44 "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1443499?v=4" width="100px;"/><br /><sub>Julien Goux</sub>](https://github.com/jgoux)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Ajgoux "Bug reports") [💻](https://github.com/paypal/downshift/commits?author=jgoux "Code") [⚠️](https://github.com/paypal/downshift/commits?author=jgoux "Tests") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub>Joachim Seminck</sub>](https://github.com/jseminck)<br />[💻](https://github.com/paypal/downshift/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/954596?v=4" width="100px;"/><br /><sub>Jesse Harlin</sub>](http://jesseharlin.net/)<br />[🐛](https://github.com/paypal/downshift/issues?q=author%3Athe-simian "Bug reports") [💡](#example-the-simian "Examples") |
 | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub>Matt Parrish</sub>](https://github.com/pbomb)<br />[🔧](#tool-pbomb "Tools") | [<img src="https://avatars1.githubusercontent.com/u/11661846?v=4" width="100px;"/><br /><sub>thom</sub>](http://thom.kr)<br />[💻](https://github.com/paypal/downshift/commits?author=thomhos "Code") | [<img src="https://avatars2.githubusercontent.com/u/1088312?v=4" width="100px;"/><br /><sub>Vu Tran</sub>](http://twitter.com/tranvu)<br />[💻](https://github.com/paypal/downshift/commits?author=vutran "Code") | [<img src="https://avatars1.githubusercontent.com/u/74193?v=4" width="100px;"/><br /><sub>Codie Mullins</sub>](https://github.com/codiemullins)<br />[💻](https://github.com/paypal/downshift/commits?author=codiemullins "Code") [💡](#example-codiemullins "Examples") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub>Mohammad Rajabifard</sub>](https://morajabi.me)<br />[📖](https://github.com/paypal/downshift/commits?author=morajabi "Documentation") [🤔](#ideas-morajabi "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub>Frank Tan</sub>](https://github.com/tansongyang)<br />[💻](https://github.com/paypal/downshift/commits?author=tansongyang "Code") | [<img src="https://avatars3.githubusercontent.com/u/5093058?v=4" width="100px;"/><br /><sub>Kier Borromeo</sub>](https://kierb.com)<br />[💡](#example-srph "Examples") |
+| [<img src="https://avatars1.githubusercontent.com/u/8969456?v=4" width="100px;"/><br /><sub>Paul Veevers</sub>](https://github.com/paul-veevers)<br />[💻](https://github.com/paypal/downshift/commits?author=paul-veevers "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

src/__tests__/downshift.props.js

@@ -58,6 +58,22 @@ test('onChange only called when the selection changes', () => {
   expect(handleChange).toHaveBeenCalledTimes(0)
 })
 
+test('uses given environment', () => {
+  const environment = {
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    document: {
+      getElementById: jest.fn(() => document.createElement('div')),
+    },
+  }
+  const {wrapper, setHighlightedIndex} = setup({environment})
+  setHighlightedIndex()
+  wrapper.unmount()
+  expect(environment.addEventListener).toHaveBeenCalledTimes(2)
+  expect(environment.removeEventListener).toHaveBeenCalledTimes(2)
+  expect(environment.document.getElementById).toHaveBeenCalledTimes(1)
+})
+
 function setup({children = () => <div />, ...props} = {}) {
   let renderArg
   const childSpy = jest.fn(controllerArg => {

src/downshift.js

@@ -35,6 +35,13 @@ class Downshift extends Component {
     onClick: PropTypes.func,
     itemCount: PropTypes.number,
     id: PropTypes.string,
+    environment: PropTypes.shape({
+      addEventListener: PropTypes.func,
+      removeEventListener: PropTypes.func,
+      document: PropTypes.shape({
+        getElementById: PropTypes.func,
+      }),
+    }),
     // things we keep in state for uncontrolled components
     // but can accept as props for controlled components
     /* eslint-disable react/no-unused-prop-types */
@@ -56,6 +63,7 @@ class Downshift extends Component {
     onStateChange: () => {},
     onUserAction: () => {},
     onChange: () => {},
+    environment: window,
   }
 
   // this is an experimental feature
@@ -148,7 +156,7 @@ class Downshift extends Component {
   }
 
   getItemNodeFromIndex = index => {
-    return document.getElementById(this.getItemId(index))
+    return this.props.environment.document.getElementById(this.getItemId(index))
   }
 
   setHighlightedIndex = (
@@ -663,13 +671,13 @@ class Downshift extends Component {
         this.reset({type: Downshift.stateChangeTypes.mouseUp})
       }
     }
-    window.addEventListener('mousedown', onMouseDown)
-    window.addEventListener('mouseup', onMouseUp)
+    this.props.environment.addEventListener('mousedown', onMouseDown)
+    this.props.environment.addEventListener('mouseup', onMouseUp)
 
     this.cleanup = () => {
       this._isMounted = false
-      window.removeEventListener('mousedown', onMouseDown)
-      window.removeEventListener('mouseup', onMouseUp)
+      this.props.environment.removeEventListener('mousedown', onMouseDown)
+      this.props.environment.removeEventListener('mouseup', onMouseUp)
     }
   }
 

typings/index.d.ts

@@ -26,6 +26,17 @@ export interface DownshiftProps {
   inputValue?: string
   highlightedIndex?: number
   id?: string
+  environment?: Environment
+}
+
+export interface Environment {
+  addEventListener: (type: string, cb: Function) => void
+  removeEventListener: (type: string, cb: Function) => void
+  document: Document
+}
+
+export interface Document {
+  getElementById: (id: string) => HTMLElement
 }
 
 export interface A11yStatusMessageOptions {