govuk_publishing_components 12.13.0 → 12.14.0

data/node_modules/accessible-autocomplete/package.json

@@ -0,0 +1,192 @@
+{
+  "_args": [
+    [
+      {
+        "raw": "accessible-autocomplete@^1.6.2",
+        "scope": null,
+        "escapedName": "accessible-autocomplete",
+        "name": "accessible-autocomplete",
+        "rawSpec": "^1.6.2",
+        "spec": ">=1.6.2 <2.0.0",
+        "type": "range"
+      },
+      "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ"
+    ]
+  ],
+  "_from": "accessible-autocomplete@>=1.6.2 <2.0.0",
+  "_hasShrinkwrap": false,
+  "_id": "accessible-autocomplete@1.6.2",
+  "_inCache": true,
+  "_location": "/accessible-autocomplete",
+  "_nodeVersion": "8.9.4",
+  "_npmOperationalInternal": {
+    "host": "s3://npm-registry-packages",
+    "tmp": "tmp/accessible-autocomplete_1.6.2_1542120962811_0.125232612907197"
+  },
+  "_npmUser": {
+    "name": "alphagov",
+    "email": "govuk-dev@digital.cabinet-office.gov.uk"
+  },
+  "_npmVersion": "5.6.0",
+  "_phantomChildren": {},
+  "_requested": {
+    "raw": "accessible-autocomplete@^1.6.2",
+    "scope": null,
+    "escapedName": "accessible-autocomplete",
+    "name": "accessible-autocomplete",
+    "rawSpec": "^1.6.2",
+    "spec": ">=1.6.2 <2.0.0",
+    "type": "range"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/accessible-autocomplete/-/accessible-autocomplete-1.6.2.tgz",
+  "_shasum": "cb69d37748ba5b0351c84422468538890e25759c",
+  "_shrinkwrap": null,
+  "_spec": "accessible-autocomplete@^1.6.2",
+  "_where": "/var/lib/jenkins/workspace/ublishing_components_master-N4FWJIUY4CIFHKGZOAAEVVXODRY3YBORQOPIBBXWX72VUPSGJRRQ",
+  "author": {
+    "name": "Government Digital Service",
+    "url": "https://www.gov.uk/government/organisations/government-digital-service"
+  },
+  "browserslist": [
+    ">0.1%",
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Edge versions",
+    "last 2 Samsung versions",
+    "Safari >= 9",
+    "ie 8-11",
+    "iOS >= 9"
+  ],
+  "bugs": {
+    "url": "https://github.com/alphagov/accessible-autocomplete/issues"
+  },
+  "dependencies": {
+    "preact": "^8.3.1"
+  },
+  "description": "An autocomplete component, built to be accessible.",
+  "devDependencies": {
+    "@babel/core": "^7.1.5",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-decorators": "^7.1.2",
+    "@babel/plugin-transform-member-expression-literals": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.1.0",
+    "@babel/plugin-transform-property-literals": "^7.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.0.0",
+    "@babel/preset-env": "^7.1.5",
+    "@babel/register": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-istanbul": "^5.1.0",
+    "chai": "^4.2.0",
+    "chalk": "^2.4.1",
+    "copy-webpack-plugin": "^4.6.0",
+    "coveralls": "^3.0.2",
+    "cross-env": "^5.2.0",
+    "csso-cli": "^1.1.0",
+    "dotenv": "^6.1.0",
+    "husky": "^1.1.3",
+    "karma": "^3.1.1",
+    "karma-chai": "^0.1.0",
+    "karma-chai-sinon": "^0.1.5",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-coverage": "^1.1.2",
+    "karma-mocha": "^1.0.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^4.0.0-rc.2",
+    "mocha": "^5.2.0",
+    "npm-run-all": "^4.1.3",
+    "puppeteer": "^1.10.0",
+    "replace-bundle-webpack-plugin": "^1.0.0",
+    "sinon": "^6.3.5",
+    "sinon-chai": "^3.2.0",
+    "source-map-loader": "^0.2.4",
+    "standard": "^12.0.1",
+    "uglifyjs-webpack-plugin": "^2.0.1",
+    "wdio-mocha-framework": "^0.6.4",
+    "wdio-sauce-service": "^0.4.13",
+    "wdio-selenium-standalone-service": "^0.0.10",
+    "wdio-spec-reporter": "^0.1.5",
+    "wdio-static-server-service": "^1.0.1",
+    "wdio-webpack-dev-server-service": "^2.0.2",
+    "webdriverio": "^4.14.0",
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-middleware": "^3.4.0",
+    "webpack-dev-server": "^3.1.10",
+    "webpack-sources": "^1.3.0"
+  },
+  "directories": {},
+  "dist": {
+    "integrity": "sha512-7S+6Vi82LQFSSd5feKedu46tiY2/DShpdXiRp0NY3cLwc+DKe1ayWd66mb3JVi8LTQubRM7jco+u92e6w0bbvg==",
+    "shasum": "cb69d37748ba5b0351c84422468538890e25759c",
+    "tarball": "https://registry.npmjs.org/accessible-autocomplete/-/accessible-autocomplete-1.6.2.tgz",
+    "fileCount": 37,
+    "unpackedSize": 540441,
+    "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6uYDCRA9TVsSAnZWagAAo6sP/igz39UbvmkraVAOGsF2\nqyHQ8DzJv6pIU9qXyZ7mEVk9gTpBtZQVKLtK2X9Pi9ZitKOO4P9+R04CuYur\n6EYrD1YAwrIcuK4Rr7nsnmfsRQxijdmuXTSRQI/nXCeRsqPMuaCphpVdnBkV\nsuOV40I+zuWDQn+2tK9JS/SyW0UF9kAf54uk/VntpricZK9BPESt/40uUYKn\nqSxG3grkfwvE7DoJlI2HuZ0Q1/CR9xHBYtmUu7oYbyO1KWSEzjdZvNf7+zb9\nuEHWTzueLO1O572XxEp8rjLJB1U5W/cu7GLQBDD1/5ShGK3ghJnea2zpCEGn\nEZAK/llomb6X4jdUqsh8glyhhq4qwm/7JGPRrraTODzSIAXgpCZ/a88FSJ+x\n58ZEzB+bCA/h+YRpG5yehWiObLCz0lHMcSW38vZwX0xgrtVBgxzFS88r+QR8\ntKLfoTTJWa7cjlbWfFCIip6H3oSYKKg3uW8wKCqFt91sMp2//9ctFUfmavJm\nkQzvSpDcCz5C7Na11XDlsdz3x5RoYUGnhBXlNEtpZ/SN5cA7XZFyEa6hSu9J\nZzCpaxK7HdXx01i7yCx83oZxPkwXcOzwEVB1B/3kssKZgtuO6pAW+17s8HTA\nwpVJX6g2Wrrfgr/6uBqznlS4E8LhMwceJLSy2gbTD/8Akn9Lv8ntwyNyGomA\nQ6iu\r\n=i6eo\r\n-----END PGP SIGNATURE-----\r\n"
+  },
+  "gitHead": "70af963ba97f840025a6ee0569b2e9a687e904f9",
+  "homepage": "https://github.com/alphagov/accessible-autocomplete#readme",
+  "husky": {
+    "hooks": {
+      "pre-push": "npm run build && node scripts/check-staged.js"
+    }
+  },
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "autocomplete",
+    "component",
+    "plugin",
+    "typeahead",
+    "widget"
+  ],
+  "license": "MIT",
+  "main": "dist/accessible-autocomplete.min.js",
+  "maintainers": [
+    {
+      "name": "alphagov",
+      "email": "govuk-dev@digital.cabinet-office.gov.uk"
+    },
+    {
+      "name": "carolinegreen",
+      "email": "caroline.green@digital.cabinet-office.gov.uk"
+    },
+    {
+      "name": "danmitchell-",
+      "email": "dan@digitalreflow.co.uk"
+    },
+    {
+      "name": "tvararu",
+      "email": "theo@vararu.org"
+    }
+  ],
+  "name": "accessible-autocomplete",
+  "optionalDependencies": {},
+  "readme": "ERROR: No README data found!",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alphagov/accessible-autocomplete.git"
+  },
+  "scripts": {
+    "build": "run-s 'build:js' 'build:css'",
+    "build:css": "csso src/autocomplete.css -o dist/accessible-autocomplete.min.css",
+    "build:js": "cross-env NODE_ENV=production webpack --progress --display-modules",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
+    "karma": "npm run karma:dev -- --single-run",
+    "karma:dev": "cross-env NODE_ENV=test karma start test/karma.config.js",
+    "preversion": "npm test",
+    "standard": "standard",
+    "test": "run-p standard karma wdio",
+    "version": "npm run build && git add -A dist",
+    "wdio": "cross-env NODE_ENV=test wdio test/wdio.config.js && git checkout dist/"
+  },
+  "standard": {
+    "parser": "babel-eslint"
+  },
+  "style": "dist/accessible-autocomplete.min.css",
+  "version": "1.6.2"
+}

