@nrk/core-input - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

core-input.js

@@ -7,2 +7,3 @@ import {name, version} from './package.json'
 const ITEM = '[tabindex="-1"]'
+const AJAX_DEBOUNCE = 500
 
@@ -15,4 +16,5 @@ export default function input (elements, content) {
     const list = input.nextElementSibling
+    const ajax = typeof options.ajax === 'undefined' ? input.getAttribute(UUID) : options.ajax
 
-    input.setAttribute(UUID, '')
+    input.setAttribute(UUID, ajax || '')
     input.setAttribute(IS_IOS ? 'data-role' : 'role', 'combobox') // iOS does not inform user area is editable if combobox
@@ -92,3 +94,3 @@ input.setAttribute('aria-autocomplete', 'list')
 function onFilter (input, detail) {
-  if (dispatchEvent(input, 'input.filter', detail)) {
+  if (dispatchEvent(input, 'input.filter', detail) && !ajax(input)) {
     queryAll(ITEM, input.nextElementSibling).reduce((acc, item) => {
@@ -111,1 +113,19 @@ const show = item.textContent.toLowerCase().indexOf(input.value.toLowerCase()) !== -1
 }
+
+function ajax (input) {
+  const url = input.getAttribute(UUID)
+  const req = ajax.req = ajax.req || new window.XMLHttpRequest()
+  if (!url) return false
+
+  clearTimeout(ajax.timer) // Clear previous search
+  req.abort() // Abort previous request
+  req.onload = () => {
+    try { req.responseJSON = JSON.parse(req.responseText) } catch (err) { req.responseJSON = false }
+    dispatchEvent(input, 'input.ajax', req)
+  }
+  ajax.timer = setTimeout(() => { // Debounce next request 500 milliseconds
+    if (!input.value) return // Abort if input is empty
+    req.open('GET', url.replace('{{value}}', window.encodeURIComponent(input.value)), true)
+    req.send()
+  }, AJAX_DEBOUNCE)
+}

core-input.jsx

@@ -5,5 +5,4 @@ import React from 'react'
 
-const DEFAULTS = {open: null, onFilter: null, onSelect: null}
-
 export default class Input extends React.Component {
+  static get defaultProps () { return {open: null, ajax: null, onAjax: null, onFilter: null, onSelect: null} }
   constructor (props) {
@@ -13,2 +12,3 @@ super(props)
     this.onSelect = this.onSelect.bind(this)
+    this.onAjax = this.onAjax.bind(this)
   }
@@ -18,3 +18,4 @@ componentDidMount () { // Mount client side only to avoid rerender
     this.el.addEventListener('input.select', this.onSelect)
-    coreInput(this.el.firstElementChild)
+    this.el.addEventListener('input.ajax', this.onAjax)
+    coreInput(this.el.firstElementChild, this.props)
   }
@@ -25,13 +26,11 @@ componentDidUpdate () { coreInput(this.el.firstElementChild) } // Must mount also on update in case content changes
     this.el.removeEventListener('input.select', this.onSelect)
+    this.el.removeEventListener('input.ajax', this.onAjax)
   }
   onFilter (event) { this.props.onFilter && this.props.onFilter(event) }
   onSelect (event) { this.props.onSelect && this.props.onSelect(event) }
+  onAjax (event) { this.props.onAjax && this.props.onAjax(event) }
   render () {
-    return React.createElement('div', exclude(this.props, DEFAULTS, {ref: el => (this.el = el)}),
+    return React.createElement('div', exclude(this.props, Input.defaultProps, {ref: el => (this.el = el)}),
       React.Children.map(this.props.children, (child, adjacent) => {
-        if (adjacent === 0) {
-          return React.cloneElement(child, {
-            'aria-expanded': String(Boolean(this.props.open))
-          })
-        }
+        if (adjacent === 0) return React.cloneElement(child, {'aria-expanded': String(Boolean(this.props.open))})
         if (adjacent === 1) return React.cloneElement(child, {'hidden': !this.props.open})
@@ -38,0 +37,0 @@ return child

core-input.md

@@ -54,5 +54,6 @@ ---
 
-coreInput(String|Element|Elements, {        // Accepts a selector string, NodeList, Element or array of Elements
-  open: null,                               // Defaults to value of aria-expanded. Use true|false to force open state
-  content: null                             // Set String of HTML content. HTML is used for full flexibility on markup
+coreInput(String|Element|Elements, {    // Accepts a selector string, NodeList, Element or array of Elements
+  open: null,                           // Optional. Defaults to value of aria-expanded. Use true|false to force open state
+  content: null,                        // Optional. Set String of HTML content. HTML is used for full flexibility on markup
+  ajax: null                            // Optional. Fetch external data, example: "https://search.com?q={{value}}"
 })
@@ -71,3 +72,3 @@
 
-<Input open={false} onFilter={(event) => {}} onSelect={(event) => {}}>
+<Input open={false} onFilter={(event) => {}} onSelect={(event) => {}} onAjax={(event) => {}} ajax="https://search.com?q={{value}}">
   <input type="text" />   // First element must result in a input-tag. Accepts both elements and components
@@ -97,3 +98,3 @@ <ul>                    // Next element will be used for items. Accepts both elements and components
 document.addEventListener('input.select', (event) => {
-  event.target                // The core-input element triggering input.filter event
+  event.target                // The core-input element triggering input.select event
   event.detail.relatedTarget  // The content element controlled by input
@@ -105,2 +106,13 @@ event.detail.currentTarget  // The item clicked/selected
 
+`'input.ajax'` event is fired when the input field receives data from ajax. The event also bubbles, and can therefore be detected both from button element itself, or any parent element (read event delegation):
+
+```js
+document.addEventListener('input.ajax', (event) => {
+  event.target  // The core-input element triggering input.ajax event
+  event.detail  // The ajax request
+  event.detail.responseText  // The response body text
+  event.detail.responseJSON  // The response json. Defaults to false if no JSON found
+})
+```
+
 ## Styling
@@ -132,35 +144,21 @@ All styling in documentation is example only. Both the `<button>` and content element receive attributes reflecting the current toggle state:
 ```input-ajax.js
-// Always debounce and abort requests avoid spamming APIs. Example:
-window.getCountries = function (query, callback) {
-  var self = window.getCountries
-  var xhr = self.xhr = self.xhr || new XMLHttpRequest()
-  var url = 'https://restcountries.eu/rest/v2/name/' +  encodeURIComponent(query) + '?fields=name'
-
-  clearTimeout(self.timer) // Clear previous search
-  xhr.abort() // Abort previous request
-  xhr.onload = function () { callback(JSON.parse(xhr.responseText)) }
-  self.timer = setTimeout(function () { // Debounce next request 500 milliseconds
-    xhr.open('GET', url, true)
-    xhr.send()
-  }, 500)
-}
-
-coreInput('.my-input-ajax') // Initialize
-
+// Initialize
+coreInput('.my-input-ajax', {
+  ajax: 'https://restcountries.eu/rest/v2/name/{{value}}?fields=name'
+})
 document.addEventListener('input.filter', function (event) {
-  if (event.target.className.indexOf('my-input-ajax') === -1) return // Make sure we are on correct input
-  event.preventDefault()  // Stop coreInput from default filtering
-
   var input = event.target
   var value = input.value.trim()
-  if (!value) return coreInput(input, '') // Prevent empty searches
 
-  coreInput(input, '<li><a>Searching for ' + coreInput.highlight(value, value) + '...</a></li>')
-  window.getCountries(value, function (items) {
-    coreInput(input, items.length ? items.slice(0, 10)
-      .map(function (item) { return coreInput.highlight(item.name, value) })    // Hightlight items
-      .map(function (html) { return '<li><button>' + html + '</button></li>' }) // Generate list
-      .join('') : '<li><a>No results</a></li>')
-  })
+  if (input.className.indexOf('my-input-ajax') === -1) return // Make sure we are on correct input
+  coreInput(input, value ? '<li><a>Searching for ' + coreInput.highlight(value, value) + '...</a></li>' : '')
 })
+document.addEventListener('input.ajax', function (event) {
+  if (event.target.className.indexOf('my-input-ajax') === -1) return // Make sure we are on correct input
+  var items = event.detail.responseJSON
+  coreInput(event.target, items.length ? items.slice(0, 10)
+    .map(function (item) { return coreInput.highlight(item.name, event.target.value) }) // Hightlight items
+    .map(function (html) { return '<li><button>' + html + '</button></li>' })           // Generate list
+    .join('') : '<li><a>No results</a></li>')
+})
 ```
@@ -172,20 +170,20 @@ ```input-ajax.jsx
     this.onFilter = this.onFilter.bind(this)
+    this.onAjax = this.onAjax.bind(this)
     this.state = { items: [], value: '' }
   }
   onFilter (event) {
-    event.preventDefault() // Stop coreInput from default filtering
+    const value = event.target.value
+    const items = value ? [{name: `Searching for ${value}...`}] : []
 
-    const value = event.target.value.trim()
-    if (!value) return this.setState({items: []}) // Prevent empty searches
-
-    this.setState({
-      value: value, // Store value for highlighting
-      items: [{name: `Searching for ${value}...`}]
-    })
-    window.getCountries(value, (data) => { // getCountries defined in JS
-      this.setState({items: data.length ? data : [{name: 'No results'}]})
-    })
+    this.setState({value, items}) // Store value for highlighting
   }
+  onAjax (event) {
+    const items = event.detail.responseJSON
+    this.setState({items: items.length ? items : [{name: 'No results'}]})
+  }
   render () {
-    return <Input onFilter={this.onFilter}>
+    return <Input
+     ajax="https://restcountries.eu/rest/v2/name/{{value}}?fields=name"
+     onFilter={this.onFilter}
+     onAjax={this.onAjax}>
       <input type='text' placeholder='Country... (JSX)' />
@@ -192,0 +190,0 @@ <ul className='my-dropdown'>

core-input.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.coreInput=t()}(this,function(){"use strict";var e="undefined"!=typeof window,i=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform))),o=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function t(e,t,n,r){(void 0===r&&(r=!1),"undefined"==typeof window||window[e=e+"-"+t])||(o||"object"!=typeof r||(r=Boolean(r.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,n,r))}var n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","/":"&#x2F;","'":"&#x27;"};function r(e){return String(e||"").replace(/[&<>"'/]/g,function(e){return n[e]})}var a="prevent_recursive_dispatch_maximum_callstack";function u(e,t,n){void 0===n&&(n={});var r,i=""+a+t;if(e[i])return!0;e[i]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,n);var o=e.dispatchEvent(r);return e[i]=null,o}function c(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var d="data-@nrk/core-input-1.0.3".replace(/\W+/g,"-"),l=13,f=27,s=33,p=34,v=35,g=36,m=38,b=40,y='[tabindex="-1"]';function x(e,t){var n="object"==typeof t?t:{content:t},r="string"==typeof n.content;return c(e).map(function(e){var t=e.nextElementSibling;return e.setAttribute(d,""),e.setAttribute(i?"data-role":"role","combobox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("autocomplete","off"),r&&(t.innerHTML=n.content),c("a,button",t).forEach(A),E(e,n.open),e})}function h(a){a.ctrlKey||a.altKey||a.metaKey||a.defaultPrevented||c("["+d+"]").forEach(function(e){var t,n,r=e.nextElementSibling,i=e===a.target||r.contains(a.target),o="click"===a.type&&i&&c(y,r).filter(function(e){return e.contains(a.target)})[0];o?(t=e,n={relatedTarget:r,currentTarget:o,value:o.value||o.textContent.trim()},u(t,"input.select",n)&&(t.value=n.value,t.focus(),E(t,!1))):E(e,i)})}function w(e,t){var n=e.nextElementSibling,r=c(y+":not([hidden])",n),i=r.indexOf(document.activeElement),o=!1;t.keyCode===b?o=r[i+1]||r[0]:t.keyCode===m?o=r[i-1]||r.pop():n.contains(t.target)&&(t.keyCode===v||t.keyCode===p?o=r.pop():t.keyCode===g||t.keyCode===s?o=r[0]:t.keyCode!==l&&e.focus()),n.hasAttribute("hidden")||t.keyCode!==f||t.preventDefault(),E(e,t.keyCode!==f),!1!==o&&t.preventDefault(),o&&o.focus()}function E(e,t){void 0===t&&(t="true"===e.getAttribute("aria-expanded")),e.nextElementSibling[t?"removeAttribute":"setAttribute"]("hidden",""),e.setAttribute("aria-expanded",t)}function A(e,t,n){e.setAttribute("aria-label",e.textContent.trim()+", "+(t+1)+" av "+n.length),e.setAttribute("tabindex","-1")}return x.escapeHTML=r,x.highlight=function(e,t){var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return r(e).replace(new RegExp(n||".^","gi"),"<mark>$&</mark>")},t(d,"click",h),t(d,"focus",h,!0),t(d,"input",function(e){var r,t,n=e.target;n.hasAttribute(d)&&(t={relatedTarget:(r=n).nextElementSibling},u(r,"input.filter",t)&&c(y,r.nextElementSibling).reduce(function(e,t){var n=-1!==t.textContent.toLowerCase().indexOf(r.value.toLowerCase());return t[n?"removeAttribute":"setAttribute"]("hidden",""),n?e.concat(t):e},[]).forEach(A))}),t(d,"keydown",function(e){if(!(e.ctrlKey||e.altKey||e.metaKey)){if(e.target.hasAttribute(d))return w(e.target,e);for(var t=e.target,n=void 0;t;t=t.parentElement)if((n=t.previousElementSibling)&&n.hasAttribute(d))return w(n,e)}}),x});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.coreInput=t()}(this,function(){"use strict";var e="undefined"!=typeof window,o=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform))),i=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function t(e,t,n,r){(void 0===r&&(r=!1),"undefined"==typeof window||window[e=e+"-"+t])||(i||"object"!=typeof r||(r=Boolean(r.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,n,r))}var n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","/":"&#x2F;","'":"&#x27;"};function r(e){return String(e||"").replace(/[&<>"'/]/g,function(e){return n[e]})}var a="prevent_recursive_dispatch_maximum_callstack";function u(e,t,n){void 0===n&&(n={});var r,i=""+a+t;if(e[i])return!0;e[i]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}):(r=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,n);var o=e.dispatchEvent(r);return e[i]=null,o}function c(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var d="data-@nrk/core-input-1.0.4".replace(/\W+/g,"-"),l=13,f=27,s=33,p=34,v=35,m=36,b=38,g=40,y='[tabindex="-1"]',w=500;function x(e,t){var r="object"==typeof t?t:{content:t},i="string"==typeof r.content;return c(e).map(function(e){var t=e.nextElementSibling,n=void 0===r.ajax?e.getAttribute(d):r.ajax;return e.setAttribute(d,n||""),e.setAttribute(o?"data-role":"role","combobox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("autocomplete","off"),i&&(t.innerHTML=r.content),c("a,button",t).forEach(C),A(e,r.open),e})}function h(a){a.ctrlKey||a.altKey||a.metaKey||a.defaultPrevented||c("["+d+"]").forEach(function(e){var t,n,r=e.nextElementSibling,i=e===a.target||r.contains(a.target),o="click"===a.type&&i&&c(y,r).filter(function(e){return e.contains(a.target)})[0];o?(t=e,n={relatedTarget:r,currentTarget:o,value:o.value||o.textContent.trim()},u(t,"input.select",n)&&(t.value=n.value,t.focus(),A(t,!1))):A(e,i)})}function E(e,t){var n=e.nextElementSibling,r=c(y+":not([hidden])",n),i=r.indexOf(document.activeElement),o=!1;t.keyCode===g?o=r[i+1]||r[0]:t.keyCode===b?o=r[i-1]||r.pop():n.contains(t.target)&&(t.keyCode===v||t.keyCode===p?o=r.pop():t.keyCode===m||t.keyCode===s?o=r[0]:t.keyCode!==l&&e.focus()),n.hasAttribute("hidden")||t.keyCode!==f||t.preventDefault(),A(e,t.keyCode!==f),!1!==o&&t.preventDefault(),o&&o.focus()}function A(e,t){void 0===t&&(t="true"===e.getAttribute("aria-expanded")),e.nextElementSibling[t?"removeAttribute":"setAttribute"]("hidden",""),e.setAttribute("aria-expanded",t)}function C(e,t,n){e.setAttribute("aria-label",e.textContent.trim()+", "+(t+1)+" av "+n.length),e.setAttribute("tabindex","-1")}function k(e){var t=e.getAttribute(d),n=k.req=k.req||new window.XMLHttpRequest;if(!t)return!1;clearTimeout(k.timer),n.abort(),n.onload=function(){try{n.responseJSON=JSON.parse(n.responseText)}catch(e){n.responseJSON=!1}u(e,"input.ajax",n)},k.timer=setTimeout(function(){e.value&&(n.open("GET",t.replace("{{value}}",window.encodeURIComponent(e.value)),!0),n.send())},w)}return x.escapeHTML=r,x.highlight=function(e,t){var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return r(e).replace(new RegExp(n||".^","gi"),"<mark>$&</mark>")},t(d,"click",h),t(d,"focus",h,!0),t(d,"input",function(e){var r,t,n=e.target;n.hasAttribute(d)&&(t={relatedTarget:(r=n).nextElementSibling},u(r,"input.filter",t)&&!k(r)&&c(y,r.nextElementSibling).reduce(function(e,t){var n=-1!==t.textContent.toLowerCase().indexOf(r.value.toLowerCase());return t[n?"removeAttribute":"setAttribute"]("hidden",""),n?e.concat(t):e},[]).forEach(C))}),t(d,"keydown",function(e){if(!(e.ctrlKey||e.altKey||e.metaKey)){if(e.target.hasAttribute(d))return E(e.target,e);for(var t=e.target,n=void 0;t;t=t.parentElement)if((n=t.previousElementSibling)&&n.hasAttribute(d))return E(n,e)}}),x});
 //# sourceMappingURL=core-input.min.js.map

jsx/index.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.CoreInput=e(t.React)}(this,function(o){"use strict";o=o&&o.hasOwnProperty("default")?o.default:o;var t="undefined"!=typeof window,r=(t&&/(android)/i.test(navigator.userAgent),t&&/iPad|iPhone|iPod/.test(String(navigator.platform))),u=function(t){void 0===t&&(t=!1);try{window.addEventListener("test",null,{get passive(){t=!0}})}catch(t){}return t}();function e(t,e,n,i){(void 0===i&&(i=!1),"undefined"==typeof window||window[t=t+"-"+e])||(u||"object"!=typeof i||(i=Boolean(i.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,n,i))}var n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","/":"&#x2F;","'":"&#x27;"};function i(t){return String(t||"").replace(/[&<>"'/]/g,function(t){return n[t]})}var a="prevent_recursive_dispatch_maximum_callstack";function l(t,e,n){void 0===n&&(n={});var i,r=""+a+e;if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}):(i=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,n);var o=t.dispatchEvent(i);return t[r]=null,o}function c(t,e){if(void 0===e&&(e=document),t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var d="data-@nrk/core-input-1.0.3".replace(/\W+/g,"-"),s=13,p=27,f=33,h=34,v=35,m=36,g=38,y=40,b='[tabindex="-1"]';function E(t,e){var n="object"==typeof e?e:{content:e},i="string"==typeof n.content;return c(t).map(function(t){var e=t.nextElementSibling;return t.setAttribute(d,""),t.setAttribute(r?"data-role":"role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("autocomplete","off"),i&&(e.innerHTML=n.content),c("a,button",e).forEach(S),C(t,n.open),t})}function x(u){u.ctrlKey||u.altKey||u.metaKey||u.defaultPrevented||c("["+d+"]").forEach(function(t){var e,n,i=t.nextElementSibling,r=t===u.target||i.contains(u.target),o="click"===u.type&&r&&c(b,i).filter(function(t){return t.contains(u.target)})[0];o?(e=t,n={relatedTarget:i,currentTarget:o,value:o.value||o.textContent.trim()},l(e,"input.select",n)&&(e.value=n.value,e.focus(),C(e,!1))):C(t,r)})}function w(t,e){var n=t.nextElementSibling,i=c(b+":not([hidden])",n),r=i.indexOf(document.activeElement),o=!1;e.keyCode===y?o=i[r+1]||i[0]:e.keyCode===g?o=i[r-1]||i.pop():n.contains(e.target)&&(e.keyCode===v||e.keyCode===h?o=i.pop():e.keyCode===m||e.keyCode===f?o=i[0]:e.keyCode!==s&&t.focus()),n.hasAttribute("hidden")||e.keyCode!==p||e.preventDefault(),C(t,e.keyCode!==p),!1!==o&&e.preventDefault(),o&&o.focus()}function C(t,e){void 0===e&&(e="true"===t.getAttribute("aria-expanded")),t.nextElementSibling[e?"removeAttribute":"setAttribute"]("hidden",""),t.setAttribute("aria-expanded",e)}function S(t,e,n){t.setAttribute("aria-label",t.textContent.trim()+", "+(e+1)+" av "+n.length),t.setAttribute("tabindex","-1")}E.escapeHTML=i,E.highlight=function(t,e){var n=e.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return i(t).replace(new RegExp(n||".^","gi"),"<mark>$&</mark>")},e(d,"click",x),e(d,"focus",x,!0),e(d,"input",function(t){var i,e,n=t.target;n.hasAttribute(d)&&(e={relatedTarget:(i=n).nextElementSibling},l(i,"input.filter",e)&&c(b,i.nextElementSibling).reduce(function(t,e){var n=-1!==e.textContent.toLowerCase().indexOf(i.value.toLowerCase());return e[n?"removeAttribute":"setAttribute"]("hidden",""),n?t.concat(e):t},[]).forEach(S))}),e(d,"keydown",function(t){if(!(t.ctrlKey||t.altKey||t.metaKey)){if(t.target.hasAttribute(d))return w(t.target,t);for(var e=t.target,n=void 0;e;e=e.parentElement)if((n=e.previousElementSibling)&&n.hasAttribute(d))return w(n,t)}});var A={open:null,onFilter:null,onSelect:null},k=function(e){function t(t){e.call(this,t),this.onFilter=this.onFilter.bind(this),this.onSelect=this.onSelect.bind(this)}return e&&(t.__proto__=e),((t.prototype=Object.create(e&&e.prototype)).constructor=t).prototype.componentDidMount=function(){this.el.addEventListener("input.filter",this.onFilter),this.el.addEventListener("input.select",this.onSelect),E(this.el.firstElementChild)},t.prototype.componentDidUpdate=function(){E(this.el.firstElementChild)},t.prototype.componentWillUnmount=function(){this.el.removeEventListener("input.filter",this.onFilter),this.el.removeEventListener("input.select",this.onSelect)},t.prototype.onFilter=function(t){this.props.onFilter&&this.props.onFilter(t)},t.prototype.onSelect=function(t){this.props.onSelect&&this.props.onSelect(t)},t.prototype.render=function(){var n,i,t,r=this;return o.createElement("div",(n=this.props,i=A,void 0===(t={ref:function(t){return r.el=t}})&&(t={}),Object.keys(n).reduce(function(t,e){return i.hasOwnProperty(e)||(t[e]=n[e]),t},t)),o.Children.map(this.props.children,function(t,e){return 0===e?o.cloneElement(t,{"aria-expanded":String(Boolean(r.props.open))}):1===e?o.cloneElement(t,{hidden:!r.props.open}):t}))},t}(o.Component);return k.Highlight=function(t){var e=t.text,n=t.query;return void 0===n&&(n=""),o.createElement("span",{dangerouslySetInnerHTML:{__html:E.highlight(e,n)}})},k});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.CoreInput=t(e.React)}(this,function(a){"use strict";a=a&&a.hasOwnProperty("default")?a.default:a;var e="undefined"!=typeof window,o=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform))),r=function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}();function t(e,t,n,i){(void 0===i&&(i=!1),"undefined"==typeof window||window[e=e+"-"+t])||(r||"object"!=typeof i||(i=Boolean(i.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,n,i))}var n={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","/":"&#x2F;","'":"&#x27;"};function i(e){return String(e||"").replace(/[&<>"'/]/g,function(e){return n[e]})}var u="prevent_recursive_dispatch_maximum_callstack";function l(e,t,n){void 0===n&&(n={});var i,r=""+u+t;if(e[r])return!0;e[r]=!0,"function"==typeof window.CustomEvent?i=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n}):(i=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,n);var o=e.dispatchEvent(i);return e[r]=null,o}function c(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var s="data-@nrk/core-input-1.0.4".replace(/\W+/g,"-"),p=13,d=27,f=33,h=34,v=35,m=36,g=38,b=40,y='[tabindex="-1"]',x=500;function E(e,t){var i="object"==typeof t?t:{content:t},r="string"==typeof i.content;return c(e).map(function(e){var t=e.nextElementSibling,n=void 0===i.ajax?e.getAttribute(s):i.ajax;return e.setAttribute(s,n||""),e.setAttribute(o?"data-role":"role","combobox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("autocomplete","off"),r&&(t.innerHTML=i.content),c("a,button",t).forEach(S),C(e,i.open),e})}function w(a){a.ctrlKey||a.altKey||a.metaKey||a.defaultPrevented||c("["+s+"]").forEach(function(e){var t,n,i=e.nextElementSibling,r=e===a.target||i.contains(a.target),o="click"===a.type&&r&&c(y,i).filter(function(e){return e.contains(a.target)})[0];o?(t=e,n={relatedTarget:i,currentTarget:o,value:o.value||o.textContent.trim()},l(t,"input.select",n)&&(t.value=n.value,t.focus(),C(t,!1))):C(e,r)})}function A(e,t){var n=e.nextElementSibling,i=c(y+":not([hidden])",n),r=i.indexOf(document.activeElement),o=!1;t.keyCode===b?o=i[r+1]||i[0]:t.keyCode===g?o=i[r-1]||i.pop():n.contains(t.target)&&(t.keyCode===v||t.keyCode===h?o=i.pop():t.keyCode===m||t.keyCode===f?o=i[0]:t.keyCode!==p&&e.focus()),n.hasAttribute("hidden")||t.keyCode!==d||t.preventDefault(),C(e,t.keyCode!==d),!1!==o&&t.preventDefault(),o&&o.focus()}function C(e,t){void 0===t&&(t="true"===e.getAttribute("aria-expanded")),e.nextElementSibling[t?"removeAttribute":"setAttribute"]("hidden",""),e.setAttribute("aria-expanded",t)}function S(e,t,n){e.setAttribute("aria-label",e.textContent.trim()+", "+(t+1)+" av "+n.length),e.setAttribute("tabindex","-1")}function j(e){var t=e.getAttribute(s),n=j.req=j.req||new window.XMLHttpRequest;if(!t)return!1;clearTimeout(j.timer),n.abort(),n.onload=function(){try{n.responseJSON=JSON.parse(n.responseText)}catch(e){n.responseJSON=!1}l(e,"input.ajax",n)},j.timer=setTimeout(function(){e.value&&(n.open("GET",t.replace("{{value}}",window.encodeURIComponent(e.value)),!0),n.send())},x)}E.escapeHTML=i,E.highlight=function(e,t){var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return i(e).replace(new RegExp(n||".^","gi"),"<mark>$&</mark>")},t(s,"click",w),t(s,"focus",w,!0),t(s,"input",function(e){var i,t,n=e.target;n.hasAttribute(s)&&(t={relatedTarget:(i=n).nextElementSibling},l(i,"input.filter",t)&&!j(i)&&c(y,i.nextElementSibling).reduce(function(e,t){var n=-1!==t.textContent.toLowerCase().indexOf(i.value.toLowerCase());return t[n?"removeAttribute":"setAttribute"]("hidden",""),n?e.concat(t):e},[]).forEach(S))}),t(s,"keydown",function(e){if(!(e.ctrlKey||e.altKey||e.metaKey)){if(e.target.hasAttribute(s))return A(e.target,e);for(var t=e.target,n=void 0;t;t=t.parentElement)if((n=t.previousElementSibling)&&n.hasAttribute(s))return A(n,e)}});var k=function(t){function o(e){t.call(this,e),this.onFilter=this.onFilter.bind(this),this.onSelect=this.onSelect.bind(this),this.onAjax=this.onAjax.bind(this)}t&&(o.__proto__=t),(o.prototype=Object.create(t&&t.prototype)).constructor=o;var e={defaultProps:{configurable:!0}};return e.defaultProps.get=function(){return{open:null,ajax:null,onAjax:null,onFilter:null,onSelect:null}},o.prototype.componentDidMount=function(){this.el.addEventListener("input.filter",this.onFilter),this.el.addEventListener("input.select",this.onSelect),this.el.addEventListener("input.ajax",this.onAjax),E(this.el.firstElementChild,this.props)},o.prototype.componentDidUpdate=function(){E(this.el.firstElementChild)},o.prototype.componentWillUnmount=function(){this.el.removeEventListener("input.filter",this.onFilter),this.el.removeEventListener("input.select",this.onSelect),this.el.removeEventListener("input.ajax",this.onAjax)},o.prototype.onFilter=function(e){this.props.onFilter&&this.props.onFilter(e)},o.prototype.onSelect=function(e){this.props.onSelect&&this.props.onSelect(e)},o.prototype.onAjax=function(e){this.props.onAjax&&this.props.onAjax(e)},o.prototype.render=function(){var n,i,e,r=this;return a.createElement("div",(n=this.props,i=o.defaultProps,void 0===(e={ref:function(e){return r.el=e}})&&(e={}),Object.keys(n).reduce(function(e,t){return i.hasOwnProperty(t)||(e[t]=n[t]),e},e)),a.Children.map(this.props.children,function(e,t){return 0===t?a.cloneElement(e,{"aria-expanded":String(Boolean(r.props.open))}):1===t?a.cloneElement(e,{hidden:!r.props.open}):e}))},Object.defineProperties(o,e),o}(a.Component);return k.Highlight=function(e){var t=e.text,n=e.query;return void 0===n&&(n=""),a.createElement("span",{dangerouslySetInnerHTML:{__html:E.highlight(t,n)}})},k});
 //# sourceMappingURL=index.js.map

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-input.min.js",

New alerts

License Policy Violation

License

This 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

License

This 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

66818

increased by9.95%

Lines of code

188

increased by13.25%

No dependency changes