Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
accessible-autocomplete
Advanced tools
accessible-autocomplete - npm Package Compare versions
Comparing version 0.6.0 to 1.0.0
@@ -7,2 +7,12 @@ # CHANGELOG | ||
| ## 1.0.0 - 2017-05-10 | ||
| - [Breaking] Default `autoselect` to `true` when using `enhanceSelectElement`. | ||
| - [Breaking] Make `id` a required attribute. | ||
| - [Breaking] Rename `onSelect` to `onConfirm`. | ||
| - [Breaking] Rename `selectOnBlur` to `confirmOnBlur`. | ||
| - Fix an issue where users couldn't click on custom suggestions on Chrome. | ||
| ## 0.6.0 - 2017-05-10 | ||
| - [Breaking] Rename component from `accessible-typeahead` to `accessible-autocomplete`. | ||
@@ -9,0 +19,0 @@ - Default `defaultValue` when progressively enhancing. |
@@ -26,3 +26,3 @@ # Contributing | ||
| To run the integration tests locally with PhantomJS: | ||
| To run the integration tests locally with Chrome and FireFox (specified in [wdio.config.js](test/wdio.config.js)): | ||
@@ -52,8 +52,6 @@ ```bash | ||
| ```bash | ||
| vim CHANGELOG.md # Update changelog, put all unreleased changes under new heading. | ||
| git commit -am "Update changelog" | ||
| npm version <major|minor|patch> | ||
| vim CHANGELOG.md # Update changelog, put all unreleased changes under new heading. | ||
| vim README.md # Update readme, bump all hard-coded version numbers, file size if necessary. | ||
| git commit -am "Update readme and changelog" | ||
| git push | ||
| npm publish | ||
| ``` |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.accessibleAutocomplete=t():e.accessibleAutocomplete=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=4)}([function(e,t,n){!function(e,n){!function(e){function t(e,t,n){this.nodeName=e,this.attributes=t,this.children=n,this.key=t&&t.key}function n(e,n){var o,r,i,l,u=[];for(l=arguments.length;l-- >2;)V.push(arguments[l]);for(n&&n.children&&(V.length||V.push(n.children),delete n.children);V.length;)if((r=V.pop())instanceof Array)for(l=r.length;l--;)V.push(r[l]);else null!=r&&!1!==r&&("number"!=typeof r&&!0!==r||(r=String(r)),i="string"==typeof r,i&&o?u[u.length-1]+=r:(u.push(r),o=i));var a=new t(e,n||void 0,u);return F.vnode&&F.vnode(a),a}function o(e,t){if(t)for(var n in t)e[n]=t[n];return e}function r(e){return o({},e)}function i(e,t){for(var n=t.split("."),o=0;o<n.length&&e;o++)e=e[n[o]];return e}function l(e){return"function"==typeof e}function u(e){return"string"==typeof e}function a(e){var t="";for(var n in e)e[n]&&(t&&(t+=" "),t+=n);return t}function s(e,t){return n(e.nodeName,o(r(e.attributes),t),arguments.length>2?[].slice.call(arguments,2):e.children)}function p(e,t,n){var o=t.split(".");return function(t){for(var r=t&&t.target||this,l={},a=l,s=u(n)?i(t,n):r.nodeName?r.type.match(/^che|rad/)?r.checked:r.value:t,p=0;p<o.length-1;p++)a=a[o[p]]||(a[o[p]]=!p&&e.state[o[p]]||{});a[o[p]]=s,e.setState(l)}}function c(e){!e._dirty&&(e._dirty=!0)&&1==$.push(e)&&(F.debounceRendering||H)(d)}function d(){var e,t=$;for($=[];e=t.pop();)e._dirty&&T(e)}function f(e){var t=e&&e.nodeName;return t&&l(t)&&!(t.prototype&&t.prototype.render)}function h(e,t){return e.nodeName(y(e),t||K)}function m(e,t){return u(t)?e instanceof Text:u(t.nodeName)?v(e,t.nodeName):l(t.nodeName)?e._componentConstructor===t.nodeName||f(t):void 0}function v(e,t){return e.normalizedNodeName===t||R(e.nodeName)===R(t)}function y(e){var t=r(e.attributes);t.children=e.children;var n=e.nodeName.defaultProps;if(n)for(var o in n)void 0===t[o]&&(t[o]=n[o]);return t}function b(e){var t=e.parentNode;t&&t.removeChild(e)}function g(e,t,n,o,r){if("className"===t&&(t="class"),"class"===t&&o&&"object"==typeof o&&(o=a(o)),"key"===t);else if("class"!==t||r)if("style"===t){if((!o||u(o)||u(n))&&(e.style.cssText=o||""),o&&"object"==typeof o){if(!u(n))for(var i in n)i in o||(e.style[i]="");for(var i in o)e.style[i]="number"!=typeof o[i]||G[i]?o[i]:o[i]+"px"}}else if("dangerouslySetInnerHTML"===t)o&&(e.innerHTML=o.__html);else if("o"==t[0]&&"n"==t[1]){var s=e._listeners||(e._listeners={});t=R(t.substring(2)),o?s[t]||e.addEventListener(t,O,!!Q[t]):s[t]&&e.removeEventListener(t,O,!!Q[t]),s[t]=o}else if("list"!==t&&"type"!==t&&!r&&t in e)_(e,t,null==o?"":o),null!=o&&!1!==o||e.removeAttribute(t);else{var p=r&&t.match(/^xlink\:?(.+)/);null==o||!1===o?p?e.removeAttributeNS("http://www.w3.org/1999/xlink",R(p[1])):e.removeAttribute(t):"object"==typeof o||l(o)||(p?e.setAttributeNS("http://www.w3.org/1999/xlink",R(p[1]),o):e.setAttribute(t,o))}else e.className=o||""}function _(e,t,n){try{e[t]=n}catch(e){}}function O(e){return this._listeners[e.type](F.event&&F.event(e)||e)}function x(e){if(b(e),e instanceof Element){e._component=e._componentConstructor=null;var t=e.normalizedNodeName||R(e.nodeName);(J[t]||(J[t]=[])).push(e)}}function w(e,t){var n=R(e),o=J[n]&&J[n].pop()||(t?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e));return o.normalizedNodeName=n,o}function C(){for(var e;e=X.pop();)F.afterMount&&F.afterMount(e),e.componentDidMount&&e.componentDidMount()}function N(e,t,n,o,r,i){Y++||(Z=r instanceof SVGElement);var l=E(e,t,n,o);return r&&l.parentNode!==r&&r.appendChild(l),--Y||i||C(),l}function E(e,t,n,o){for(var r=t&&t.attributes;f(t);)t=h(t,n);if(null==t&&(t=""),u(t)){if(e){if(e instanceof Text&&e.parentNode)return e.nodeValue!=t&&(e.nodeValue=t),e;M(e)}return document.createTextNode(t)}if(l(t.nodeName))return L(e,t,n,o);var i=e,a=t.nodeName,s=Z,p=t.children;if(u(a)||(a=String(a)),Z="svg"===a||"foreignObject"!==a&&Z,e){if(!v(e,a)){for(i=w(a,Z);e.firstChild;)i.appendChild(e.firstChild);M(e)}}else i=w(a,Z);p&&1===p.length&&"string"==typeof p[0]&&1===i.childNodes.length&&i.firstChild instanceof Text?i.firstChild.nodeValue!=p[0]&&(i.firstChild.nodeValue=p[0]):(p&&p.length||i.firstChild)&&S(i,p,n,o);var c=i[z];if(!c){i[z]=c={};for(var d=i.attributes,m=d.length;m--;)c[d[m].name]=d[m].value}return k(i,t.attributes,c),r&&"function"==typeof r.ref&&(c.ref=r.ref)(i),Z=s,i}function S(e,t,n,o){var r,i,u,a,s=e.childNodes,p=[],c={},d=0,f=0,h=s.length,v=0,y=t&&t.length;if(h)for(var b=0;b<h;b++){var g=s[b],_=y?(i=g._component)?i.__key:(i=g[z])?i.key:null:null;_||0===_?(d++,c[_]=g):p[v++]=g}if(y)for(var b=0;b<y;b++){u=t[b],a=null;var _=u.key;if(null!=_)d&&_ in c&&(a=c[_],c[_]=void 0,d--);else if(!a&&f<v){for(r=f;r<v;r++)if((i=p[r])&&m(i,u)){a=i,p[r]=void 0,r===v-1&&v--,r===f&&f++;break}!a&&f<v&&l(u.nodeName)&&o&&(a=p[f],p[f++]=void 0)}(a=E(a,u,n,o))&&a!==e&&a!==s[b]&&e.insertBefore(a,s[b]||null)}if(d)for(var b in c)c[b]&&M(c[b]);f<v&&I(p)}function I(e,t){for(var n=e.length;n--;)e[n]&&M(e[n],t)}function M(e,t){var n=e._component;n?B(n,!t):(e[z]&&e[z].ref&&e[z].ref(null),t||x(e),e.childNodes&&e.childNodes.length&&I(e.childNodes,t))}function k(e,t,n){for(var o in n)t&&o in t||null==n[o]||g(e,o,n[o],n[o]=void 0,Z);if(t)for(var r in t)"children"===r||"innerHTML"===r||r in n&&t[r]===("value"===r||"checked"===r?e[r]:n[r])||g(e,r,n[r],n[r]=t[r],Z)}function D(e){var t=e.constructor.name,n=ee[t];n?n.push(e):ee[t]=[e]}function A(e,t,n){var o=new e(t,n),r=ee[e.name];if(U.call(o,t,n),r)for(var i=r.length;i--;)if(r[i].constructor===e){o.nextBase=r[i].nextBase,r.splice(i,1);break}return o}function P(e,t,n,o,r){e._disable||(e._disable=!0,(e.__ref=t.ref)&&delete t.ref,(e.__key=t.key)&&delete t.key,!e.base||r?e.componentWillMount&&e.componentWillMount():e.componentWillReceiveProps&&e.componentWillReceiveProps(t,o),o&&o!==e.context&&(e.prevContext||(e.prevContext=e.context),e.context=o),e.prevProps||(e.prevProps=e.props),e.props=t,e._disable=!1,0!==n&&(1!==n&&!1===F.syncComponentUpdates&&e.base?c(e):T(e,1,r)),e.__ref&&e.__ref(e))}function T(e,t,n,i){if(!e._disable){var u,a,s,p,c=e.props,d=e.state,m=e.context,v=e.prevProps||c,b=e.prevState||d,g=e.prevContext||m,_=e.base,O=e.nextBase,x=_||O,w=e._component;if(_&&(e.props=v,e.state=b,e.context=g,2!==t&&e.shouldComponentUpdate&&!1===e.shouldComponentUpdate(c,d,m)?u=!0:e.componentWillUpdate&&e.componentWillUpdate(c,d,m),e.props=c,e.state=d,e.context=m),e.prevProps=e.prevState=e.prevContext=e.nextBase=null,e._dirty=!1,!u){for(e.render&&(a=e.render(c,d,m)),e.getChildContext&&(m=o(r(m),e.getChildContext()));f(a);)a=h(a,m);var E,S,I=a&&a.nodeName;if(l(I)){s=w;var k=y(a);s&&s.constructor===I?P(s,k,1,m):(E=s,s=A(I,k,m),s.nextBase=s.nextBase||O,s._parentComponent=e,e._component=s,P(s,k,0,m),T(s,1,n,!0)),S=s.base}else p=x,E=w,E&&(p=e._component=null),(x||1===t)&&(p&&(p._component=null),S=N(p,a,m,n||!_,x&&x.parentNode,!0));if(x&&S!==x&&s!==w){var D=x.parentNode;D&&S!==D&&(D.replaceChild(S,x),E||(x._component=null,M(x)))}if(E&&B(E,S!==x),e.base=S,S&&!i){for(var L=e,U=e;U=U._parentComponent;)(L=U).base=S;S._component=L,S._componentConstructor=L.constructor}}!_||n?X.unshift(e):u||(e.componentDidUpdate&&e.componentDidUpdate(v,b,g),F.afterUpdate&&F.afterUpdate(e));var j,V=e._renderCallbacks;if(V)for(;j=V.pop();)j.call(e);Y||i||C()}}function L(e,t,n,o){for(var r=e&&e._component,i=e,l=r&&e._componentConstructor===t.nodeName,u=l,a=y(t);r&&!u&&(r=r._parentComponent);)u=r.constructor===t.nodeName;return r&&u&&(!o||r._component)?(P(r,a,3,n,o),e=r.base):(r&&!l&&(B(r,!0),e=i=null),r=A(t.nodeName,a,n),e&&!r.nextBase&&(r.nextBase=e,i=null),P(r,a,1,n,o),e=r.base,i&&e!==i&&(i._component=null,M(i))),e}function B(e,t){F.beforeUnmount&&F.beforeUnmount(e);var n=e.base;e._disable=!0,e.componentWillUnmount&&e.componentWillUnmount(),e.base=null;var o=e._component;o?B(o,t):n&&(n[z]&&n[z].ref&&n[z].ref(null),e.nextBase=n,t&&(b(n),D(e)),I(n.childNodes,!t)),e.__ref&&e.__ref(null),e.componentDidUnmount&&e.componentDidUnmount()}function U(e,t){this._dirty=!0,this.context=t,this.props=e,this.state||(this.state={})}function j(e,t,n){return N(n,e,{},!1,t)}var F={},V=[],q={},R=function(e){return q[e]||(q[e]=e.toLowerCase())},W="undefined"!=typeof Promise&&Promise.resolve(),H=W?function(e){W.then(e)}:setTimeout,K={},z="undefined"!=typeof Symbol?Symbol.for("preactattr"):"__preactattr_",G={boxFlex:1,boxFlexGroup:1,columnCount:1,fillOpacity:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,fontWeight:1,lineClamp:1,lineHeight:1,opacity:1,order:1,orphans:1,strokeOpacity:1,widows:1,zIndex:1,zoom:1},Q={blur:1,error:1,focus:1,load:1,resize:1,scroll:1},$=[],J={},X=[],Y=0,Z=!1,ee={};o(U.prototype,{linkState:function(e,t){var n=this._linkedStates||(this._linkedStates={});return n[e+t]||(n[e+t]=p(this,e,t))},setState:function(e,t){var n=this.state;this.prevState||(this.prevState=r(n)),o(n,l(e)?e(n,this.props):e),t&&(this._renderCallbacks=this._renderCallbacks||[]).push(t),c(this)},forceUpdate:function(){T(this,2)},render:function(){}}),e.h=n,e.cloneElement=s,e.Component=U,e.render=j,e.rerender=d,e.options=F}(t)}()},function(e,t,n){"use strict";function o(e){if(!e.element)throw new Error("element is not defined");if(!e.source)throw new Error("source is not defined");(0,i.render)((0,i.h)(u.default,e),e.element)}var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},i=n(0),l=n(2),u=function(e){return e&&e.__esModule?e:{default:e}}(l),a=function(e){return function(t,n){n(t?e.filter(function(e){return-1!==e.toLowerCase().indexOf(t.toLowerCase())}):[])}};o.enhanceSelectElement=function(e){if(!e.selectElement)throw new Error("selectElement is not defined");if(!e.source){var t=Array.prototype.map.call(e.selectElement.options,function(e){return e.innerHTML});e.source=a(t)}e.onSelect=e.onSelect||function(t){var n=Array.prototype.filter.call(e.selectElement.options,function(e){return e.innerHTML===t})[0];n&&(n.selected=!0)},e.defaultValue?e.selectElement.value=e.defaultValue:e.defaultValue=e.selectElement.options[e.selectElement.options.selectedIndex].innerHTML,e.name=e.name||e.selectElement.name||"",e.id=e.id||e.selectElement.id||"";var n=document.createElement("span");e.selectElement.insertAdjacentElement("afterend",n),o(r({},e,{element:n})),e.selectElement.style.display="none",e.selectElement.id=e.selectElement.id+"-select"},e.exports=o},function(e,t,n){"use strict";function o(e,t){}function r(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){"function"!=typeof t&&null!==t||(e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t))}function l(){return!(!navigator.userAgent.match(/(iPod|iPhone|iPad)/g)||!navigator.userAgent.match(/AppleWebKit/g))}function u(e){return e>47&&e<58||32===e||8===e||e>64&&e<91||e>95&&e<112||e>185&&e<193||e>218&&e<223}t.__esModule=!0,t.default=void 0;var a,s,p=n(0),c=n(3),d=function(e){return e&&e.__esModule?e:{default:e}}(c),f={13:"enter",27:"escape",38:"up",40:"down"},h=function(){var e=document.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}(),m=(s=a=function(e){function t(n){o(this,t);var i=r(this,e.call(this,n));return i.elementRefs={},i.state={focused:null,hovered:null,menuOpen:!1,options:n.defaultValue?[n.defaultValue]:[],query:n.defaultValue,selected:null},i.handleComponentBlur=i.handleComponentBlur.bind(i),i.handleKeyDown=i.handleKeyDown.bind(i),i.handleUpArrow=i.handleUpArrow.bind(i),i.handleDownArrow=i.handleDownArrow.bind(i),i.handleEnter=i.handleEnter.bind(i),i.handlePrintableKey=i.handlePrintableKey.bind(i),i.handleOptionClick=i.handleOptionClick.bind(i),i.handleOptionFocusOut=i.handleOptionFocusOut.bind(i),i.handleOptionFocus=i.handleOptionFocus.bind(i),i.handleOptionMouseDown=i.handleOptionMouseDown.bind(i),i.handleOptionMouseEnter=i.handleOptionMouseEnter.bind(i),i.handleOptionMouseOut=i.handleOptionMouseOut.bind(i),i.handleOptionTouchEnd=i.handleOptionTouchEnd.bind(i),i.handleInputBlur=i.handleInputBlur.bind(i),i.handleInputChange=i.handleInputChange.bind(i),i.handleInputFocus=i.handleInputFocus.bind(i),i.pollInputElement=i.pollInputElement.bind(i),i.getDirectInputChanges=i.getDirectInputChanges.bind(i),i}return i(t,e),t.prototype.componentDidMount=function(){this.pollInputElement()},t.prototype.componentWillUnmount=function(){clearTimeout(this.$pollInput)},t.prototype.pollInputElement=function(){var e=this;this.getDirectInputChanges(),this.$pollInput=setTimeout(function(){e.pollInputElement()},100)},t.prototype.getDirectInputChanges=function(){var e=this.elementRefs[-1];e.value!==this.state.query&&this.handleInputChange({target:{value:e.value}})},t.prototype.componentDidUpdate=function(e,t){var n=this.state.focused,o=null===n,r=t.focused!==n;r&&!o&&this.elementRefs[n].focus();var i=-1===n,l=r&&null===t.focused;if(i&&l){var u=this.elementRefs[n];u.setSelectionRange(0,u.value.length)}},t.prototype.hasAutoselect=function(){return!l()&&this.props.autoselect},t.prototype.templateInputValue=function(e){var t=this.props.templates&&this.props.templates.inputValue;return t?t(e):e},t.prototype.templateSuggestion=function(e){var t=this.props.templates&&this.props.templates.suggestion;return t?t(e):e},t.prototype.handleComponentBlur=function(e){var t=this.state,n=t.options,o=t.query,r=t.selected,i=void 0;this.props.selectOnBlur?(i=e.query||o,this.props.onSelect(n[r])):i=o,this.setState({focused:null,menuOpen:e.menuOpen||!1,query:i,selected:null})},t.prototype.handleOptionFocusOut=function(e,t){var n=this.state,o=n.focused,r=n.menuOpen,i=n.options,u=n.selected,a=null===e.relatedTarget,s=e.relatedTarget===this.elementRefs[-1],p=o!==t&&-1!==o;if(a||!p&&!s){var c=r&&l();this.handleComponentBlur({menuOpen:c,query:this.templateInputValue(i[u])})}},t.prototype.handleInputBlur=function(e){var t=this.state,n=t.focused,o=t.menuOpen,r=t.options,i=t.query,u=t.selected;if(-1===n){var a=o&&l(),s=l()?i:this.templateInputValue(r[u]);this.handleComponentBlur({menuOpen:a,query:s})}},t.prototype.handleInputChange=function(e){var t=this,n=this.props,o=n.minLength,r=n.source,i=this.hasAutoselect(),l=e.target.value,u=0===l.length,a=this.state.query.length!==l.length,s=l.length>=o;this.setState({query:l}),!u&&a&&s?r(l,function(e){var n=e.length>0;t.setState({menuOpen:n,options:e,selected:i&&n?0:-1})}):!u&&s||this.setState({menuOpen:!1,options:[]})},t.prototype.handleInputFocus=function(e){this.setState({focused:-1})},t.prototype.handleOptionFocus=function(e){this.setState({focused:e,hovered:null,selected:e})},t.prototype.handleOptionMouseEnter=function(e,t){this.setState({hovered:t})},t.prototype.handleOptionMouseOut=function(e,t){this.setState({hovered:null})},t.prototype.handleOptionTouchEnd=function(e,t){this.handleOptionClick(e,t)},t.prototype.handleOptionClick=function(e,t){var n=this.state.options[t],o=this.templateInputValue(n);this.props.onSelect(n),this.setState({focused:-1,menuOpen:!1,query:o,selected:-1})},t.prototype.handleOptionMouseDown=function(e){e.preventDefault()},t.prototype.handleUpArrow=function(e){e.preventDefault();var t=this.state,n=t.menuOpen,o=t.selected;-1!==o&&n&&this.handleOptionFocus(o-1)},t.prototype.handleDownArrow=function(e){e.preventDefault();var t=this.state,n=t.menuOpen,o=t.options,r=t.selected;r!==o.length-1&&n&&this.handleOptionFocus(r+1)},t.prototype.handleEnter=function(e){this.state.menuOpen&&(e.preventDefault(),this.state.selected>=0&&this.handleOptionClick(e,this.state.selected))},t.prototype.handlePrintableKey=function(e){var t=this.elementRefs[-1];e.target===t||this.handleInputFocus()},t.prototype.handleKeyDown=function(e){switch(f[e.keyCode]){case"up":this.handleUpArrow(e);break;case"down":this.handleDownArrow(e);break;case"enter":this.handleEnter(e);break;case"escape":this.handleComponentBlur({query:this.state.query});break;default:u(e.keyCode)&&this.handlePrintableKey(e)}},t.prototype.render=function(){var e=this,t=this.props,n=t.cssNamespace,o=t.displayMenu,r=t.id,i=t.minLength,l=t.name,u=this.state,a=u.focused,s=u.hovered,c=u.menuOpen,f=u.options,m=u.query,v=u.selected,y=this.hasAutoselect(),b=-1===a,g=0===f.length,_=0!==m.length,O=m.length>=i,x=this.props.showNoOptionsFound&&b&&g&&_&&O,w=function(t){var o=t.children;return(0,p.h)("div",{className:n+"__wrapper",onKeyDown:e.handleKeyDown},o)},C=function(){var t=e.templateInputValue(f[v]),o=t&&0===t.toLowerCase().indexOf(m.toLowerCase()),r=o&&y?m+t.substr(m.length):"";return r?(0,p.h)("input",{className:n+"__hint",readonly:!0,tabindex:"-1",value:r}):null},N=function(){var t=n+"__input",o=null!==a,i=o?" "+t+"--focused":"",u=""+t+i;return(0,p.h)("input",{"aria-activedescendant":-1!==a&&null!==a&&r+"__option--"+a,"aria-expanded":c,"aria-owns":r+"__listbox",autocomplete:"off",className:u,id:r,name:l,onBlur:e.handleInputBlur,onFocus:e.handleInputFocus,onInput:e.handleInputChange,placeholder:e.props.placeholder,role:"combobox",type:"text",value:m})},E=function(e){var t=e.children,i=n+"__menu",l=i+"--"+(c||x?"visible":"hidden"),u=i+" "+i+"--"+o+" "+l;return(0,p.h)("ul",{className:u,id:r+"__listbox",role:"listbox"},t)},S=function(){return(0,p.h)("li",{className:n+"__option "+n+"__option--no-results"},"No results found")},I=function(t){var o=t.dangerouslySetInnerHTML,i=t.idx,l=n+"__option",u=-1===a?v===i:a===i,c=u&&null===s?" "+l+"--focused":"",d=i%2?" "+l+"--odd":"",f=""+l+c+d;return(0,p.h)("li",{"aria-selected":a===i,className:f,dangerouslySetInnerHTML:o,id:r+"__option--"+i,onClick:function(t){return e.handleOptionClick(t,i)},onFocusOut:function(t){return e.handleOptionFocusOut(t,i)},onMouseDown:e.handleOptionMouseDown,onMouseEnter:function(t){return e.handleOptionMouseEnter(t,i)},onMouseOut:function(t){return e.handleOptionMouseOut(t,i)},onTouchEnd:function(t){return e.handleOptionTouchEnd(t,i)},role:"option",tabindex:"-1"})};return(0,p.h)(w,null,(0,p.h)(d.default,{length:f.length,queryLength:m.length,minQueryLength:i,selectedOption:this.templateInputValue(f[v])}),h&&(0,p.h)(C,null),(0,p.h)(N,{ref:function(t){e.elementRefs[-1]=t}}),(0,p.h)(E,null,f.map(function(t,n){return(0,p.h)(I,{dangerouslySetInnerHTML:{__html:e.templateSuggestion(t)},idx:n,ref:function(t){e.elementRefs[n]=t}})}),x&&(0,p.h)(S,null)))},t}(p.Component),a.defaultProps={autoselect:!1,cssNamespace:"autocomplete",defaultValue:"",displayMenu:"inline",id:"autocomplete",minLength:0,name:"input-autocomplete",placeholder:"",onSelect:function(){},selectOnBlur:!0,showNoOptionsFound:!0},s);t.default=m},function(e,t,n){"use strict";function o(e,t){}function r(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){"function"!=typeof t&&null!==t||(e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t))}t.__esModule=!0,t.default=void 0;var l=n(0),u=function(e){function t(){var n,i,l;o(this,t);for(var u=arguments.length,a=Array(u),s=0;s<u;s++)a[s]=arguments[s];return n=i=r(this,e.call.apply(e,[this].concat(a))),i.state={bump:!1},l=n,r(i,l)}return i(t,e),t.prototype.componentWillReceiveProps=function(e){e.queryLength!==this.props.queryLength&&this.setState(function(e){return{bump:!e.bump}})},t.prototype.render=function(){var e=this.props,t=e.length,n=e.queryLength,o=e.minQueryLength,r=e.selectedOption,i=this.state.bump,u={result:1===t?"result":"results",is:1===t?"is":"are"},a=n<o,s=0===t;return(0,l.h)("div",{"aria-atomic":"true","aria-live":"polite",role:"status",style:{border:"0",clip:"rect(0 0 0 0)",height:"1px",marginBottom:"-1px",marginRight:"-1px",overflow:"hidden",padding:"0",position:"absolute",whiteSpace:"nowrap",width:"1px"}},a?(0,l.h)("span",null,"Type in ",o," or more characters for results."):s?(0,l.h)("span",null,"No search results."):(0,l.h)("span",null,t," ",u.result," ",u.is," available. ",r?(0,l.h)("span",null,r," (1 of ",t,") is selected."):null),(0,l.h)("span",null,i?",":",,"))},t}(l.Component);t.default=u},function(e,t,n){e.exports=n(1)}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.accessibleAutocomplete=t():e.accessibleAutocomplete=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=4)}([function(e,t,n){!function(e,n){!function(e){function t(e,t,n){this.nodeName=e,this.attributes=t,this.children=n,this.key=t&&t.key}function n(e,n){var o,r,i,l,u=[];for(l=arguments.length;l-- >2;)V.push(arguments[l]);for(n&&n.children&&(V.length||V.push(n.children),delete n.children);V.length;)if((r=V.pop())instanceof Array)for(l=r.length;l--;)V.push(r[l]);else null!=r&&!1!==r&&("number"!=typeof r&&!0!==r||(r=String(r)),i="string"==typeof r,i&&o?u[u.length-1]+=r:(u.push(r),o=i));var a=new t(e,n||void 0,u);return F.vnode&&F.vnode(a),a}function o(e,t){if(t)for(var n in t)e[n]=t[n];return e}function r(e){return o({},e)}function i(e,t){for(var n=t.split("."),o=0;o<n.length&&e;o++)e=e[n[o]];return e}function l(e){return"function"==typeof e}function u(e){return"string"==typeof e}function a(e){var t="";for(var n in e)e[n]&&(t&&(t+=" "),t+=n);return t}function s(e,t){return n(e.nodeName,o(r(e.attributes),t),arguments.length>2?[].slice.call(arguments,2):e.children)}function p(e,t,n){var o=t.split(".");return function(t){for(var r=t&&t.target||this,l={},a=l,s=u(n)?i(t,n):r.nodeName?r.type.match(/^che|rad/)?r.checked:r.value:t,p=0;p<o.length-1;p++)a=a[o[p]]||(a[o[p]]=!p&&e.state[o[p]]||{});a[o[p]]=s,e.setState(l)}}function c(e){!e._dirty&&(e._dirty=!0)&&1==$.push(e)&&(F.debounceRendering||H)(d)}function d(){var e,t=$;for($=[];e=t.pop();)e._dirty&&T(e)}function f(e){var t=e&&e.nodeName;return t&&l(t)&&!(t.prototype&&t.prototype.render)}function h(e,t){return e.nodeName(y(e),t||K)}function m(e,t){return u(t)?e instanceof Text:u(t.nodeName)?v(e,t.nodeName):l(t.nodeName)?e._componentConstructor===t.nodeName||f(t):void 0}function v(e,t){return e.normalizedNodeName===t||R(e.nodeName)===R(t)}function y(e){var t=r(e.attributes);t.children=e.children;var n=e.nodeName.defaultProps;if(n)for(var o in n)void 0===t[o]&&(t[o]=n[o]);return t}function b(e){var t=e.parentNode;t&&t.removeChild(e)}function g(e,t,n,o,r){if("className"===t&&(t="class"),"class"===t&&o&&"object"==typeof o&&(o=a(o)),"key"===t);else if("class"!==t||r)if("style"===t){if((!o||u(o)||u(n))&&(e.style.cssText=o||""),o&&"object"==typeof o){if(!u(n))for(var i in n)i in o||(e.style[i]="");for(var i in o)e.style[i]="number"!=typeof o[i]||G[i]?o[i]:o[i]+"px"}}else if("dangerouslySetInnerHTML"===t)o&&(e.innerHTML=o.__html);else if("o"==t[0]&&"n"==t[1]){var s=e._listeners||(e._listeners={});t=R(t.substring(2)),o?s[t]||e.addEventListener(t,O,!!Q[t]):s[t]&&e.removeEventListener(t,O,!!Q[t]),s[t]=o}else if("list"!==t&&"type"!==t&&!r&&t in e)_(e,t,null==o?"":o),null!=o&&!1!==o||e.removeAttribute(t);else{var p=r&&t.match(/^xlink\:?(.+)/);null==o||!1===o?p?e.removeAttributeNS("http://www.w3.org/1999/xlink",R(p[1])):e.removeAttribute(t):"object"==typeof o||l(o)||(p?e.setAttributeNS("http://www.w3.org/1999/xlink",R(p[1]),o):e.setAttribute(t,o))}else e.className=o||""}function _(e,t,n){try{e[t]=n}catch(e){}}function O(e){return this._listeners[e.type](F.event&&F.event(e)||e)}function x(e){if(b(e),e instanceof Element){e._component=e._componentConstructor=null;var t=e.normalizedNodeName||R(e.nodeName);(J[t]||(J[t]=[])).push(e)}}function C(e,t){var n=R(e),o=J[n]&&J[n].pop()||(t?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e));return o.normalizedNodeName=n,o}function w(){for(var e;e=X.pop();)F.afterMount&&F.afterMount(e),e.componentDidMount&&e.componentDidMount()}function N(e,t,n,o,r,i){Y++||(Z=r instanceof SVGElement);var l=E(e,t,n,o);return r&&l.parentNode!==r&&r.appendChild(l),--Y||i||w(),l}function E(e,t,n,o){for(var r=t&&t.attributes;f(t);)t=h(t,n);if(null==t&&(t=""),u(t)){if(e){if(e instanceof Text&&e.parentNode)return e.nodeValue!=t&&(e.nodeValue=t),e;k(e)}return document.createTextNode(t)}if(l(t.nodeName))return L(e,t,n,o);var i=e,a=t.nodeName,s=Z,p=t.children;if(u(a)||(a=String(a)),Z="svg"===a||"foreignObject"!==a&&Z,e){if(!v(e,a)){for(i=C(a,Z);e.firstChild;)i.appendChild(e.firstChild);k(e)}}else i=C(a,Z);p&&1===p.length&&"string"==typeof p[0]&&1===i.childNodes.length&&i.firstChild instanceof Text?i.firstChild.nodeValue!=p[0]&&(i.firstChild.nodeValue=p[0]):(p&&p.length||i.firstChild)&&I(i,p,n,o);var c=i[z];if(!c){i[z]=c={};for(var d=i.attributes,m=d.length;m--;)c[d[m].name]=d[m].value}return S(i,t.attributes,c),r&&"function"==typeof r.ref&&(c.ref=r.ref)(i),Z=s,i}function I(e,t,n,o){var r,i,u,a,s=e.childNodes,p=[],c={},d=0,f=0,h=s.length,v=0,y=t&&t.length;if(h)for(var b=0;b<h;b++){var g=s[b],_=y?(i=g._component)?i.__key:(i=g[z])?i.key:null:null;_||0===_?(d++,c[_]=g):p[v++]=g}if(y)for(var b=0;b<y;b++){u=t[b],a=null;var _=u.key;if(null!=_)d&&_ in c&&(a=c[_],c[_]=void 0,d--);else if(!a&&f<v){for(r=f;r<v;r++)if((i=p[r])&&m(i,u)){a=i,p[r]=void 0,r===v-1&&v--,r===f&&f++;break}!a&&f<v&&l(u.nodeName)&&o&&(a=p[f],p[f++]=void 0)}(a=E(a,u,n,o))&&a!==e&&a!==s[b]&&e.insertBefore(a,s[b]||null)}if(d)for(var b in c)c[b]&&k(c[b]);f<v&&M(p)}function M(e,t){for(var n=e.length;n--;)e[n]&&k(e[n],t)}function k(e,t){var n=e._component;n?B(n,!t):(e[z]&&e[z].ref&&e[z].ref(null),t||x(e),e.childNodes&&e.childNodes.length&&M(e.childNodes,t))}function S(e,t,n){for(var o in n)t&&o in t||null==n[o]||g(e,o,n[o],n[o]=void 0,Z);if(t)for(var r in t)"children"===r||"innerHTML"===r||r in n&&t[r]===("value"===r||"checked"===r?e[r]:n[r])||g(e,r,n[r],n[r]=t[r],Z)}function D(e){var t=e.constructor.name,n=ee[t];n?n.push(e):ee[t]=[e]}function A(e,t,n){var o=new e(t,n),r=ee[e.name];if(U.call(o,t,n),r)for(var i=r.length;i--;)if(r[i].constructor===e){o.nextBase=r[i].nextBase,r.splice(i,1);break}return o}function P(e,t,n,o,r){e._disable||(e._disable=!0,(e.__ref=t.ref)&&delete t.ref,(e.__key=t.key)&&delete t.key,!e.base||r?e.componentWillMount&&e.componentWillMount():e.componentWillReceiveProps&&e.componentWillReceiveProps(t,o),o&&o!==e.context&&(e.prevContext||(e.prevContext=e.context),e.context=o),e.prevProps||(e.prevProps=e.props),e.props=t,e._disable=!1,0!==n&&(1!==n&&!1===F.syncComponentUpdates&&e.base?c(e):T(e,1,r)),e.__ref&&e.__ref(e))}function T(e,t,n,i){if(!e._disable){var u,a,s,p,c=e.props,d=e.state,m=e.context,v=e.prevProps||c,b=e.prevState||d,g=e.prevContext||m,_=e.base,O=e.nextBase,x=_||O,C=e._component;if(_&&(e.props=v,e.state=b,e.context=g,2!==t&&e.shouldComponentUpdate&&!1===e.shouldComponentUpdate(c,d,m)?u=!0:e.componentWillUpdate&&e.componentWillUpdate(c,d,m),e.props=c,e.state=d,e.context=m),e.prevProps=e.prevState=e.prevContext=e.nextBase=null,e._dirty=!1,!u){for(e.render&&(a=e.render(c,d,m)),e.getChildContext&&(m=o(r(m),e.getChildContext()));f(a);)a=h(a,m);var E,I,M=a&&a.nodeName;if(l(M)){s=C;var S=y(a);s&&s.constructor===M?P(s,S,1,m):(E=s,s=A(M,S,m),s.nextBase=s.nextBase||O,s._parentComponent=e,e._component=s,P(s,S,0,m),T(s,1,n,!0)),I=s.base}else p=x,E=C,E&&(p=e._component=null),(x||1===t)&&(p&&(p._component=null),I=N(p,a,m,n||!_,x&&x.parentNode,!0));if(x&&I!==x&&s!==C){var D=x.parentNode;D&&I!==D&&(D.replaceChild(I,x),E||(x._component=null,k(x)))}if(E&&B(E,I!==x),e.base=I,I&&!i){for(var L=e,U=e;U=U._parentComponent;)(L=U).base=I;I._component=L,I._componentConstructor=L.constructor}}!_||n?X.unshift(e):u||(e.componentDidUpdate&&e.componentDidUpdate(v,b,g),F.afterUpdate&&F.afterUpdate(e));var j,V=e._renderCallbacks;if(V)for(;j=V.pop();)j.call(e);Y||i||w()}}function L(e,t,n,o){for(var r=e&&e._component,i=e,l=r&&e._componentConstructor===t.nodeName,u=l,a=y(t);r&&!u&&(r=r._parentComponent);)u=r.constructor===t.nodeName;return r&&u&&(!o||r._component)?(P(r,a,3,n,o),e=r.base):(r&&!l&&(B(r,!0),e=i=null),r=A(t.nodeName,a,n),e&&!r.nextBase&&(r.nextBase=e,i=null),P(r,a,1,n,o),e=r.base,i&&e!==i&&(i._component=null,k(i))),e}function B(e,t){F.beforeUnmount&&F.beforeUnmount(e);var n=e.base;e._disable=!0,e.componentWillUnmount&&e.componentWillUnmount(),e.base=null;var o=e._component;o?B(o,t):n&&(n[z]&&n[z].ref&&n[z].ref(null),e.nextBase=n,t&&(b(n),D(e)),M(n.childNodes,!t)),e.__ref&&e.__ref(null),e.componentDidUnmount&&e.componentDidUnmount()}function U(e,t){this._dirty=!0,this.context=t,this.props=e,this.state||(this.state={})}function j(e,t,n){return N(n,e,{},!1,t)}var F={},V=[],q={},R=function(e){return q[e]||(q[e]=e.toLowerCase())},W="undefined"!=typeof Promise&&Promise.resolve(),H=W?function(e){W.then(e)}:setTimeout,K={},z="undefined"!=typeof Symbol?Symbol.for("preactattr"):"__preactattr_",G={boxFlex:1,boxFlexGroup:1,columnCount:1,fillOpacity:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,fontWeight:1,lineClamp:1,lineHeight:1,opacity:1,order:1,orphans:1,strokeOpacity:1,widows:1,zIndex:1,zoom:1},Q={blur:1,error:1,focus:1,load:1,resize:1,scroll:1},$=[],J={},X=[],Y=0,Z=!1,ee={};o(U.prototype,{linkState:function(e,t){var n=this._linkedStates||(this._linkedStates={});return n[e+t]||(n[e+t]=p(this,e,t))},setState:function(e,t){var n=this.state;this.prevState||(this.prevState=r(n)),o(n,l(e)?e(n,this.props):e),t&&(this._renderCallbacks=this._renderCallbacks||[]).push(t),c(this)},forceUpdate:function(){T(this,2)},render:function(){}}),e.h=n,e.cloneElement=s,e.Component=U,e.render=j,e.rerender=d,e.options=F}(t)}()},function(e,t,n){"use strict";function o(e){if(!e.element)throw new Error("element is not defined");if(!e.id)throw new Error("id is not defined");if(!e.source)throw new Error("source is not defined");(0,i.render)((0,i.h)(u.default,e),e.element)}var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},i=n(0),l=n(2),u=function(e){return e&&e.__esModule?e:{default:e}}(l),a=function(e){return function(t,n){n(t?e.filter(function(e){return-1!==e.toLowerCase().indexOf(t.toLowerCase())}):[])}};o.enhanceSelectElement=function(e){if(!e.selectElement)throw new Error("selectElement is not defined");if(!e.source){var t=Array.prototype.map.call(e.selectElement.options,function(e){return e.innerHTML});e.source=a(t)}e.onConfirm=e.onConfirm||function(t){var n=Array.prototype.filter.call(e.selectElement.options,function(e){return e.innerHTML===t})[0];n&&(n.selected=!0)},e.defaultValue?e.selectElement.value=e.defaultValue:e.defaultValue=e.selectElement.options[e.selectElement.options.selectedIndex].innerHTML,e.name=e.name||e.selectElement.name||"",e.id=e.id||e.selectElement.id||"",e.autoselect=e.autoselect||!0;var n=document.createElement("span");e.selectElement.insertAdjacentElement("afterend",n),o(r({},e,{element:n})),e.selectElement.style.display="none",e.selectElement.id=e.selectElement.id+"-select"},e.exports=o},function(e,t,n){"use strict";function o(e,t){}function r(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){"function"!=typeof t&&null!==t||(e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t))}function l(){return!(!navigator.userAgent.match(/(iPod|iPhone|iPad)/g)||!navigator.userAgent.match(/AppleWebKit/g))}function u(e){return e>47&&e<58||32===e||8===e||e>64&&e<91||e>95&&e<112||e>185&&e<193||e>218&&e<223}t.__esModule=!0,t.default=void 0;var a,s,p=n(0),c=n(3),d=function(e){return e&&e.__esModule?e:{default:e}}(c),f={13:"enter",27:"escape",38:"up",40:"down"},h=function(){var e=document.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}(),m=(s=a=function(e){function t(n){o(this,t);var i=r(this,e.call(this,n));return i.elementRefs={},i.state={focused:null,hovered:null,menuOpen:!1,options:n.defaultValue?[n.defaultValue]:[],query:n.defaultValue,selected:null},i.handleComponentBlur=i.handleComponentBlur.bind(i),i.handleKeyDown=i.handleKeyDown.bind(i),i.handleUpArrow=i.handleUpArrow.bind(i),i.handleDownArrow=i.handleDownArrow.bind(i),i.handleEnter=i.handleEnter.bind(i),i.handlePrintableKey=i.handlePrintableKey.bind(i),i.handleOptionClick=i.handleOptionClick.bind(i),i.handleOptionFocusOut=i.handleOptionFocusOut.bind(i),i.handleOptionFocus=i.handleOptionFocus.bind(i),i.handleOptionMouseDown=i.handleOptionMouseDown.bind(i),i.handleOptionMouseEnter=i.handleOptionMouseEnter.bind(i),i.handleOptionMouseOut=i.handleOptionMouseOut.bind(i),i.handleOptionTouchEnd=i.handleOptionTouchEnd.bind(i),i.handleInputBlur=i.handleInputBlur.bind(i),i.handleInputChange=i.handleInputChange.bind(i),i.handleInputFocus=i.handleInputFocus.bind(i),i.pollInputElement=i.pollInputElement.bind(i),i.getDirectInputChanges=i.getDirectInputChanges.bind(i),i}return i(t,e),t.prototype.componentDidMount=function(){this.pollInputElement()},t.prototype.componentWillUnmount=function(){clearTimeout(this.$pollInput)},t.prototype.pollInputElement=function(){var e=this;this.getDirectInputChanges(),this.$pollInput=setTimeout(function(){e.pollInputElement()},100)},t.prototype.getDirectInputChanges=function(){var e=this.elementRefs[-1];e.value!==this.state.query&&this.handleInputChange({target:{value:e.value}})},t.prototype.componentDidUpdate=function(e,t){var n=this.state.focused,o=null===n,r=t.focused!==n;r&&!o&&this.elementRefs[n].focus();var i=-1===n,l=r&&null===t.focused;if(i&&l){var u=this.elementRefs[n];u.setSelectionRange(0,u.value.length)}},t.prototype.hasAutoselect=function(){return!l()&&this.props.autoselect},t.prototype.templateInputValue=function(e){var t=this.props.templates&&this.props.templates.inputValue;return t?t(e):e},t.prototype.templateSuggestion=function(e){var t=this.props.templates&&this.props.templates.suggestion;return t?t(e):e},t.prototype.handleComponentBlur=function(e){var t=this.state,n=t.options,o=t.query,r=t.selected,i=void 0;this.props.confirmOnBlur?(i=e.query||o,this.props.onConfirm(n[r])):i=o,this.setState({focused:null,menuOpen:e.menuOpen||!1,query:i,selected:null})},t.prototype.handleOptionFocusOut=function(e,t){var n=this.state,o=n.focused,r=n.menuOpen,i=n.options,u=n.selected,a=null===e.relatedTarget,s=e.relatedTarget===this.elementRefs[-1],p=o!==t&&-1!==o;if(a||!p&&!s){var c=r&&l();this.handleComponentBlur({menuOpen:c,query:this.templateInputValue(i[u])})}},t.prototype.handleInputBlur=function(e){var t=this.state,n=t.focused,o=t.menuOpen,r=t.options,i=t.query,u=t.selected;if(-1===n){var a=o&&l(),s=l()?i:this.templateInputValue(r[u]);this.handleComponentBlur({menuOpen:a,query:s})}},t.prototype.handleInputChange=function(e){var t=this,n=this.props,o=n.minLength,r=n.source,i=this.hasAutoselect(),l=e.target.value,u=0===l.length,a=this.state.query.length!==l.length,s=l.length>=o;this.setState({query:l}),!u&&a&&s?r(l,function(e){var n=e.length>0;t.setState({menuOpen:n,options:e,selected:i&&n?0:-1})}):!u&&s||this.setState({menuOpen:!1,options:[]})},t.prototype.handleInputFocus=function(e){this.setState({focused:-1})},t.prototype.handleOptionFocus=function(e){this.setState({focused:e,hovered:null,selected:e})},t.prototype.handleOptionMouseEnter=function(e,t){this.setState({hovered:t})},t.prototype.handleOptionMouseOut=function(e,t){this.setState({hovered:null})},t.prototype.handleOptionTouchEnd=function(e,t){this.handleOptionClick(e,t)},t.prototype.handleOptionClick=function(e,t){var n=this.state.options[t],o=this.templateInputValue(n);this.props.onConfirm(n),this.setState({focused:-1,menuOpen:!1,query:o,selected:-1})},t.prototype.handleOptionMouseDown=function(e){e.preventDefault()},t.prototype.handleUpArrow=function(e){e.preventDefault();var t=this.state,n=t.menuOpen,o=t.selected;-1!==o&&n&&this.handleOptionFocus(o-1)},t.prototype.handleDownArrow=function(e){e.preventDefault();var t=this.state,n=t.menuOpen,o=t.options,r=t.selected;r!==o.length-1&&n&&this.handleOptionFocus(r+1)},t.prototype.handleEnter=function(e){this.state.menuOpen&&(e.preventDefault(),this.state.selected>=0&&this.handleOptionClick(e,this.state.selected))},t.prototype.handlePrintableKey=function(e){var t=this.elementRefs[-1];e.target===t||this.handleInputFocus()},t.prototype.handleKeyDown=function(e){switch(f[e.keyCode]){case"up":this.handleUpArrow(e);break;case"down":this.handleDownArrow(e);break;case"enter":this.handleEnter(e);break;case"escape":this.handleComponentBlur({query:this.state.query});break;default:u(e.keyCode)&&this.handlePrintableKey(e)}},t.prototype.render=function(){var e=this,t=this.props,n=t.cssNamespace,o=t.displayMenu,r=t.id,i=t.minLength,l=t.name,u=this.state,a=u.focused,s=u.hovered,c=u.menuOpen,f=u.options,m=u.query,v=u.selected,y=this.hasAutoselect(),b=-1===a,g=0===f.length,_=0!==m.length,O=m.length>=i,x=this.props.showNoOptionsFound&&b&&g&&_&&O,C=function(t){var o=t.children;return(0,p.h)("div",{className:n+"__wrapper",onKeyDown:e.handleKeyDown},o)},w=function(){var t=e.templateInputValue(f[v]),o=t&&0===t.toLowerCase().indexOf(m.toLowerCase()),r=o&&y?m+t.substr(m.length):"";return r?(0,p.h)("input",{className:n+"__hint",readonly:!0,tabindex:"-1",value:r}):null},N=function(){var t=n+"__input",o=null!==a,i=o?" "+t+"--focused":"",u=""+t+i;return(0,p.h)("input",{"aria-activedescendant":-1!==a&&null!==a&&r+"__option--"+a,"aria-expanded":c,"aria-owns":r+"__listbox",autocomplete:"off",className:u,id:r,name:l,onBlur:e.handleInputBlur,onFocus:e.handleInputFocus,onInput:e.handleInputChange,placeholder:e.props.placeholder,role:"combobox",type:"text",value:m})},E=function(e){var t=e.children,i=n+"__menu",l=i+"--"+(c||x?"visible":"hidden"),u=i+" "+i+"--"+o+" "+l;return(0,p.h)("ul",{className:u,id:r+"__listbox",role:"listbox"},t)},I=function(){return(0,p.h)("li",{className:n+"__option "+n+"__option--no-results"},"No results found")},M=function(t){var o=t.dangerouslySetInnerHTML,i=t.idx,l=n+"__option",u=-1===a?v===i:a===i,c=u&&null===s?" "+l+"--focused":"",d=i%2?" "+l+"--odd":"",f=""+l+c+d;return(0,p.h)("li",{"aria-selected":a===i,className:f,dangerouslySetInnerHTML:o,id:r+"__option--"+i,onClick:function(t){return e.handleOptionClick(t,i)},onFocusOut:function(t){return e.handleOptionFocusOut(t,i)},onMouseDown:e.handleOptionMouseDown,onMouseEnter:function(t){return e.handleOptionMouseEnter(t,i)},onMouseOut:function(t){return e.handleOptionMouseOut(t,i)},onTouchEnd:function(t){return e.handleOptionTouchEnd(t,i)},role:"option",tabindex:"-1"})};return(0,p.h)(C,null,(0,p.h)(d.default,{length:f.length,queryLength:m.length,minQueryLength:i,selectedOption:this.templateInputValue(f[v])}),h&&(0,p.h)(w,null),(0,p.h)(N,{ref:function(t){e.elementRefs[-1]=t}}),(0,p.h)(E,null,f.map(function(t,n){return(0,p.h)(M,{dangerouslySetInnerHTML:{__html:e.templateSuggestion(t)},idx:n,ref:function(t){e.elementRefs[n]=t}})}),x&&(0,p.h)(I,null)))},t}(p.Component),a.defaultProps={autoselect:!1,cssNamespace:"autocomplete",defaultValue:"",displayMenu:"inline",id:"autocomplete",minLength:0,name:"input-autocomplete",placeholder:"",onConfirm:function(){},confirmOnBlur:!0,showNoOptionsFound:!0},s);t.default=m},function(e,t,n){"use strict";function o(e,t){}function r(e,t){if(e)return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){"function"!=typeof t&&null!==t||(e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t))}t.__esModule=!0,t.default=void 0;var l=n(0),u=function(e){function t(){var n,i,l;o(this,t);for(var u=arguments.length,a=Array(u),s=0;s<u;s++)a[s]=arguments[s];return n=i=r(this,e.call.apply(e,[this].concat(a))),i.state={bump:!1},l=n,r(i,l)}return i(t,e),t.prototype.componentWillReceiveProps=function(e){e.queryLength!==this.props.queryLength&&this.setState(function(e){return{bump:!e.bump}})},t.prototype.render=function(){var e=this.props,t=e.length,n=e.queryLength,o=e.minQueryLength,r=e.selectedOption,i=this.state.bump,u={result:1===t?"result":"results",is:1===t?"is":"are"},a=n<o,s=0===t;return(0,l.h)("div",{"aria-atomic":"true","aria-live":"polite",role:"status",style:{border:"0",clip:"rect(0 0 0 0)",height:"1px",marginBottom:"-1px",marginRight:"-1px",overflow:"hidden",padding:"0",position:"absolute",whiteSpace:"nowrap",width:"1px"}},a?(0,l.h)("span",null,"Type in ",o," or more characters for results."):s?(0,l.h)("span",null,"No search results."):(0,l.h)("span",null,t," ",u.result," ",u.is," available. ",r?(0,l.h)("span",null,r," (1 of ",t,") is selected."):null),(0,l.h)("span",null,i?",":",,"))},t}(l.Component);t.default=u},function(e,t,n){e.exports=n(1)}])}); | ||
| //# sourceMappingURL=accessible-autocomplete.min.js.map |
| { | ||
| "name": "accessible-autocomplete", | ||
| "version": "0.6.0", | ||
| "version": "1.0.0", | ||
| "main": "dist/accessible-autocomplete.min.js", | ||
@@ -20,5 +20,5 @@ "style": "dist/styled.min.css", | ||
| "scripts": { | ||
| "build:css": "csso examples/styled.css -o dist/accessible-autocomplete.min.css", | ||
| "build:css": "csso src/autocomplete.css -o dist/accessible-autocomplete.min.css", | ||
| "build:js": "cross-env NODE_ENV=production webpack -p --progress --display-modules", | ||
| "build": "run-p 'build:*'", | ||
| "build": "run-s 'build:js' 'build:css'", | ||
| "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress", | ||
@@ -48,2 +48,3 @@ "karma:dev": "karma start test/karma.config.js", | ||
| "chai": "^3.5.0", | ||
| "copy-webpack-plugin": "^4.0.1", | ||
| "coveralls": "^2.13.1", | ||
@@ -73,4 +74,4 @@ "cross-env": "^3.1.3", | ||
| "wdio-mocha-framework": "^0.5.10", | ||
| "wdio-phantomjs-service": "^0.2.2", | ||
| "wdio-sauce-service": "^0.4.0", | ||
| "wdio-selenium-standalone-service": "^0.0.8", | ||
| "wdio-spec-reporter": "^0.1.0", | ||
@@ -77,0 +78,0 @@ "wdio-static-server-service": "^1.0.1", |
110
README.md
@@ -1,5 +0,3 @@ | ||
| > :warning: WARNING: This project is still experimental / under development. Do not use in production. :warning: | ||
| # Accessible autocomplete | ||
| # Accessible Autocomplete | ||
| [](http://npm.im/accessible-autocomplete) | ||
@@ -21,3 +19,3 @@ [](https://travis-ci.org/alphagov/accessible-autocomplete) | ||
| ## Installation / Usage | ||
| ## Installation / usage | ||
@@ -70,6 +68,4 @@ ### Using npm | ||
| ## API Documentation | ||
| ## API documentation | ||
| > :warning: WARNING: This is a work in progress and will change significantly. :warning: | ||
| ### Required options | ||
@@ -79,9 +75,15 @@ | ||
| Type: `PropTypes.instanceOf(HTMLElement)` | ||
| Type: `HTMLElement` | ||
| The container element in which the autocomplete will be rendered in. | ||
| #### `id` (default: `'autocomplete'`) | ||
| Type: `string` | ||
| The `id` to assign to the autocomplete input field, to use with a `<label for=id>`. Not required if using `enhanceSelectElement`. | ||
| #### `source` | ||
| Type: `PropTypes.func` | ||
| Type: `Function` | ||
@@ -110,17 +112,21 @@ Arguments: `query: string, populateResults: Function` | ||
| Type: `PropTypes.bool` | ||
| Type: `Boolean` | ||
| Set to true to highlight the first option when the user types in something and receives results. Pressing enter will select it. | ||
| #### `confirmOnBlur` (default: `true`) | ||
| Type: `Boolean` | ||
| The autocomplete will confirm the currently selected option when the user clicks outside of the component. Set to `false` to disable. | ||
| #### `cssNamespace` (default: `'autocomplete'`) | ||
| Type: `PropTypes.string` | ||
| Type: `string` | ||
| The default CSS classes use [BEM](http://getbem.com/) with `autocomplete` as the block name. If you already have CSS rules for `.autocomplete--menu` or any of the other default classes, you can use this property to rename them and prevent clashes. | ||
| Use this property to override the [BEM](http://getbem.com/) block name that the JavaScript component will use. You will need to rewrite the CSS class names to use your specified block name. | ||
| TODO: Better styling docs. | ||
| #### `defaultValue` (default: `''`) | ||
| Type: `PropTypes.string` | ||
| Type: `string` | ||
@@ -131,15 +137,9 @@ Specify a string to prefill the autocomplete with. | ||
| Type: `PropTypes.oneOf(['inline', 'overlay'])` | ||
| Type: `'inline' | 'overlay'` | ||
| You can set this property to specify the way the menu should appear, whether inline or as an overlay. | ||
| #### `id` (default: `'autocomplete'`) | ||
| Type: `PropTypes.string` | ||
| The `id` for the autocomplete input field, to use with a `<label for=id>`. Required if you're instantiating more than one autocomplete in one page. | ||
| #### `minLength` (default: `0`) | ||
| Type: `PropTypes.number` | ||
| Type: `number` | ||
@@ -150,34 +150,37 @@ The minimum number of characters that should be entered before the autocomplete will attempt to suggest options. When the query length is under this, the aria status region will also provide helpful text to the user informing them they should type in more. | ||
| Type: `PropTypes.string` | ||
| Type: `string` | ||
| The `name` for the autocomplete input field, to use with a parent `<form>`. | ||
| #### `onSelect` (default: `() => {}`) | ||
| #### `onConfirm` (default: `() => {}`) | ||
| Type: `PropTypes.func` | ||
| Type: `Function` | ||
| Arguments: `selected: Object` | ||
| Arguments: `confirmed: Object` | ||
| This function will be called when the user selects an option, with the option they've selected. | ||
| This function will be called when the user confirms an option, with the option they've confirmed. | ||
| #### `selectOnBlur` (default: `true`) | ||
| #### `placeholder` (default: `''`) :warning: not recommended :warning: | ||
| Type: `PropTypes.bool` | ||
| Type: `string` | ||
| Set this value to `false` to stop the autocomplete from automatically confirming a value when it has been selected using autoselect or the keyboard and the user "blurs" (clicks outside of the component). | ||
| This option will populate the `placeholder` attribute on the input element. | ||
| #### `showNoOptionsFound` (default: `true`) | ||
| We think [placeholders have usability issues](http://adamsilver.io/articles/placeholders-are-problematic/) and that there are [better alternatives to input placeholder text](https://govuk-elements.herokuapp.com/form-elements/#form-hint-text), so we do not recommend using this option. | ||
| Type: `PropTypes.bool` | ||
| #### `showNoResultsFound` (default: `true`) | ||
| Set this value to `false` to not display the "No options found" template when there are no results available. Some autocompletes might intermittently display results between different search term roots (like one based on [lunrjs](http://lunrjs.com/)), and as such wouldn't need to use this. | ||
| Type: `Boolean` | ||
| The autocomplete will display a "No results found" template when there are no results. Set to `false` to disable. | ||
| #### `templates` (default: `undefined`) | ||
| Type: | ||
| ```js | ||
| PropTypes.shape({ | ||
| inputValue: PropTypes.func, | ||
| suggestion: PropTypes.func | ||
| }) | ||
| { | ||
| inputValue: Function, | ||
| suggestion: Function | ||
| } | ||
| ``` | ||
@@ -187,17 +190,9 @@ | ||
| `inputValue` is a function that receives one argument, the currently selected suggestion. It is used to populate the value of the input field, and should return a string. | ||
| `inputValue` is a function that receives one argument, the currently selected suggestion. It returns the string value to be inserted into the input. | ||
| `suggestion` is a function that receives one argument, a suggestion to be displayed. It is used when rendering suggestions, and should return a string, which can contain HTML. :warning: **Caution:** because this function allows you to output arbitrary HTML, you should [make sure it's trusted](https://en.wikipedia.org/wiki/Cross-site_scripting), and accessible. | ||
| #### `placeholder` (default: `''`, :warning: not recommended :warning:) | ||
| Type: `PropTypes.string` | ||
| This option will populate the `placeholder` attribute on the input element. | ||
| We think [placeholders have usability issues](http://adamsilver.io/articles/placeholders-are-problematic/) and that there are [better alternatives to input placeholder text](https://govuk-elements.herokuapp.com/form-elements/#form-hint-text), so we do not recommend using this option. | ||
| ## Progressive enhancement | ||
| If your autocomplete is meant to select from a small list of options (a few hundreds), we strongly suggest that you render a `<select>` menu on the server, and use progressive enhancement. | ||
| If your autocomplete is meant to select from a small list of options (a few hundred), we strongly suggest that you render a `<select>` menu on the server, and use progressive enhancement. | ||
@@ -224,10 +219,11 @@ If you have the following HTML: | ||
| - Place an autocomplete input field adjacent to the specified `<select>` | ||
| - Place an autocomplete input field after the specified `<select>` | ||
| - Default the autocomplete `autoselect` to `true` | ||
| - Default the autocomplete `defaultValue` to the select's `option[selected]` | ||
| - Default the autocomplete `id` to the `<select>`'s `id` | ||
| - Default the autocomplete `name` attribute to `''` to prevent it being included in form submissions | ||
| - Default the autocomplete `source` to a basic one that uses any existing `<option>`s from the `<select>` | ||
| - Default the autocomplete `source` to use existing `<option>`s from the `<select>` | ||
| - Hide the `<select>` using inline `display: none` | ||
| - Set the `<select>`'s id to `${id}-select` to decouple from any `<label>` | ||
| - Upon selecting a value in the autocomplete, update the original `<select>` | ||
| - Set the `<select>`'s `id` to `${id}-select` to decouple from any `<label>` | ||
| - Upon confirming a value in the autocomplete, update the original `<select>` | ||
@@ -238,7 +234,7 @@ This function takes the same options as `accessibleAutocomplete`, with the only difference being that it uses `selectElement` instead of `element`, which needs to be an instance of `HTMLSelectElement`. | ||
| ## Analytics & Tracking | ||
| ## Analytics and tracking | ||
| The following events get triggered on he input element during the life cycle of the autocomplete: | ||
| The following events get triggered on the input element during the life cycle of the autocomplete: | ||
| - `onSelect` - This function will be called when the user selects an option, with the option they've selected. | ||
| - `onConfirm` - This function will be called when the user confirms an option, with the option they've chosen. | ||
@@ -249,4 +245,4 @@ Example usage: | ||
| accessibleAutocomplete({ | ||
| // … | ||
| onSelect: (val) => { | ||
| // additional options | ||
| onConfirm: (val) => { | ||
| track(val) | ||
@@ -253,0 +249,0 @@ } |
@@ -43,4 +43,4 @@ import { h, Component } from 'preact' /** @jsx h */ | ||
| placeholder: '', | ||
| onSelect: () => {}, | ||
| selectOnBlur: true, | ||
| onConfirm: () => {}, | ||
| confirmOnBlur: true, | ||
| showNoOptionsFound: true | ||
@@ -149,5 +149,5 @@ } | ||
| let newQuery | ||
| if (this.props.selectOnBlur) { | ||
| if (this.props.confirmOnBlur) { | ||
| newQuery = newState.query || query | ||
| this.props.onSelect(options[selected]) | ||
| this.props.onConfirm(options[selected]) | ||
| } else { | ||
@@ -253,3 +253,3 @@ newQuery = query | ||
| const newQuery = this.templateInputValue(selectedOption) | ||
| this.props.onSelect(selectedOption) | ||
| this.props.onConfirm(selectedOption) | ||
| this.setState({ | ||
@@ -256,0 +256,0 @@ focused: -1, |
@@ -5,8 +5,6 @@ import { h, render } from 'preact' /** @jsx h */ | ||
| function accessibleAutocomplete (opts) { | ||
| if (!opts.element) { | ||
| throw new Error('element is not defined') | ||
| } | ||
| if (!opts.source) { | ||
| throw new Error('source is not defined') | ||
| } | ||
| if (!opts.element) { throw new Error('element is not defined') } | ||
| if (!opts.id) { throw new Error('id is not defined') } | ||
| if (!opts.source) { throw new Error('source is not defined') } | ||
| render(<Autocomplete {...opts} />, opts.element) | ||
@@ -23,5 +21,4 @@ } | ||
| accessibleAutocomplete.enhanceSelectElement = (opts) => { | ||
| if (!opts.selectElement) { | ||
| throw new Error('selectElement is not defined') | ||
| } | ||
| if (!opts.selectElement) { throw new Error('selectElement is not defined') } | ||
| // Set defaults. | ||
@@ -32,3 +29,3 @@ if (!opts.source) { | ||
| } | ||
| opts.onSelect = opts.onSelect || (query => { | ||
| opts.onConfirm = opts.onConfirm || (query => { | ||
| const requestedOption = Array.prototype.filter.call(opts.selectElement.options, o => o.innerHTML === query)[0] | ||
@@ -44,2 +41,3 @@ if (requestedOption) { requestedOption.selected = true } | ||
| opts.id = opts.id || opts.selectElement.id || '' | ||
| opts.autoselect = opts.autoselect || true | ||
@@ -46,0 +44,0 @@ const element = document.createElement('span') |
@@ -63,4 +63,4 @@ /* global after, describe, before, beforeEach, expect, it */ | ||
| describe('behaviour', () => { | ||
| let autocomplete, autoselectAutocomplete, onSelectAutocomplete, onSelectTriggered, | ||
| autoselectOnSelectAutocomplete, selectOnBlurAutocomplete | ||
| let autocomplete, autoselectAutocomplete, onConfirmAutocomplete, onConfirmTriggered, | ||
| autoselectOnSelectAutocomplete, confirmOnBlurAutocomplete | ||
@@ -81,7 +81,7 @@ beforeEach(() => { | ||
| onSelectTriggered = false | ||
| onSelectAutocomplete = new Autocomplete({ | ||
| onConfirmTriggered = false | ||
| onConfirmAutocomplete = new Autocomplete({ | ||
| ...Autocomplete.defaultProps, | ||
| id: 'test3', | ||
| onSelect: () => { onSelectTriggered = true }, | ||
| onConfirm: () => { onConfirmTriggered = true }, | ||
| source: suggest | ||
@@ -94,11 +94,11 @@ }) | ||
| id: 'test4', | ||
| onSelect: () => { onSelectTriggered = true }, | ||
| onConfirm: () => { onConfirmTriggered = true }, | ||
| source: suggest | ||
| }) | ||
| selectOnBlurAutocomplete = new Autocomplete({ | ||
| confirmOnBlurAutocomplete = new Autocomplete({ | ||
| ...Autocomplete.defaultProps, | ||
| id: 'test5', | ||
| onSelect: () => { onSelectTriggered = true }, | ||
| selectOnBlur: false, | ||
| onConfirm: () => { onConfirmTriggered = true }, | ||
| confirmOnBlur: false, | ||
| source: suggest | ||
@@ -210,4 +210,4 @@ }) | ||
| describe('with autoselect and onSelect', () => { | ||
| it('unfocuses component, updates query, triggers onSelect', () => { | ||
| describe('with autoselect and onConfirm', () => { | ||
| it('unfocuses component, updates query, triggers onConfirm', () => { | ||
| autoselectOnSelectAutocomplete.setState({ menuOpen: true, options: ['France'], query: 'fr', focused: -1, selected: 0 }) | ||
@@ -218,14 +218,14 @@ autoselectOnSelectAutocomplete.handleInputBlur({ target: 'mock', relatedTarget: 'relatedMock' }, 0) | ||
| expect(autoselectOnSelectAutocomplete.state.query).to.equal('France') | ||
| expect(onSelectTriggered).to.equal(true) | ||
| expect(onConfirmTriggered).to.equal(true) | ||
| }) | ||
| }) | ||
| describe('with selectOnBlur false', () => { | ||
| it('unfocuses component, does not touch query, does not trigger onSelect', () => { | ||
| selectOnBlurAutocomplete.setState({ menuOpen: true, options: ['France'], query: 'fr', focused: -1, selected: 0 }) | ||
| selectOnBlurAutocomplete.handleInputBlur({ target: 'mock', relatedTarget: 'relatedMock' }, 0) | ||
| expect(selectOnBlurAutocomplete.state.focused).to.equal(null) | ||
| expect(selectOnBlurAutocomplete.state.menuOpen).to.equal(false) | ||
| expect(selectOnBlurAutocomplete.state.query).to.equal('fr') | ||
| expect(onSelectTriggered).to.equal(false) | ||
| describe('with confirmOnBlur false', () => { | ||
| it('unfocuses component, does not touch query, does not trigger onConfirm', () => { | ||
| confirmOnBlurAutocomplete.setState({ menuOpen: true, options: ['France'], query: 'fr', focused: -1, selected: 0 }) | ||
| confirmOnBlurAutocomplete.handleInputBlur({ target: 'mock', relatedTarget: 'relatedMock' }, 0) | ||
| expect(confirmOnBlurAutocomplete.state.focused).to.equal(null) | ||
| expect(confirmOnBlurAutocomplete.state.menuOpen).to.equal(false) | ||
| expect(confirmOnBlurAutocomplete.state.query).to.equal('fr') | ||
| expect(onConfirmTriggered).to.equal(false) | ||
| }) | ||
@@ -255,3 +255,3 @@ }) | ||
| describe('with option selected', () => { | ||
| describe('with selectOnBlur true', () => { | ||
| describe('with confirmOnBlur true', () => { | ||
| it('unfocuses component, updates query', () => { | ||
@@ -265,9 +265,9 @@ autocomplete.setState({ menuOpen: true, options: ['France'], query: 'fr', focused: 0, selected: 0 }) | ||
| }) | ||
| describe('with selectOnBlur false', () => { | ||
| describe('with confirmOnBlur false', () => { | ||
| it('unfocuses component, does not update query', () => { | ||
| selectOnBlurAutocomplete.setState({ menuOpen: true, options: ['France'], query: 'fr', focused: 0, selected: 0 }) | ||
| selectOnBlurAutocomplete.handleOptionFocusOut({ target: 'mock', relatedTarget: 'relatedMock' }, 0) | ||
| expect(selectOnBlurAutocomplete.state.focused).to.equal(null) | ||
| expect(selectOnBlurAutocomplete.state.menuOpen).to.equal(false) | ||
| expect(selectOnBlurAutocomplete.state.query).to.equal('fr') | ||
| confirmOnBlurAutocomplete.setState({ menuOpen: true, options: ['France'], query: 'fr', focused: 0, selected: 0 }) | ||
| confirmOnBlurAutocomplete.handleOptionFocusOut({ target: 'mock', relatedTarget: 'relatedMock' }, 0) | ||
| expect(confirmOnBlurAutocomplete.state.focused).to.equal(null) | ||
| expect(confirmOnBlurAutocomplete.state.menuOpen).to.equal(false) | ||
| expect(confirmOnBlurAutocomplete.state.query).to.equal('fr') | ||
| }) | ||
@@ -375,12 +375,12 @@ }) | ||
| describe('on an option', () => { | ||
| it('prevents default, closes the menu, sets the query, focuses the input, triggers onSelect', () => { | ||
| it('prevents default, closes the menu, sets the query, focuses the input, triggers onConfirm', () => { | ||
| let preventedDefault = false | ||
| onSelectAutocomplete.setState({ menuOpen: true, options: ['France'], focused: 0, selected: 0 }) | ||
| onSelectAutocomplete.handleKeyDown({ preventDefault: () => { preventedDefault = true }, keyCode: 13 }) | ||
| expect(onSelectAutocomplete.state.menuOpen).to.equal(false) | ||
| expect(onSelectAutocomplete.state.query).to.equal('France') | ||
| expect(onSelectAutocomplete.state.focused).to.equal(-1) | ||
| expect(onSelectAutocomplete.state.selected).to.equal(-1) | ||
| onConfirmAutocomplete.setState({ menuOpen: true, options: ['France'], focused: 0, selected: 0 }) | ||
| onConfirmAutocomplete.handleKeyDown({ preventDefault: () => { preventedDefault = true }, keyCode: 13 }) | ||
| expect(onConfirmAutocomplete.state.menuOpen).to.equal(false) | ||
| expect(onConfirmAutocomplete.state.query).to.equal('France') | ||
| expect(onConfirmAutocomplete.state.focused).to.equal(-1) | ||
| expect(onConfirmAutocomplete.state.selected).to.equal(-1) | ||
| expect(preventedDefault).to.equal(true) | ||
| expect(onSelectTriggered).to.equal(true) | ||
| expect(onConfirmTriggered).to.equal(true) | ||
| }) | ||
@@ -387,0 +387,0 @@ }) |
@@ -45,3 +45,4 @@ /* global before, beforeEach, after, describe, expect, it */ | ||
| accessibleAutocomplete.bind(null, { | ||
| element: document.querySelector('#nothing'), | ||
| element: document.querySelector('#nothing-container'), | ||
| id: 'scratch', | ||
| source: () => {} | ||
@@ -52,16 +53,16 @@ }) | ||
| it('throws an error when called without an id ', () => { | ||
| expect( | ||
| accessibleAutocomplete.bind(null, { | ||
| element: scratch, | ||
| source: () => {} | ||
| }) | ||
| ).to.throw('id is not defined') | ||
| }) | ||
| it('throws an error when called on nonexistent source', () => { | ||
| const id = 'location-picker-id' | ||
| const name = 'location-picker-name' | ||
| const options = { | ||
| fr: 'France', | ||
| de: 'Germany', | ||
| gb: 'United Kingdom' | ||
| } | ||
| const selectedOption = 'gb' | ||
| injectSelectToEnhanceIntoDOM(scratch, id, name, options, selectedOption) | ||
| expect( | ||
| accessibleAutocomplete.bind(null, { | ||
| element: document.querySelector('#' + id) | ||
| element: scratch, | ||
| id: 'scratch' | ||
| }) | ||
@@ -106,3 +107,3 @@ ).to.throw('source is not defined') | ||
| it('can enhance a select element no name', () => { | ||
| const id = false | ||
| const id = 'location-picker-id' | ||
| const name = false | ||
@@ -124,3 +125,3 @@ const options = { | ||
| const autocompleteInstance = autocompleteInstances[0] | ||
| expect(autocompleteInstance.innerHTML).to.contain(`id=""`) | ||
| expect(autocompleteInstance.innerHTML).to.contain(`id="${id}"`) | ||
| expect(autocompleteInstance.innerHTML).to.contain(`name=""`) | ||
@@ -184,3 +185,3 @@ }) | ||
| it('onSelect updates original select', (done) => { | ||
| it('onConfirm updates original select', (done) => { | ||
| const id = 'location-picker-id' | ||
@@ -187,0 +188,0 @@ const name = 'location-picker-name' |
| /* global afterEach, before, beforeEach, browser, describe, it */ | ||
| const expect = require('chai').expect | ||
| const {browserName, version} = browser.desiredCapabilities | ||
| const isChrome = browserName === 'chrome' | ||
| const isFireFox = browserName === 'firefox' | ||
| const isIE = browserName === 'internet explorer' | ||
| // const isIE9 = isIE && version === '9' | ||
| // const isIE10 = isIE && version === '10' | ||
| // const isIE11 = isIE && version === '11.103' | ||
@@ -44,3 +51,3 @@ describe('Accessible Autocomplete page', () => { | ||
| browser.click(input) | ||
| browser.keys(['i', 't', 'a']) | ||
| browser.addValue(input, 'ita') | ||
| expect(browser.getValue(input)).to.equal('ita') | ||
@@ -52,3 +59,3 @@ }) | ||
| browser.setValue(input, 'ita') | ||
| browser.keys(['ArrowDown']) | ||
| browser.addValue(input, ['ArrowDown']) | ||
| expect(browser.hasFocus(input)).to.equal(false) | ||
@@ -61,3 +68,3 @@ expect(browser.hasFocus(firstOption)).to.equal(true) | ||
| browser.setValue(input, 'ita') | ||
| browser.keys(['ArrowDown', 'Enter']) | ||
| browser.addValue(input, ['ArrowDown', 'Enter']) | ||
| browser.waitUntil(() => browser.getValue(input) !== 'ita') | ||
@@ -68,4 +75,47 @@ expect(browser.hasFocus(input)).to.equal(true) | ||
| }) | ||
| describe('mouse use', () => { | ||
| it('should allow confirming an option', () => { | ||
| browser.click(input) | ||
| browser.setValue(input, 'ita') | ||
| browser.click(firstOption) | ||
| expect(browser.hasFocus(input)).to.equal(true) | ||
| expect(browser.getValue(input)).to.equal('Italy') | ||
| }) | ||
| }) | ||
| }) | ||
| describe('custom templates example', function () { | ||
| this.retries(3) | ||
| const input = 'input#autocomplete-customTemplates' | ||
| const menu = `${input} + ul` | ||
| const firstOption = `${menu} > li:first-child` | ||
| const firstOptionInnerElement = `${firstOption} > strong` | ||
| beforeEach(() => { | ||
| browser.setValue(input, '') // Prevent autofilling, IE likes to do this. | ||
| }) | ||
| describe('mouse use', () => { | ||
| it('should allow confirming an option by clicking on child elements', () => { | ||
| browser.setValue(input, 'uni') | ||
| if (isChrome) { | ||
| const errorRegex = /Other element would receive the click/ | ||
| expect(browser.click.bind(browser, firstOptionInnerElement)).to.throw(errorRegex) | ||
| expect(browser.hasFocus(input)).to.equal(true) | ||
| expect(browser.getValue(input)).to.equal('uni') | ||
| } | ||
| if (isFireFox) { | ||
| browser.click(firstOptionInnerElement) | ||
| expect(browser.hasFocus(input)).to.equal(true) | ||
| expect(browser.getValue(input)).to.equal('United Kingdom') | ||
| } | ||
| if (isIE) { | ||
| // FIXME. | ||
| } | ||
| }) | ||
| }) | ||
| }) | ||
| afterEach(function () { | ||
@@ -75,5 +125,5 @@ const testFailed = this.currentTest.state === 'failed' | ||
| const timestamp = +new Date() | ||
| const browserName = browser.desiredCapabilities.browserName | ||
| const browser = isIE ? `ie${version}` : browserName | ||
| const testTitle = this.currentTest.title.replace(/\W/g, '-') | ||
| const filename = `./screenshots/${timestamp}-${browserName}-${testTitle}.png` | ||
| const filename = `./screenshots/${timestamp}-${browser}-${testTitle}.png` | ||
| browser.saveScreenshot(filename) | ||
@@ -80,0 +130,0 @@ console.log(`Test failed, created: ${filename}`) |
@@ -24,3 +24,3 @@ require('babel-register') | ||
| build: buildNumber, | ||
| platform: 'Linux' | ||
| platform: 'Windows 10' | ||
| }, | ||
@@ -54,7 +54,8 @@ { | ||
| capabilities: [ | ||
| { browserName: 'phantom' } | ||
| { browserName: 'chrome' }, | ||
| { browserName: 'firefox' } | ||
| ], | ||
| baseUrl: 'http://localhost:' + staticServerPort, | ||
| screenshotPath: './screenshots/', | ||
| services: services.concat(['phantomjs']), | ||
| services: services.concat(['selenium-standalone']), | ||
| reporters: ['spec'], | ||
@@ -61,0 +62,0 @@ framework: 'mocha', |
@@ -5,2 +5,3 @@ import webpack from 'webpack' | ||
| import V8LazyParseWebpackPlugin from 'v8-lazy-parse-webpack-plugin' | ||
| import CopyWebpackPlugin from 'copy-webpack-plugin' | ||
| const ENV = process.env.NODE_ENV || 'development' | ||
@@ -75,3 +76,7 @@ | ||
| }]) | ||
| ] : []), | ||
| ] : [ | ||
| new CopyWebpackPlugin([ | ||
| { from: './autocomplete.css', to: 'accessible-autocomplete.min.css' } | ||
| ]) | ||
| ]), | ||
@@ -95,3 +100,3 @@ stats: { colors: true }, | ||
| publicPath: '/dist/', | ||
| contentBase: './examples', | ||
| contentBase: ['./examples', './src'], | ||
| historyApiFallback: true, | ||
@@ -98,0 +103,0 @@ open: true, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.09%
403609
- Lines of code
- increased by3.35%
1575
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Dev dependency count
- increased by2.38%
43
- Number of lines in readme file
- decreased by-1.52%
260
No dependency changes