data/node_modules/accessible-autocomplete/preact.js

@@ -0,0 +1 @@
+module.exports = require('./dist/lib/accessible-autocomplete.preact.min')

data/node_modules/accessible-autocomplete/react.js

@@ -0,0 +1 @@
+module.exports = require('./dist/lib/accessible-autocomplete.react.min')

data/node_modules/accessible-autocomplete/scripts/check-staged.js

@@ -0,0 +1,14 @@
+const cp = require('child_process')
+const chalk = require('chalk')
+
+cp.exec('git diff --name-only dist/', (err, stdout) => {
+  if (err) {
+    console.log(chalk.red('ERROR:'), err)
+    return process.exit(1)
+  }
+  if (stdout.toString().length) {
+    console.log(chalk.red('ERROR:'), 'There are unstaged changes in `dist/` after running `npm run build`. Please commit them.')
+    return process.exit(1)
+  }
+  process.exit()
+})

data/node_modules/accessible-autocomplete/src/autocomplete.css

@@ -0,0 +1,141 @@
+.autocomplete__wrapper {
+  position: relative;
+}
+
+.autocomplete__hint,
+.autocomplete__input {
+  -webkit-appearance: none;
+  border: 2px solid;
+  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #BFC1C3;
+  position: absolute;
+}
+
+.autocomplete__input--default{
+  padding: 4px;
+}
+
+.autocomplete__input--focused {
+  outline-offset: 0;
+  outline: 3px solid #ffbf47;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 4px 34px 4px 4px;
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down{
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: #fff;
+  border: 2px solid #0B0C0C;
+  border-top: 0;
+  color: #34384B;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid #BFC1C3;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+}
+
+.autocomplete__option > * {
+  pointer-events: none;
+}
+
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+
+.autocomplete__option--odd {
+  background-color: #FAFAFA;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #005EA5;
+  border-color: #005EA5;
+  color: white;
+  outline: none;
+}
+
+.autocomplete__option--no-results {
+  background-color: #FAFAFA;
+  color: #646b6f;
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 4px;
+}
+
+@media (min-width: 641px) {
+  .autocomplete__hint,
+  .autocomplete__input,
+  .autocomplete__option {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}

data/node_modules/accessible-autocomplete/src/autocomplete.js

@@ -0,0 +1,524 @@
+import { createElement, Component } from 'preact' /** @jsx createElement */
+import Status from './status'
+import DropdownArrowDown from './dropdown-arrow-down'
+
+const IS_PREACT = process.env.COMPONENT_LIBRARY === 'PREACT'
+const IS_REACT = process.env.COMPONENT_LIBRARY === 'REACT'
+
+const keyCodes = {
+  13: 'enter',
+  27: 'escape',
+  32: 'space',
+  38: 'up',
+  40: 'down'
+}
+
+// Based on https://github.com/ausi/Feature-detection-technique-for-pointer-events
+const hasPointerEvents = (() => {
+  const element = document.createElement('x')
+  element.style.cssText = 'pointer-events:auto'
+  return element.style.pointerEvents === 'auto'
+})()
+
+function isIosDevice () {
+  return !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g))
+}
+
+function isPrintableKeyCode (keyCode) {
+  return (
+    (keyCode > 47 && keyCode < 58) || // number keys
+    keyCode === 32 || keyCode === 8 || // spacebar or backspace
+    (keyCode > 64 && keyCode < 91) || // letter keys
+    (keyCode > 95 && keyCode < 112) || // numpad keys
+    (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
+    (keyCode > 218 && keyCode < 223) // [\]' (in order)
+  )
+}
+
+// Preact does not implement onChange on inputs, but React does.
+function onChangeCrossLibrary (handler) {
+  if (IS_PREACT) { return { onInput: handler } }
+  if (IS_REACT) { return { onChange: handler } }
+}
+
+export default class Autocomplete extends Component {
+  static defaultProps = {
+    autoselect: false,
+    cssNamespace: 'autocomplete',
+    defaultValue: '',
+    displayMenu: 'inline',
+    minLength: 0,
+    name: 'input-autocomplete',
+    placeholder: '',
+    onConfirm: () => {},
+    confirmOnBlur: true,
+    showNoOptionsFound: true,
+    showAllValues: false,
+    required: false,
+    tNoResults: () => 'No results found',
+    dropdownArrow: DropdownArrowDown
+  }
+
+  elementReferences = {}
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      focused: null,
+      hovered: null,
+      clicked: null,
+      menuOpen: false,
+      options: props.defaultValue ? [props.defaultValue] : [],
+      query: props.defaultValue,
+      selected: null
+    }
+
+    this.handleComponentBlur = this.handleComponentBlur.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.handleUpArrow = this.handleUpArrow.bind(this)
+    this.handleDownArrow = this.handleDownArrow.bind(this)
+    this.handleEnter = this.handleEnter.bind(this)
+    this.handlePrintableKey = this.handlePrintableKey.bind(this)
+
+    this.handleListMouseLeave = this.handleListMouseLeave.bind(this)
+
+    this.handleOptionBlur = this.handleOptionBlur.bind(this)
+    this.handleOptionClick = this.handleOptionClick.bind(this)
+    this.handleOptionFocus = this.handleOptionFocus.bind(this)
+    this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this)
+
+    this.handleInputBlur = this.handleInputBlur.bind(this)
+    this.handleInputChange = this.handleInputChange.bind(this)
+    this.handleInputFocus = this.handleInputFocus.bind(this)
+
+    this.pollInputElement = this.pollInputElement.bind(this)
+    this.getDirectInputChanges = this.getDirectInputChanges.bind(this)
+  }
+
+  componentDidMount () {
+    this.pollInputElement()
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.$pollInput)
+    clearTimeout(this.$blurInput)
+  }
+
+  // Applications like Dragon NaturallySpeaking will modify the
+  // `input` field by directly changing its `.value`. These events
+  // don't trigger our JavaScript event listeners, so we need to poll
+  // to handle when and if they occur.
+  pollInputElement () {
+    this.getDirectInputChanges()
+    this.$pollInput = setTimeout(() => {
+      this.pollInputElement()
+    }, 100)
+  }
+
+  getDirectInputChanges () {
+    const inputReference = this.elementReferences[-1]
+    const queryHasChanged = inputReference && inputReference.value !== this.state.query
+
+    if (queryHasChanged) {
+      this.handleInputChange({ target: { value: inputReference.value } })
+    }
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    const { focused, clicked } = this.state
+    const componentLostFocus = focused === null
+    const focusedChanged = prevState.focused !== focused
+    const focusDifferentElement = (focusedChanged && !componentLostFocus) || clicked !== null
+    if (focusDifferentElement) {
+      this.elementReferences[focused].focus()
+    }
+    const focusedInput = focused === -1
+    const componentGainedFocus = focusedChanged && prevState.focused === null
+    const selectAllText = focusedInput && componentGainedFocus
+    if (selectAllText) {
+      const inputElement = this.elementReferences[focused]
+      inputElement.setSelectionRange(0, inputElement.value.length)
+    }
+  }
+
+  hasAutoselect () {
+    return isIosDevice() ? false : this.props.autoselect
+  }
+
+  // This template is used when converting from a state.options object into a state.query.
+  templateInputValue (value) {
+    const inputValueTemplate = this.props.templates && this.props.templates.inputValue
+    return inputValueTemplate ? inputValueTemplate(value) : value
+  }
+
+  // This template is used when displaying results / suggestions.
+  templateSuggestion (value) {
+    const suggestionTemplate = this.props.templates && this.props.templates.suggestion
+    return suggestionTemplate ? suggestionTemplate(value) : value
+  }
+
+  handleComponentBlur (newState) {
+    const { options, query, selected } = this.state
+    let newQuery
+    if (this.props.confirmOnBlur) {
+      newQuery = newState.query || query
+      this.props.onConfirm(options[selected])
+    } else {
+      newQuery = query
+    }
+    this.setState({
+      focused: null,
+      clicked: null,
+      menuOpen: newState.menuOpen || false,
+      query: newQuery,
+      selected: null
+    })
+  }
+
+  handleListMouseLeave (event) {
+    this.setState({
+      hovered: null
+    })
+  }
+
+  handleOptionBlur (event, index) {
+    const { focused, clicked, menuOpen, options, selected } = this.state
+    const focusingOutsideComponent = event.relatedTarget === null && clicked === null
+    const focusingInput = event.relatedTarget === this.elementReferences[-1]
+    const focusingAnotherOption = focused !== index && focused !== -1
+    const blurComponent = (!focusingAnotherOption && focusingOutsideComponent) || !(focusingAnotherOption || focusingInput)
+    if (blurComponent) {
+      const keepMenuOpen = menuOpen && isIosDevice()
+      this.handleComponentBlur({
+        menuOpen: keepMenuOpen,
+        query: this.templateInputValue(options[selected])
+      })
+    }
+  }
+
+  handleInputBlur (event) {
+    const { focused, menuOpen, options, query, selected } = this.state
+    const focusingAnOption = focused !== -1
+    clearTimeout(this.$blurInput)
+    if (!focusingAnOption) {
+      const keepMenuOpen = menuOpen && isIosDevice()
+      const newQuery = isIosDevice() ? query : this.templateInputValue(options[selected])
+      this.$blurInput = setTimeout(() => this.handleComponentBlur({
+        menuOpen: keepMenuOpen,
+        query: newQuery
+      }), 200)
+    }
+  }
+
+  handleInputChange (event) {
+    const { minLength, source, showAllValues } = this.props
+    const autoselect = this.hasAutoselect()
+    const query = event.target.value
+    const queryEmpty = query.length === 0
+    const queryChanged = this.state.query.length !== query.length
+    const queryLongEnough = query.length >= minLength
+
+    this.setState({ query })
+
+    const searchForOptions = showAllValues || (!queryEmpty && queryChanged && queryLongEnough)
+    if (searchForOptions) {
+      source(query, (options) => {
+        const optionsAvailable = options.length > 0
+        this.setState({
+          menuOpen: optionsAvailable,
+          options,
+          selected: (autoselect && optionsAvailable) ? 0 : -1
+        })
+      })
+    } else if (queryEmpty || !queryLongEnough) {
+      this.setState({
+        menuOpen: false,
+        options: []
+      })
+    }
+  }
+
+  handleInputClick (event) {
+    this.handleInputChange(event)
+  }
+
+  handleInputFocus (event) {
+    this.setState({
+      focused: -1
+    })
+  }
+
+  handleOptionFocus (index) {
+    this.setState({
+      focused: index,
+      hovered: null,
+      selected: index
+    })
+  }
+
+  handleOptionMouseEnter (event, index) {
+    // iOS Safari prevents click event if mouseenter adds hover background colour
+    // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4
+    if (!isIosDevice()) {
+      this.setState({
+        hovered: index
+      })
+    }
+  }
+
+  handleOptionClick (event, index) {
+    const selectedOption = this.state.options[index]
+    const newQuery = this.templateInputValue(selectedOption)
+    clearTimeout(this.$blurInput)
+    this.props.onConfirm(selectedOption)
+    this.setState({
+      focused: -1,
+      clicked: index,
+      hovered: null,
+      menuOpen: false,
+      query: newQuery,
+      selected: -1
+    })
+    this.forceUpdate()
+  }
+
+  handleUpArrow (event) {
+    event.preventDefault()
+    const { menuOpen, selected } = this.state
+    const isNotAtTop = selected !== -1
+    const allowMoveUp = isNotAtTop && menuOpen
+    if (allowMoveUp) {
+      this.handleOptionFocus(selected - 1)
+    }
+  }
+
+  handleDownArrow (event) {
+    event.preventDefault()
+    // if not open, open
+    if (this.props.showAllValues && this.state.menuOpen === false) {
+      event.preventDefault()
+      this.props.source('', (options) => {
+        this.setState({
+          menuOpen: true,
+          options,
+          selected: 0,
+          focused: 0,
+          hovered: null
+        })
+      })
+    } else if (this.state.menuOpen === true) {
+      const { menuOpen, options, selected } = this.state
+      const isNotAtBottom = selected !== options.length - 1
+      const allowMoveDown = isNotAtBottom && menuOpen
+      if (allowMoveDown) {
+        this.handleOptionFocus(selected + 1)
+      }
+    }
+  }
+
+  handleSpace (event) {
+    // if not open, open
+    if (this.props.showAllValues && this.state.menuOpen === false && this.state.query === '') {
+      event.preventDefault()
+      this.props.source('', (options) => {
+        this.setState({
+          menuOpen: true,
+          options
+        })
+      })
+    }
+    const focusIsOnOption = this.state.focused !== -1
+    if (focusIsOnOption) {
+      event.preventDefault()
+      this.handleOptionClick(event, this.state.focused)
+    }
+  }
+
+  handleEnter (event) {
+    if (this.state.menuOpen) {
+      event.preventDefault()
+      const hasSelectedOption = this.state.selected >= 0
+      if (hasSelectedOption) {
+        this.handleOptionClick(event, this.state.selected)
+      }
+    }
+  }
+
+  handlePrintableKey (event) {
+    const inputElement = this.elementReferences[-1]
+    const eventIsOnInput = event.target === inputElement
+    if (!eventIsOnInput) {
+      // FIXME: This would be better if it was in componentDidUpdate,
+      // but using setState to trigger that seems to not work correctly
+      // in preact@8.1.0.
+      inputElement.focus()
+    }
+  }
+
+  handleKeyDown (event) {
+    switch (keyCodes[event.keyCode]) {
+      case 'up':
+        this.handleUpArrow(event)
+        break
+      case 'down':
+        this.handleDownArrow(event)
+        break
+      case 'space':
+        this.handleSpace(event)
+        break
+      case 'enter':
+        this.handleEnter(event)
+        break
+      case 'escape':
+        this.handleComponentBlur({
+          query: this.state.query
+        })
+        break
+      default:
+        if (isPrintableKeyCode(event.keyCode)) {
+          this.handlePrintableKey(event)
+        }
+        break
+    }
+  }
+
+  render () {
+    const {
+      cssNamespace,
+      displayMenu,
+      id,
+      minLength,
+      name,
+      placeholder,
+      required,
+      showAllValues,
+      tNoResults,
+      tStatusQueryTooShort,
+      tStatusNoResults,
+      tStatusSelectedOption,
+      tStatusResults,
+      dropdownArrow: dropdownArrowFactory
+    } = this.props
+    const { focused, hovered, menuOpen, options, query, selected } = this.state
+    const autoselect = this.hasAutoselect()
+
+    const inputFocused = focused === -1
+    const noOptionsAvailable = options.length === 0
+    const queryNotEmpty = query.length !== 0
+    const queryLongEnough = query.length >= minLength
+    const showNoOptionsFound = this.props.showNoOptionsFound &&
+      inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough
+
+    const wrapperClassName = `${cssNamespace}__wrapper`
+
+    const inputClassName = `${cssNamespace}__input`
+    const componentIsFocused = focused !== null
+    const inputModifierFocused = componentIsFocused ? ` ${inputClassName}--focused` : ''
+    const inputModifierType = this.props.showAllValues ? ` ${inputClassName}--show-all-values` : ` ${inputClassName}--default`
+    const dropdownArrowClassName = `${cssNamespace}__dropdown-arrow-down`
+    const optionFocused = focused !== -1 && focused !== null
+
+    const menuClassName = `${cssNamespace}__menu`
+    const menuModifierDisplayMenu = `${menuClassName}--${displayMenu}`
+    const menuIsVisible = menuOpen || showNoOptionsFound
+    const menuModifierVisibility = `${menuClassName}--${(menuIsVisible) ? 'visible' : 'hidden'}`
+
+    const optionClassName = `${cssNamespace}__option`
+
+    const hintClassName = `${cssNamespace}__hint`
+    const selectedOptionText = this.templateInputValue(options[selected])
+    const optionBeginsWithQuery = selectedOptionText &&
+      selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0
+    const hintValue = (optionBeginsWithQuery && autoselect)
+      ? query + selectedOptionText.substr(query.length)
+      : ''
+    const showHint = hasPointerEvents && hintValue
+
+    let dropdownArrow
+
+    // we only need a dropdown arrow if showAllValues is set to a truthy value
+    if (showAllValues) {
+      dropdownArrow = dropdownArrowFactory({ className: dropdownArrowClassName })
+
+      // if the factory returns a string we'll render this as HTML (usage w/o (P)React)
+      if (typeof dropdownArrow === 'string') {
+        dropdownArrow = <div className={`${cssNamespace}__dropdown-arrow-down-wrapper`} dangerouslySetInnerHTML={{ __html: dropdownArrow }} />
+      }
+    }
+
+    return (
+      <div className={wrapperClassName} onKeyDown={this.handleKeyDown} role='combobox' aria-expanded={menuOpen ? 'true' : 'false'}>
+        <Status
+          length={options.length}
+          queryLength={query.length}
+          minQueryLength={minLength}
+          selectedOption={this.templateInputValue(options[selected])}
+          selectedOptionIndex={selected}
+          tQueryTooShort={tStatusQueryTooShort}
+          tNoResults={tStatusNoResults}
+          tSelectedOption={tStatusSelectedOption}
+          tResults={tStatusResults}
+        />
+
+        {showHint && (
+          <span><input className={hintClassName} readonly tabIndex='-1' value={hintValue} /></span>
+        )}
+
+        <input
+          aria-activedescendant={optionFocused ? `${id}__option--${focused}` : false}
+          aria-owns={`${id}__listbox`}
+          autoComplete='off'
+          className={`${inputClassName}${inputModifierFocused}${inputModifierType}`}
+          id={id}
+          onClick={(event) => this.handleInputClick(event)}
+          onBlur={this.handleInputBlur}
+          {...onChangeCrossLibrary(this.handleInputChange)}
+          onFocus={this.handleInputFocus}
+          name={name}
+          placeholder={placeholder}
+          ref={(inputElement) => { this.elementReferences[-1] = inputElement }}
+          type='text'
+          role='textbox'
+          required={required}
+          value={query}
+        />
+
+        {dropdownArrow}
+
+        <ul
+          className={`${menuClassName} ${menuModifierDisplayMenu} ${menuModifierVisibility}`}
+          onMouseLeave={(event) => this.handleListMouseLeave(event)}
+          id={`${id}__listbox`}
+          role='listbox'
+        >
+          {options.map((option, index) => {
+            const showFocused = focused === -1 ? selected === index : focused === index
+            const optionModifierFocused = showFocused && hovered === null ? ` ${optionClassName}--focused` : ''
+            const optionModifierOdd = (index % 2) ? ` ${optionClassName}--odd` : ''
+
+            return (
+              <li
+                aria-selected={focused === index}
+                className={`${optionClassName}${optionModifierFocused}${optionModifierOdd}`}
+                dangerouslySetInnerHTML={{ __html: this.templateSuggestion(option) }}
+                id={`${id}__option--${index}`}
+                key={index}
+                onBlur={(event) => this.handleOptionBlur(event, index)}
+                onClick={(event) => this.handleOptionClick(event, index)}
+                onMouseEnter={(event) => this.handleOptionMouseEnter(event, index)}
+                ref={(optionEl) => { this.elementReferences[index] = optionEl }}
+                role='option'
+                tabIndex='-1'
+              />
+            )
+          })}
+
+          {showNoOptionsFound && (
+            <li className={`${optionClassName} ${optionClassName}--no-results`}>{tNoResults()}</li>
+          )}
+        </ul>
+      </div>
+    )
+  }
+}