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 1.2.1 to 1.3.0
@@ -7,2 +7,6 @@ # CHANGELOG | ||
| ## 1.3.0 - 2017-06-02 | ||
| - [Feature] Add support for passing an array of strings to `source`. By [@joelanman](https://github.com/joelanman). | ||
| ## 1.2.1 - 2017-05-24 | ||
@@ -9,0 +13,0 @@ |
@@ -7,2 +7,44 @@ # Contributing | ||
| ## Requirements | ||
| You will need a recent version of Node and npm installed: | ||
| ```bash | ||
| $ node -v | ||
| v7.10.0 | ||
| $ npm -v | ||
| v5.0.0 | ||
| ``` | ||
| If you want to run the selenium tests, you will also need a local copy of the Java Development Kit: | ||
| ```bash | ||
| $ java -version | ||
| java version "1.8.0_131" | ||
| Java(TM) SE Runtime Environment (build 1.8.0_131-b11) | ||
| Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode) | ||
| ``` | ||
| To install Node (with npm) and Java locally on macOS, you can use [brew](https://brew.sh/): | ||
| ```bash | ||
| brew install node | ||
| brew cask install java | ||
| ``` | ||
| ## Project structure | ||
| ``` | ||
| $ ls | ||
| coverage/ # Gets outputted by the tests, `open html/src/index.html` to see latest coverage reports. | ||
| dist/ # The compiled and ready to distribute build artefacts. | ||
| screenshots/ # Gets outputted by the end to end tests when something goes wrong. | ||
| examples/ # GitHub pages examples of using the autocomplete. | ||
| scripts/ # Build scripts that don't fit in `package.json`. | ||
| src/ # The source code for the library. | ||
| test/ # The tests for the library. | ||
| ``` | ||
| ## Build tasks | ||
| To develop locally: | ||
@@ -21,2 +63,8 @@ | ||
| To run the linter on its own: | ||
| ```bash | ||
| npm run standard | ||
| ``` | ||
| To run the functional tests in dev mode (automatically reruns when a file changes): | ||
@@ -50,4 +98,23 @@ | ||
| ## Prepush checks | ||
| When you push to a branch, git will run a `npm run prepush` [script](scripts/check-staged.js) that will compile the build on your behalf to the `dist/` folder. If it then finds unstaged files in `dist/`, it will fail your push. | ||
| The solution is to commit the files, preferably as part of a separate commit: | ||
| ```bash | ||
| git add dist/ | ||
| git commit -m "Rebuild dist" | ||
| ``` | ||
| ## PR nice to haves | ||
| - Tests for your feature or fix | ||
| - Updates to the README.md when necessary | ||
| - A 1 line update in CHANGELOG.md describing your changes | ||
| ## Cutting a new release | ||
| Assuming you have access to the `npm` account, `git pull --rebase` and then run: | ||
| ```bash | ||
@@ -54,0 +121,0 @@ vim CHANGELOG.md # Update changelog, put all unreleased changes under new heading. |
@@ -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(){"use strict";function t(){}function n(e,n){var o,r,l,i,u=T;for(i=arguments.length;i-- >2;)S.push(arguments[i]);for(n&&null!=n.children&&(S.length||S.push(n.children),delete n.children);S.length;)if((r=S.pop())&&void 0!==r.pop)for(i=r.length;i--;)S.push(r[i]);else!0!==r&&!1!==r||(r=null),(l="function"!=typeof e)&&(null==r?r="":"number"==typeof r?r=String(r):"string"!=typeof r&&(l=!1)),l&&o?u[u.length-1]+=r:u===T?u=[r]:u.push(r),o=l;var a=new t;return a.nodeName=e,a.children=u,a.attributes=null==n?void 0:n,a.key=null==n?void 0:n.key,void 0!==L.vnode&&L.vnode(a),a}function o(e,t){for(var n in t)e[n]=t[n];return e}function r(e,t){return n(e.nodeName,o(o({},e.attributes),t),arguments.length>2?[].slice.call(arguments,2):e.children)}function l(e){!e.__d&&(e.__d=!0)&&1==q.push(e)&&(L.debounceRendering||setTimeout)(i)}function i(){var e,t=q;for(q=[];e=t.pop();)e.__d&&N(e)}function u(e,t,n){return"string"==typeof t||"number"==typeof t?void 0!==e.splitText:"string"==typeof t.nodeName?!e._componentConstructor&&a(e,t.nodeName):n||e._componentConstructor===t.nodeName}function a(e,t){return e.__n===t||e.nodeName.toLowerCase()===t.toLowerCase()}function s(e){var t=o({},e.attributes);t.children=e.children;var n=e.nodeName.defaultProps;if(void 0!==n)for(var r in n)void 0===t[r]&&(t[r]=n[r]);return t}function p(e,t){var n=t?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e);return n.__n=e,n}function c(e){e.parentNode&&e.parentNode.removeChild(e)}function d(e,t,n,o,r){if("className"===t&&(t="class"),"key"===t);else if("ref"===t)n&&n(null),o&&o(e);else if("class"!==t||r)if("style"===t){if(o&&"string"!=typeof o&&"string"!=typeof n||(e.style.cssText=o||""),o&&"object"==typeof o){if("string"!=typeof n)for(var l in n)l in o||(e.style[l]="");for(var l in o)e.style[l]="number"==typeof o[l]&&!1===A.test(l)?o[l]+"px":o[l]}}else if("dangerouslySetInnerHTML"===t)o&&(e.innerHTML=o.__html||"");else if("o"==t[0]&&"n"==t[1]){var i=t!==(t=t.replace(/Capture$/,""));t=t.toLowerCase().substring(2),o?n||e.addEventListener(t,h,i):e.removeEventListener(t,h,i),(e.__l||(e.__l={}))[t]=o}else if("list"!==t&&"type"!==t&&!r&&t in e)f(e,t,null==o?"":o),null!=o&&!1!==o||e.removeAttribute(t);else{var u=r&&t!==(t=t.replace(/^xlink\:?/,""));null==o||!1===o?u?e.removeAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase()):e.removeAttribute(t):"function"!=typeof o&&(u?e.setAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase(),o):e.setAttribute(t,o))}else e.className=o||""}function f(e,t,n){try{e[t]=n}catch(e){}}function h(e){return this.__l[e.type](L.event&&L.event(e)||e)}function m(){for(var e;e=B.pop();)L.afterMount&&L.afterMount(e),e.componentDidMount&&e.componentDidMount()}function _(e,t,n,o,r,l){P++||(U=null!=r&&void 0!==r.ownerSVGElement,j=null!=e&&!("__preactattr_"in e));var i=v(e,t,n,o,l);return r&&i.parentNode!==r&&r.appendChild(i),--P||(j=!1,l||m()),i}function v(e,t,n,o,r){var l=e,i=U;if(null==t&&(t=""),"string"==typeof t)return e&&void 0!==e.splitText&&e.parentNode&&(!e._component||r)?e.nodeValue!=t&&(e.nodeValue=t):(l=document.createTextNode(t),e&&(e.parentNode&&e.parentNode.replaceChild(l,e),b(e,!0))),l.__preactattr_=!0,l;if("function"==typeof t.nodeName)return I(e,t,n,o);if(U="svg"===t.nodeName||"foreignObject"!==t.nodeName&&U,(!e||!a(e,String(t.nodeName)))&&(l=p(String(t.nodeName),U),e)){for(;e.firstChild;)l.appendChild(e.firstChild);e.parentNode&&e.parentNode.replaceChild(l,e),b(e,!0)}var u=l.firstChild,s=l.__preactattr_||(l.__preactattr_={}),c=t.children;return!j&&c&&1===c.length&&"string"==typeof c[0]&&null!=u&&void 0!==u.splitText&&null==u.nextSibling?u.nodeValue!=c[0]&&(u.nodeValue=c[0]):(c&&c.length||null!=u)&&y(l,c,n,o,j||null!=s.dangerouslySetInnerHTML),O(l,t.attributes,s),U=i,l}function y(e,t,n,o,r){var l,i,a,s,p=e.childNodes,d=[],f={},h=0,m=0,_=p.length,y=0,g=t?t.length:0;if(0!==_)for(var O=0;O<_;O++){var w=p[O],C=w.__preactattr_,E=g&&C?w._component?w._component.__k:C.key:null;null!=E?(h++,f[E]=w):(C||(void 0!==w.splitText?!r||w.nodeValue.trim():r))&&(d[y++]=w)}if(0!==g)for(var O=0;O<g;O++){a=t[O],s=null;var E=a.key;if(null!=E)h&&void 0!==f[E]&&(s=f[E],f[E]=void 0,h--);else if(!s&&m<y)for(l=m;l<y;l++)if(void 0!==d[l]&&u(i=d[l],a,r)){s=i,d[l]=void 0,l===y-1&&y--,l===m&&m++;break}(s=v(s,a,n,o))&&s!==e&&(O>=_?e.appendChild(s):s!==p[O]&&(s===p[O+1]?c(p[O]):e.insertBefore(s,p[O]||null)))}if(h)for(var O in f)void 0!==f[O]&&b(f[O],!1);for(;m<=y;)void 0!==(s=d[y--])&&b(s,!1)}function b(e,t){var n=e._component;n?M(n):(null!=e.__preactattr_&&e.__preactattr_.ref&&e.__preactattr_.ref(null),!1!==t&&null!=e.__preactattr_||c(e),g(e))}function g(e){for(e=e.lastChild;e;){var t=e.previousSibling;b(e,!0),e=t}}function O(e,t,n){var o;for(o in n)t&&null!=t[o]||null==n[o]||d(e,o,n[o],n[o]=void 0,U);for(o in t)"children"===o||"innerHTML"===o||o in n&&t[o]===("value"===o||"checked"===o?e[o]:n[o])||d(e,o,n[o],n[o]=t[o],U)}function w(e){var t=e.constructor.name;(V[t]||(V[t]=[])).push(e)}function C(e,t,n){var o,r=V[e.name];if(e.prototype&&e.prototype.render?(o=new e(t,n),k.call(o,t,n)):(o=new k(t,n),o.constructor=e,o.render=E),r)for(var l=r.length;l--;)if(r[l].constructor===e){o.__b=r[l].__b,r.splice(l,1);break}return o}function E(e,t,n){return this.constructor(e,n)}function x(e,t,n,o,r){e.__x||(e.__x=!0,(e.__r=t.ref)&&delete t.ref,(e.__k=t.key)&&delete t.key,!e.base||r?e.componentWillMount&&e.componentWillMount():e.componentWillReceiveProps&&e.componentWillReceiveProps(t,o),o&&o!==e.context&&(e.__c||(e.__c=e.context),e.context=o),e.__p||(e.__p=e.props),e.props=t,e.__x=!1,0!==n&&(1!==n&&!1===L.syncComponentUpdates&&e.base?l(e):N(e,1,r)),e.__r&&e.__r(e))}function N(e,t,n,r){if(!e.__x){var l,i,u,a=e.props,p=e.state,c=e.context,d=e.__p||a,f=e.__s||p,h=e.__c||c,v=e.base,y=e.__b,g=v||y,O=e._component,w=!1;if(v&&(e.props=d,e.state=f,e.context=h,2!==t&&e.shouldComponentUpdate&&!1===e.shouldComponentUpdate(a,p,c)?w=!0:e.componentWillUpdate&&e.componentWillUpdate(a,p,c),e.props=a,e.state=p,e.context=c),e.__p=e.__s=e.__c=e.__b=null,e.__d=!1,!w){l=e.render(a,p,c),e.getChildContext&&(c=o(o({},c),e.getChildContext()));var E,I,k=l&&l.nodeName;if("function"==typeof k){var D=s(l);i=O,i&&i.constructor===k&&D.key==i.__k?x(i,D,1,c,!1):(E=i,e._component=i=C(k,D,c),i.__b=i.__b||y,i.__u=e,x(i,D,0,c,!1),N(i,1,n,!0)),I=i.base}else u=g,E=O,E&&(u=e._component=null),(g||1===t)&&(u&&(u._component=null),I=_(u,l,c,n||!v,g&&g.parentNode,!0));if(g&&I!==g&&i!==O){var S=g.parentNode;S&&I!==S&&(S.replaceChild(I,g),E||(g._component=null,b(g,!1)))}if(E&&M(E),e.base=I,I&&!r){for(var T=e,A=e;A=A.__u;)(T=A).base=I;I._component=T,I._componentConstructor=T.constructor}}if(!v||n?B.unshift(e):w||(m(),e.componentDidUpdate&&e.componentDidUpdate(d,f,h),L.afterUpdate&&L.afterUpdate(e)),null!=e.__h)for(;e.__h.length;)e.__h.pop().call(e);P||r||m()}}function I(e,t,n,o){for(var r=e&&e._component,l=r,i=e,u=r&&e._componentConstructor===t.nodeName,a=u,p=s(t);r&&!a&&(r=r.__u);)a=r.constructor===t.nodeName;return r&&a&&(!o||r._component)?(x(r,p,3,n,o),e=r.base):(l&&!u&&(M(l),e=i=null),r=C(t.nodeName,p,n),e&&!r.__b&&(r.__b=e,i=null),x(r,p,1,n,o),e=r.base,i&&e!==i&&(i._component=null,b(i,!1))),e}function M(e){L.beforeUnmount&&L.beforeUnmount(e);var t=e.base;e.__x=!0,e.componentWillUnmount&&e.componentWillUnmount(),e.base=null;var n=e._component;n?M(n):t&&(t.__preactattr_&&t.__preactattr_.ref&&t.__preactattr_.ref(null),e.__b=t,c(t),w(e),g(t)),e.__r&&e.__r(null)}function k(e,t){this.__d=!0,this.context=t,this.props=e,this.state=this.state||{}}function D(e,t,n){return _(n,e,{},!1,t,!1)}var L={},S=[],T=[],A=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,q=[],B=[],P=0,U=!1,j=!1,V={};o(k.prototype,{setState:function(e,t){var n=this.state;this.__s||(this.__s=o({},n)),o(n,"function"==typeof e?e(n,this.props):e),t&&(this.__h=this.__h||[]).push(t),l(this)},forceUpdate:function(e){e&&(this.__h=this.__h||[]).push(e),N(this,2)},render:function(){}});var R={h:n,createElement:n,cloneElement:r,Component:k,render:D,rerender:i,options:L};e.exports=R}()},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,l.render)((0,l.createElement)(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},l=n(0),i=n(2),u=function(e){return e&&e.__esModule?e:{default:e}}(i),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=[].filter.call(e.selectElement.options,function(t){return t.value||e.preserveNullOptions});t=t.map(function(e){return e.innerHTML}),e.source=a(t)}e.onConfirm=e.onConfirm||function(t){var n=[].filter.call(e.selectElement.options,function(e){return e.innerHTML===t})[0];n&&(n.selected=!0)},(e.selectElement.value||void 0===e.defaultValue)&&(e.defaultValue=e.selectElement.options[e.selectElement.options.selectedIndex].innerHTML),e.name=e.name||"",e.id=e.id||e.selectElement.id||"",e.autoselect=e.autoselect||!0;var n=document.createElement("span");e.selectElement.parentNode.insertBefore(n,e.selectElement),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 l(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 i(){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}function a(e){return m?{onInput:e}:_?{onChange:e}:void 0}t.__esModule=!0,t.default=void 0;var s,p,c=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},d=n(0),f=n(3),h=function(e){return e&&e.__esModule?e:{default:e}}(f),m=!0,_=!1,v={13:"enter",27:"escape",38:"up",40:"down"},y=function(){var e=document.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}(),b=(p=s=function(e){function t(n){o(this,t);var l=r(this,e.call(this,n));return l.elementRefs={},l.state={focused:null,hovered:null,menuOpen:!1,options:n.defaultValue?[n.defaultValue]:[],query:n.defaultValue,selected:null},l.handleComponentBlur=l.handleComponentBlur.bind(l),l.handleKeyDown=l.handleKeyDown.bind(l),l.handleUpArrow=l.handleUpArrow.bind(l),l.handleDownArrow=l.handleDownArrow.bind(l),l.handleEnter=l.handleEnter.bind(l),l.handlePrintableKey=l.handlePrintableKey.bind(l),l.handleOptionBlur=l.handleOptionBlur.bind(l),l.handleOptionClick=l.handleOptionClick.bind(l),l.handleOptionFocus=l.handleOptionFocus.bind(l),l.handleOptionMouseDown=l.handleOptionMouseDown.bind(l),l.handleOptionMouseEnter=l.handleOptionMouseEnter.bind(l),l.handleOptionMouseOut=l.handleOptionMouseOut.bind(l),l.handleOptionTouchEnd=l.handleOptionTouchEnd.bind(l),l.handleInputBlur=l.handleInputBlur.bind(l),l.handleInputChange=l.handleInputChange.bind(l),l.handleInputFocus=l.handleInputFocus.bind(l),l.pollInputElement=l.pollInputElement.bind(l),l.getDirectInputChanges=l.getDirectInputChanges.bind(l),l}return l(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 l=-1===n,i=r&&null===t.focused;if(l&&i){var u=this.elementRefs[n];u.setSelectionRange(0,u.value.length)}},t.prototype.hasAutoselect=function(){return!i()&&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,l=void 0;this.props.confirmOnBlur?(l=e.query||o,this.props.onConfirm(n[r])):l=o,this.setState({focused:null,menuOpen:e.menuOpen||!1,query:l,selected:null})},t.prototype.handleOptionBlur=function(e,t){var n=this.state,o=n.focused,r=n.menuOpen,l=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&&i();this.handleComponentBlur({menuOpen:c,query:this.templateInputValue(l[u])})}},t.prototype.handleInputBlur=function(e){var t=this.state,n=t.focused,o=t.menuOpen,r=t.options,l=t.query,u=t.selected;if(-1===n){var a=o&&i(),s=i()?l: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,l=this.hasAutoselect(),i=e.target.value,u=0===i.length,a=this.state.query.length!==i.length,s=i.length>=o;this.setState({query:i}),!u&&a&&s?r(i,function(e){var n=e.length>0;t.setState({menuOpen:n,options:e,selected:l&&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(v[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,l=t.minLength,i=t.name,u=t.placeholder,s=t.required,p=this.state,f=p.focused,m=p.hovered,_=p.menuOpen,v=p.options,b=p.query,g=p.selected,O=this.hasAutoselect(),w=-1===f,C=0===v.length,E=0!==b.length,x=b.length>=l,N=this.props.showNoOptionsFound&&w&&C&&E&&x,I=n+"__wrapper",M=n+"__input",k=null!==f,D=k?" "+M+"--focused":"",L=-1!==f&&null!==f,S=n+"__menu",T=S+"--"+o,A=_||N,q=S+"--"+(A?"visible":"hidden"),B=n+"__option",P=n+"__hint",U=this.templateInputValue(v[g]),j=U&&0===U.toLowerCase().indexOf(b.toLowerCase()),V=j&&O?b+U.substr(b.length):"",R=y&&V;return(0,d.createElement)("div",{className:I,onKeyDown:this.handleKeyDown},(0,d.createElement)(h.default,{length:v.length,queryLength:b.length,minQueryLength:l,selectedOption:this.templateInputValue(v[g])}),R&&(0,d.createElement)("span",null,(0,d.createElement)("input",{className:P,readonly:!0,tabIndex:"-1",value:V})),(0,d.createElement)("input",c({"aria-activedescendant":!!L&&r+"__option--"+f,"aria-expanded":_,"aria-owns":r+"__listbox",autoComplete:"off",className:""+M+D,id:r,onBlur:this.handleInputBlur},a(this.handleInputChange),{onFocus:this.handleInputFocus,name:i,placeholder:u,ref:function(t){e.elementRefs[-1]=t},role:"combobox",type:"text",required:s,value:b})),(0,d.createElement)("ul",{className:S+" "+T+" "+q,id:r+"__listbox",role:"listbox"},v.map(function(t,n){var o=-1===f?g===n:f===n,l=o&&null===m?" "+B+"--focused":"",i=n%2?" "+B+"--odd":"";return(0,d.createElement)("li",{"aria-selected":f===n,className:""+B+l+i,dangerouslySetInnerHTML:{__html:e.templateSuggestion(t)},id:r+"__option--"+n,key:n,onBlur:function(t){return e.handleOptionBlur(t,n)},onClick:function(t){return e.handleOptionClick(t,n)},onMouseDown:e.handleOptionMouseDown,onMouseEnter:function(t){return e.handleOptionMouseEnter(t,n)},onMouseOut:function(t){return e.handleOptionMouseOut(t,n)},onTouchEnd:function(t){return e.handleOptionTouchEnd(t,n)},ref:function(t){e.elementRefs[n]=t},role:"option",tabIndex:"-1"})}),N&&(0,d.createElement)("li",{className:B+" "+B+"--no-results"},"No results found")))},t}(d.Component),s.defaultProps={autoselect:!1,cssNamespace:"autocomplete",defaultValue:"",displayMenu:"inline",minLength:0,name:"input-autocomplete",placeholder:"",onConfirm:function(){},confirmOnBlur:!0,showNoOptionsFound:!0,required:!1},p);t.default=b},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 l(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 i=n(0),u=function(e){function t(){var n,l,i;o(this,t);for(var u=arguments.length,a=Array(u),s=0;s<u;s++)a[s]=arguments[s];return n=l=r(this,e.call.apply(e,[this].concat(a))),l.state={bump:!1},i=n,r(l,i)}return l(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,l=this.state.bump,u={result:1===t?"result":"results",is:1===t?"is":"are"},a=n<o,s=0===t,p=r?(0,i.createElement)("span",null,r," (1 of ",t,") is selected."):null,c=null;return c=a?(0,i.createElement)("span",null,"Type in ",o," or more characters for results."):s?(0,i.createElement)("span",null,"No search results."):(0,i.createElement)("span",null,t," ",u.result," ",u.is," available. ",p),(0,i.createElement)("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"}},c,(0,i.createElement)("span",null,l?",":",,"))},t}(i.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(){"use strict";function t(){}function n(e,n){var o,r,l,i,u=T;for(i=arguments.length;i-- >2;)S.push(arguments[i]);for(n&&null!=n.children&&(S.length||S.push(n.children),delete n.children);S.length;)if((r=S.pop())&&void 0!==r.pop)for(i=r.length;i--;)S.push(r[i]);else!0!==r&&!1!==r||(r=null),(l="function"!=typeof e)&&(null==r?r="":"number"==typeof r?r=String(r):"string"!=typeof r&&(l=!1)),l&&o?u[u.length-1]+=r:u===T?u=[r]:u.push(r),o=l;var a=new t;return a.nodeName=e,a.children=u,a.attributes=null==n?void 0:n,a.key=null==n?void 0:n.key,void 0!==L.vnode&&L.vnode(a),a}function o(e,t){for(var n in t)e[n]=t[n];return e}function r(e,t){return n(e.nodeName,o(o({},e.attributes),t),arguments.length>2?[].slice.call(arguments,2):e.children)}function l(e){!e.__d&&(e.__d=!0)&&1==q.push(e)&&(L.debounceRendering||setTimeout)(i)}function i(){var e,t=q;for(q=[];e=t.pop();)e.__d&&N(e)}function u(e,t,n){return"string"==typeof t||"number"==typeof t?void 0!==e.splitText:"string"==typeof t.nodeName?!e._componentConstructor&&a(e,t.nodeName):n||e._componentConstructor===t.nodeName}function a(e,t){return e.__n===t||e.nodeName.toLowerCase()===t.toLowerCase()}function s(e){var t=o({},e.attributes);t.children=e.children;var n=e.nodeName.defaultProps;if(void 0!==n)for(var r in n)void 0===t[r]&&(t[r]=n[r]);return t}function p(e,t){var n=t?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e);return n.__n=e,n}function c(e){e.parentNode&&e.parentNode.removeChild(e)}function d(e,t,n,o,r){if("className"===t&&(t="class"),"key"===t);else if("ref"===t)n&&n(null),o&&o(e);else if("class"!==t||r)if("style"===t){if(o&&"string"!=typeof o&&"string"!=typeof n||(e.style.cssText=o||""),o&&"object"==typeof o){if("string"!=typeof n)for(var l in n)l in o||(e.style[l]="");for(var l in o)e.style[l]="number"==typeof o[l]&&!1===A.test(l)?o[l]+"px":o[l]}}else if("dangerouslySetInnerHTML"===t)o&&(e.innerHTML=o.__html||"");else if("o"==t[0]&&"n"==t[1]){var i=t!==(t=t.replace(/Capture$/,""));t=t.toLowerCase().substring(2),o?n||e.addEventListener(t,h,i):e.removeEventListener(t,h,i),(e.__l||(e.__l={}))[t]=o}else if("list"!==t&&"type"!==t&&!r&&t in e)f(e,t,null==o?"":o),null!=o&&!1!==o||e.removeAttribute(t);else{var u=r&&t!==(t=t.replace(/^xlink\:?/,""));null==o||!1===o?u?e.removeAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase()):e.removeAttribute(t):"function"!=typeof o&&(u?e.setAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase(),o):e.setAttribute(t,o))}else e.className=o||""}function f(e,t,n){try{e[t]=n}catch(e){}}function h(e){return this.__l[e.type](L.event&&L.event(e)||e)}function m(){for(var e;e=B.pop();)L.afterMount&&L.afterMount(e),e.componentDidMount&&e.componentDidMount()}function _(e,t,n,o,r,l){P++||(U=null!=r&&void 0!==r.ownerSVGElement,j=null!=e&&!("__preactattr_"in e));var i=v(e,t,n,o,l);return r&&i.parentNode!==r&&r.appendChild(i),--P||(j=!1,l||m()),i}function v(e,t,n,o,r){var l=e,i=U;if(null==t&&(t=""),"string"==typeof t)return e&&void 0!==e.splitText&&e.parentNode&&(!e._component||r)?e.nodeValue!=t&&(e.nodeValue=t):(l=document.createTextNode(t),e&&(e.parentNode&&e.parentNode.replaceChild(l,e),b(e,!0))),l.__preactattr_=!0,l;if("function"==typeof t.nodeName)return I(e,t,n,o);if(U="svg"===t.nodeName||"foreignObject"!==t.nodeName&&U,(!e||!a(e,String(t.nodeName)))&&(l=p(String(t.nodeName),U),e)){for(;e.firstChild;)l.appendChild(e.firstChild);e.parentNode&&e.parentNode.replaceChild(l,e),b(e,!0)}var u=l.firstChild,s=l.__preactattr_||(l.__preactattr_={}),c=t.children;return!j&&c&&1===c.length&&"string"==typeof c[0]&&null!=u&&void 0!==u.splitText&&null==u.nextSibling?u.nodeValue!=c[0]&&(u.nodeValue=c[0]):(c&&c.length||null!=u)&&y(l,c,n,o,j||null!=s.dangerouslySetInnerHTML),O(l,t.attributes,s),U=i,l}function y(e,t,n,o,r){var l,i,a,s,p=e.childNodes,d=[],f={},h=0,m=0,_=p.length,y=0,g=t?t.length:0;if(0!==_)for(var O=0;O<_;O++){var w=p[O],C=w.__preactattr_,E=g&&C?w._component?w._component.__k:C.key:null;null!=E?(h++,f[E]=w):(C||(void 0!==w.splitText?!r||w.nodeValue.trim():r))&&(d[y++]=w)}if(0!==g)for(var O=0;O<g;O++){a=t[O],s=null;var E=a.key;if(null!=E)h&&void 0!==f[E]&&(s=f[E],f[E]=void 0,h--);else if(!s&&m<y)for(l=m;l<y;l++)if(void 0!==d[l]&&u(i=d[l],a,r)){s=i,d[l]=void 0,l===y-1&&y--,l===m&&m++;break}(s=v(s,a,n,o))&&s!==e&&(O>=_?e.appendChild(s):s!==p[O]&&(s===p[O+1]?c(p[O]):e.insertBefore(s,p[O]||null)))}if(h)for(var O in f)void 0!==f[O]&&b(f[O],!1);for(;m<=y;)void 0!==(s=d[y--])&&b(s,!1)}function b(e,t){var n=e._component;n?M(n):(null!=e.__preactattr_&&e.__preactattr_.ref&&e.__preactattr_.ref(null),!1!==t&&null!=e.__preactattr_||c(e),g(e))}function g(e){for(e=e.lastChild;e;){var t=e.previousSibling;b(e,!0),e=t}}function O(e,t,n){var o;for(o in n)t&&null!=t[o]||null==n[o]||d(e,o,n[o],n[o]=void 0,U);for(o in t)"children"===o||"innerHTML"===o||o in n&&t[o]===("value"===o||"checked"===o?e[o]:n[o])||d(e,o,n[o],n[o]=t[o],U)}function w(e){var t=e.constructor.name;(V[t]||(V[t]=[])).push(e)}function C(e,t,n){var o,r=V[e.name];if(e.prototype&&e.prototype.render?(o=new e(t,n),k.call(o,t,n)):(o=new k(t,n),o.constructor=e,o.render=E),r)for(var l=r.length;l--;)if(r[l].constructor===e){o.__b=r[l].__b,r.splice(l,1);break}return o}function E(e,t,n){return this.constructor(e,n)}function x(e,t,n,o,r){e.__x||(e.__x=!0,(e.__r=t.ref)&&delete t.ref,(e.__k=t.key)&&delete t.key,!e.base||r?e.componentWillMount&&e.componentWillMount():e.componentWillReceiveProps&&e.componentWillReceiveProps(t,o),o&&o!==e.context&&(e.__c||(e.__c=e.context),e.context=o),e.__p||(e.__p=e.props),e.props=t,e.__x=!1,0!==n&&(1!==n&&!1===L.syncComponentUpdates&&e.base?l(e):N(e,1,r)),e.__r&&e.__r(e))}function N(e,t,n,r){if(!e.__x){var l,i,u,a=e.props,p=e.state,c=e.context,d=e.__p||a,f=e.__s||p,h=e.__c||c,v=e.base,y=e.__b,g=v||y,O=e._component,w=!1;if(v&&(e.props=d,e.state=f,e.context=h,2!==t&&e.shouldComponentUpdate&&!1===e.shouldComponentUpdate(a,p,c)?w=!0:e.componentWillUpdate&&e.componentWillUpdate(a,p,c),e.props=a,e.state=p,e.context=c),e.__p=e.__s=e.__c=e.__b=null,e.__d=!1,!w){l=e.render(a,p,c),e.getChildContext&&(c=o(o({},c),e.getChildContext()));var E,I,k=l&&l.nodeName;if("function"==typeof k){var D=s(l);i=O,i&&i.constructor===k&&D.key==i.__k?x(i,D,1,c,!1):(E=i,e._component=i=C(k,D,c),i.__b=i.__b||y,i.__u=e,x(i,D,0,c,!1),N(i,1,n,!0)),I=i.base}else u=g,E=O,E&&(u=e._component=null),(g||1===t)&&(u&&(u._component=null),I=_(u,l,c,n||!v,g&&g.parentNode,!0));if(g&&I!==g&&i!==O){var S=g.parentNode;S&&I!==S&&(S.replaceChild(I,g),E||(g._component=null,b(g,!1)))}if(E&&M(E),e.base=I,I&&!r){for(var T=e,A=e;A=A.__u;)(T=A).base=I;I._component=T,I._componentConstructor=T.constructor}}if(!v||n?B.unshift(e):w||(m(),e.componentDidUpdate&&e.componentDidUpdate(d,f,h),L.afterUpdate&&L.afterUpdate(e)),null!=e.__h)for(;e.__h.length;)e.__h.pop().call(e);P||r||m()}}function I(e,t,n,o){for(var r=e&&e._component,l=r,i=e,u=r&&e._componentConstructor===t.nodeName,a=u,p=s(t);r&&!a&&(r=r.__u);)a=r.constructor===t.nodeName;return r&&a&&(!o||r._component)?(x(r,p,3,n,o),e=r.base):(l&&!u&&(M(l),e=i=null),r=C(t.nodeName,p,n),e&&!r.__b&&(r.__b=e,i=null),x(r,p,1,n,o),e=r.base,i&&e!==i&&(i._component=null,b(i,!1))),e}function M(e){L.beforeUnmount&&L.beforeUnmount(e);var t=e.base;e.__x=!0,e.componentWillUnmount&&e.componentWillUnmount(),e.base=null;var n=e._component;n?M(n):t&&(t.__preactattr_&&t.__preactattr_.ref&&t.__preactattr_.ref(null),e.__b=t,c(t),w(e),g(t)),e.__r&&e.__r(null)}function k(e,t){this.__d=!0,this.context=t,this.props=e,this.state=this.state||{}}function D(e,t,n){return _(n,e,{},!1,t,!1)}var L={},S=[],T=[],A=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,q=[],B=[],P=0,U=!1,j=!1,V={};o(k.prototype,{setState:function(e,t){var n=this.state;this.__s||(this.__s=o({},n)),o(n,"function"==typeof e?e(n,this.props):e),t&&(this.__h=this.__h||[]).push(t),l(this)},forceUpdate:function(e){e&&(this.__h=this.__h||[]).push(e),N(this,2)},render:function(){}});var R={h:n,createElement:n,cloneElement:r,Component:k,render:D,rerender:i,options:L};e.exports=R}()},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");Array.isArray(e.source)&&(e.source=a(e.source)),(0,l.render)((0,l.createElement)(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},l=n(0),i=n(2),u=function(e){return e&&e.__esModule?e:{default:e}}(i),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=[].filter.call(e.selectElement.options,function(t){return t.value||e.preserveNullOptions});e.source=t.map(function(e){return e.innerHTML})}e.onConfirm=e.onConfirm||function(t){var n=[].filter.call(e.selectElement.options,function(e){return e.innerHTML===t})[0];n&&(n.selected=!0)},(e.selectElement.value||void 0===e.defaultValue)&&(e.defaultValue=e.selectElement.options[e.selectElement.options.selectedIndex].innerHTML),e.name=e.name||"",e.id=e.id||e.selectElement.id||"",e.autoselect=e.autoselect||!0;var n=document.createElement("span");e.selectElement.parentNode.insertBefore(n,e.selectElement),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 l(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 i(){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}function a(e){return m?{onInput:e}:_?{onChange:e}:void 0}t.__esModule=!0,t.default=void 0;var s,p,c=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},d=n(0),f=n(3),h=function(e){return e&&e.__esModule?e:{default:e}}(f),m=!0,_=!1,v={13:"enter",27:"escape",38:"up",40:"down"},y=function(){var e=document.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}(),b=(p=s=function(e){function t(n){o(this,t);var l=r(this,e.call(this,n));return l.elementRefs={},l.state={focused:null,hovered:null,menuOpen:!1,options:n.defaultValue?[n.defaultValue]:[],query:n.defaultValue,selected:null},l.handleComponentBlur=l.handleComponentBlur.bind(l),l.handleKeyDown=l.handleKeyDown.bind(l),l.handleUpArrow=l.handleUpArrow.bind(l),l.handleDownArrow=l.handleDownArrow.bind(l),l.handleEnter=l.handleEnter.bind(l),l.handlePrintableKey=l.handlePrintableKey.bind(l),l.handleOptionBlur=l.handleOptionBlur.bind(l),l.handleOptionClick=l.handleOptionClick.bind(l),l.handleOptionFocus=l.handleOptionFocus.bind(l),l.handleOptionMouseDown=l.handleOptionMouseDown.bind(l),l.handleOptionMouseEnter=l.handleOptionMouseEnter.bind(l),l.handleOptionMouseOut=l.handleOptionMouseOut.bind(l),l.handleOptionTouchEnd=l.handleOptionTouchEnd.bind(l),l.handleInputBlur=l.handleInputBlur.bind(l),l.handleInputChange=l.handleInputChange.bind(l),l.handleInputFocus=l.handleInputFocus.bind(l),l.pollInputElement=l.pollInputElement.bind(l),l.getDirectInputChanges=l.getDirectInputChanges.bind(l),l}return l(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 l=-1===n,i=r&&null===t.focused;if(l&&i){var u=this.elementRefs[n];u.setSelectionRange(0,u.value.length)}},t.prototype.hasAutoselect=function(){return!i()&&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,l=void 0;this.props.confirmOnBlur?(l=e.query||o,this.props.onConfirm(n[r])):l=o,this.setState({focused:null,menuOpen:e.menuOpen||!1,query:l,selected:null})},t.prototype.handleOptionBlur=function(e,t){var n=this.state,o=n.focused,r=n.menuOpen,l=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&&i();this.handleComponentBlur({menuOpen:c,query:this.templateInputValue(l[u])})}},t.prototype.handleInputBlur=function(e){var t=this.state,n=t.focused,o=t.menuOpen,r=t.options,l=t.query,u=t.selected;if(-1===n){var a=o&&i(),s=i()?l: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,l=this.hasAutoselect(),i=e.target.value,u=0===i.length,a=this.state.query.length!==i.length,s=i.length>=o;this.setState({query:i}),!u&&a&&s?r(i,function(e){var n=e.length>0;t.setState({menuOpen:n,options:e,selected:l&&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(v[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,l=t.minLength,i=t.name,u=t.placeholder,s=t.required,p=this.state,f=p.focused,m=p.hovered,_=p.menuOpen,v=p.options,b=p.query,g=p.selected,O=this.hasAutoselect(),w=-1===f,C=0===v.length,E=0!==b.length,x=b.length>=l,N=this.props.showNoOptionsFound&&w&&C&&E&&x,I=n+"__wrapper",M=n+"__input",k=null!==f,D=k?" "+M+"--focused":"",L=-1!==f&&null!==f,S=n+"__menu",T=S+"--"+o,A=_||N,q=S+"--"+(A?"visible":"hidden"),B=n+"__option",P=n+"__hint",U=this.templateInputValue(v[g]),j=U&&0===U.toLowerCase().indexOf(b.toLowerCase()),V=j&&O?b+U.substr(b.length):"",R=y&&V;return(0,d.createElement)("div",{className:I,onKeyDown:this.handleKeyDown},(0,d.createElement)(h.default,{length:v.length,queryLength:b.length,minQueryLength:l,selectedOption:this.templateInputValue(v[g])}),R&&(0,d.createElement)("span",null,(0,d.createElement)("input",{className:P,readonly:!0,tabIndex:"-1",value:V})),(0,d.createElement)("input",c({"aria-activedescendant":!!L&&r+"__option--"+f,"aria-expanded":_,"aria-owns":r+"__listbox",autoComplete:"off",className:""+M+D,id:r,onBlur:this.handleInputBlur},a(this.handleInputChange),{onFocus:this.handleInputFocus,name:i,placeholder:u,ref:function(t){e.elementRefs[-1]=t},role:"combobox",type:"text",required:s,value:b})),(0,d.createElement)("ul",{className:S+" "+T+" "+q,id:r+"__listbox",role:"listbox"},v.map(function(t,n){var o=-1===f?g===n:f===n,l=o&&null===m?" "+B+"--focused":"",i=n%2?" "+B+"--odd":"";return(0,d.createElement)("li",{"aria-selected":f===n,className:""+B+l+i,dangerouslySetInnerHTML:{__html:e.templateSuggestion(t)},id:r+"__option--"+n,key:n,onBlur:function(t){return e.handleOptionBlur(t,n)},onClick:function(t){return e.handleOptionClick(t,n)},onMouseDown:e.handleOptionMouseDown,onMouseEnter:function(t){return e.handleOptionMouseEnter(t,n)},onMouseOut:function(t){return e.handleOptionMouseOut(t,n)},onTouchEnd:function(t){return e.handleOptionTouchEnd(t,n)},ref:function(t){e.elementRefs[n]=t},role:"option",tabIndex:"-1"})}),N&&(0,d.createElement)("li",{className:B+" "+B+"--no-results"},"No results found")))},t}(d.Component),s.defaultProps={autoselect:!1,cssNamespace:"autocomplete",defaultValue:"",displayMenu:"inline",minLength:0,name:"input-autocomplete",placeholder:"",onConfirm:function(){},confirmOnBlur:!0,showNoOptionsFound:!0,required:!1},p);t.default=b},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 l(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 i=n(0),u=function(e){function t(){var n,l,i;o(this,t);for(var u=arguments.length,a=Array(u),s=0;s<u;s++)a[s]=arguments[s];return n=l=r(this,e.call.apply(e,[this].concat(a))),l.state={bump:!1},i=n,r(l,i)}return l(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,l=this.state.bump,u={result:1===t?"result":"results",is:1===t?"is":"are"},a=n<o,s=0===t,p=r?(0,i.createElement)("span",null,r," (1 of ",t,") is selected."):null,c=null;return c=a?(0,i.createElement)("span",null,"Type in ",o," or more characters for results."):s?(0,i.createElement)("span",null,"No search results."):(0,i.createElement)("span",null,t," ",u.result," ",u.is," available. ",p),(0,i.createElement)("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"}},c,(0,i.createElement)("span",null,l?",":",,"))},t}(i.Component);t.default=u},function(e,t,n){e.exports=n(1)}])}); | ||
| //# sourceMappingURL=accessible-autocomplete.min.js.map |
| { | ||
| "name": "accessible-autocomplete", | ||
| "version": "1.2.1", | ||
| "version": "1.3.0", | ||
| "main": "dist/accessible-autocomplete.min.js", | ||
@@ -27,2 +27,3 @@ "style": "dist/accessible-autocomplete.min.css", | ||
| "postversion": "git push && git push --tags", | ||
| "prepush": "npm run build && node scripts/check-staged.js", | ||
| "preversion": "npm test", | ||
@@ -48,2 +49,3 @@ "standard": "standard", | ||
| "chai": "^3.5.0", | ||
| "chalk": "^1.1.3", | ||
| "copy-webpack-plugin": "^4.0.1", | ||
@@ -54,2 +56,3 @@ "coveralls": "^2.13.1", | ||
| "dotenv": "^4.0.0", | ||
| "husky": "^0.13.3", | ||
| "isparta-loader": "^2.0.0", | ||
@@ -56,0 +59,0 @@ "karma": "^1.0.0", |
@@ -22,3 +22,3 @@ # Accessible autocomplete | ||
| ### Using npm | ||
| ### Using npm and a module system | ||
@@ -31,42 +31,55 @@ Install it by running: | ||
| Import it using a module system like Webpack: | ||
| The `accessibleAutocomplete` function will render an autocomplete `<input>` and its accompanying suggestions and `aria-live` region. Your page should provide a `<label>` and a container element: | ||
| ```js | ||
| import accessibleAutocomplete from 'accessible-autocomplete' | ||
| ``` | ||
| Or using a script tag: | ||
| ```html | ||
| <script type="text/javascript" src="node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js"></script> | ||
| <label for="my-autocomplete">Select your country</label> | ||
| <div id="my-autocomplete-container"></div> | ||
| ``` | ||
| And then call the `accessibleAutocomplete` function, providing a suggestion engine: | ||
| Then import it using a module system like Browserify / Webpack / Rollup, and call the `accessibleAutocomplete` function, providing an array of values: | ||
| ```js | ||
| function suggest (query, populateResults) { | ||
| const results = [ | ||
| 'France', | ||
| 'Germany', | ||
| 'United Kingdom' | ||
| ] | ||
| const filteredResults = results.filter(result => result.indexOf(query) !== -1) | ||
| populateResults(filteredResults) | ||
| } | ||
| import accessibleAutocomplete from 'accessible-autocomplete' | ||
| const countries = [ | ||
| 'France', | ||
| 'Germany', | ||
| 'United Kingdom' | ||
| ] | ||
| accessibleAutocomplete({ | ||
| element: document.querySelector('#my-autocomplete-container'), | ||
| id: 'my-autocomplete', | ||
| source: suggest | ||
| id: 'my-autocomplete', // To match it to the existing <label>. | ||
| source: countries | ||
| }) | ||
| ``` | ||
| Don't forget to include the stylesheet: | ||
| If you want to use it as a replacement for a `<select>` element, read the [Progressive enhancement](#progressive-enhancement) section. | ||
| ### As a plain JavaScript module | ||
| You can copy the [dist/accessible-autocomplete.min.js](dist/accessible-autocomplete.min.js) file to your JavaScript folder and import it into the browser: | ||
| ```html | ||
| <link rel="stylesheet" href="node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css" /> | ||
| <script type="text/javascript" src="assets/js/accessible-autocomplete.min.js"></script> | ||
| ``` | ||
| ### With Preact | ||
| ### Styling the autocomplete | ||
| A stylesheet is included with the package at [dist/accessible-autocomplete.min.css](dist/accessible-autocomplete.min.css). | ||
| You can copy it to your stylesheets folder and import it into the browser: | ||
| ```html | ||
| <link rel="stylesheet" href="assets/css/accessible-autocomplete.min.css" /> | ||
| ``` | ||
| You can also import it using Sass: | ||
| ```css | ||
| @import "accessible-autocomplete"; | ||
| ``` | ||
| ### Using with Preact | ||
| If you already use Preact in your application, you can import a bundle that will use that: | ||
@@ -86,3 +99,3 @@ | ||
| ### With React | ||
| ### Using with React | ||
@@ -122,6 +135,18 @@ If you already use React in your application, you can import a bundle that will use that: | ||
| Type: `Function` | ||
| Type: `Array | Function` | ||
| Arguments: `query: string, populateResults: Function` | ||
| An array of values to search when the user types in the input field, or a function to take what the user types and call a callback function with the results to be displayed. | ||
| An example of an array of values: | ||
| ```js | ||
| const countries = [ | ||
| 'France', | ||
| 'Germany', | ||
| 'United Kingdom' | ||
| ] | ||
| ``` | ||
| If `source` is a function, the arguments are: `query: string, populateResults: Function` | ||
| Similar to the [`source` argument for typeahead.js](https://github.com/corejavascript/typeahead.js/blob/47d46b40cb834d8285ac9328c4b436e5eccf7197/doc/jquery_typeahead.md#datasets), a backing data source for suggestions. `query` is what gets typed into the input field, which will callback to `populateResults` synchronously with the array of string results to display in the menu. | ||
@@ -128,0 +153,0 @@ |
@@ -8,3 +8,5 @@ import { createElement, render } from 'preact' /** @jsx createElement */ | ||
| if (!opts.source) { throw new Error('source is not defined') } | ||
| if (Array.isArray(opts.source)) { | ||
| opts.source = createSimpleEngine(opts.source) | ||
| } | ||
| render(<Autocomplete {...opts} />, opts.element) | ||
@@ -26,4 +28,3 @@ } | ||
| let availableOptions = [].filter.call(opts.selectElement.options, o => (o.value || opts.preserveNullOptions)) | ||
| availableOptions = availableOptions.map(o => o.innerHTML) | ||
| opts.source = createSimpleEngine(availableOptions) | ||
| opts.source = availableOptions.map(o => o.innerHTML) | ||
| } | ||
@@ -30,0 +31,0 @@ opts.onConfirm = opts.onConfirm || (query => { |
@@ -74,3 +74,3 @@ /* global before, beforeEach, after, describe, expect, it */ | ||
| it('throws an error when called on nonexistent source', () => { | ||
| it('throws an error when called without a source', () => { | ||
| expect( | ||
@@ -77,0 +77,0 @@ accessibleAutocomplete.bind(null, { |
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
Shell access
Supply chain riskThis module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.
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
Improved metrics
- Total package byte prevSize
- increased by0.77%
501857
- Number of package files
- increased by2.78%
37
- Lines of code
- increased by0.84%
1792
- Number of lines in readme file
- increased by7.67%
351
Worsened metrics
- Dev dependency count
- increased by4.65%
45
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes