@nrk/core-input - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

core-input.cjs.js

 'use strict';
 
 var name = "@nrk/core-input";
-var version = "1.3.0";
+var version = "1.4.0";
 
@@ -98,3 +98,2 @@ var IS_BROWSER = typeof window !== 'undefined';
 var KEYS = { ENTER: 13, ESC: 27, PAGEUP: 33, PAGEDOWN: 34, END: 35, HOME: 36, UP: 38, DOWN: 40 };
-var ITEM = '[tabindex="-1"]';
 var AJAX_DEBOUNCE = 500;
@@ -105,2 +104,3 @@
   var repaint = typeof options.content === 'string';
+  var limit = Math.max(options.limit, 0) || 0;
 
@@ -113,2 +113,3 @@ return queryAll(elements).map(function (input) {
     input.setAttribute(UUID, ajax || '');
+    input.setAttribute((UUID + "-limit"), limit);
     input.setAttribute(IS_IOS ? 'data-role' : 'role', 'combobox'); // iOS does not inform user area is editable if combobox
@@ -119,3 +120,8 @@ input.setAttribute('aria-autocomplete', 'list');
     if (repaint) { list.innerHTML = options.content; }
-    queryAll('a,button', list).forEach(setupItem);
+    queryAll('a,button', list).forEach(function () {
+      var args = [], len = arguments.length;
+      while ( len-- ) args[ len ] = arguments[ len ];
+
+      return setupItem.apply(void 0, [ limit ].concat( args ));
+    });
     setupExpand(input, open);
@@ -142,3 +148,3 @@
     var open = input === event.target || list.contains(event.target);
-    var item = event.type === 'click' && open && queryAll(ITEM, list).filter(function (item) { return item.contains(event.target); })[0];
+    var item = event.type === 'click' && open && queryAll('[tabindex="-1"]', list).filter(function (item) { return item.contains(event.target); })[0];
 
@@ -166,3 +172,3 @@ if (item) { onSelect(input, { relatedTarget: list, currentTarget: item, value: item.value || item.textContent.trim() }); }
   var list = input.nextElementSibling;
-  var focusable = [input].concat(queryAll((ITEM + ":not([hidden])"), list));
+  var focusable = [input].concat(queryAll("[tabindex=\"-1\"]:not([hidden])", list));
   var isClosing = event.keyCode === KEYS.ESC && input.getAttribute('aria-expanded') === 'true';
@@ -195,4 +201,5 @@ var index = focusable.indexOf(document.activeElement);
 function onFilter (input, detail) {
+  var limit = Number(input.getAttribute((UUID + "-limit"))) || Infinity;
   if (dispatchEvent(input, 'input.filter', detail) && ajax(input) === false) {
-    queryAll(ITEM, input.nextElementSibling).reduce(function (acc, item) {
+    queryAll('[tabindex="-1"]', input.nextElementSibling).reduce(function (acc, item, index) {
       var list = item.parentElement.nodeName === 'LI' && item.parentElement;
@@ -204,3 +211,8 @@ var show = item.textContent.toLowerCase().indexOf(input.value.toLowerCase()) !== -1;
       return show ? acc.concat(item) : acc
-    }, []).forEach(setupItem);
+    }, []).forEach(function () {
+      var args = [], len = arguments.length;
+      while ( len-- ) args[ len ] = arguments[ len ];
+
+      return setupItem.apply(void 0, [ limit ].concat( args ));
+    });
   }
@@ -218,6 +230,7 @@ }
 
-function setupItem (item, index, items) {
+function setupItem (limit, item, index, items) {
   item.setAttribute('aria-label', ((item.textContent.trim()) + ", " + (index + 1) + " av " + (items.length)));
   item.setAttribute('tabindex', '-1');
   item.setAttribute('type', 'button');
+  if (index >= limit) { item.parentElement.setAttribute('hidden', ''); }
 }
@@ -224,0 +237,0 @@

core-input.js

@@ -6,3 +6,2 @@ import { name, version } from './package.json'
 const KEYS = { ENTER: 13, ESC: 27, PAGEUP: 33, PAGEDOWN: 34, END: 35, HOME: 36, UP: 38, DOWN: 40 }
-const ITEM = '[tabindex="-1"]'
 const AJAX_DEBOUNCE = 500
@@ -13,2 +12,3 @@
   const repaint = typeof options.content === 'string'
+  const limit = Math.max(options.limit, 0) || 0
 
@@ -21,2 +21,3 @@ return queryAll(elements).map((input) => {
     input.setAttribute(UUID, ajax || '')
+    input.setAttribute(`${UUID}-limit`, limit)
     input.setAttribute(IS_IOS ? 'data-role' : 'role', 'combobox') // iOS does not inform user area is editable if combobox
@@ -27,3 +28,3 @@ input.setAttribute('aria-autocomplete', 'list')
     if (repaint) list.innerHTML = options.content
-    queryAll('a,button', list).forEach(setupItem)
+    queryAll('a,button', list).forEach((...args) => setupItem(limit, ...args))
     setupExpand(input, open)
@@ -50,3 +51,3 @@
     const open = input === event.target || list.contains(event.target)
-    const item = event.type === 'click' && open && queryAll(ITEM, list).filter((item) => item.contains(event.target))[0]
+    const item = event.type === 'click' && open && queryAll('[tabindex="-1"]', list).filter((item) => item.contains(event.target))[0]
 
@@ -72,3 +73,3 @@ if (item) onSelect(input, { relatedTarget: list, currentTarget: item, value: item.value || item.textContent.trim() })
   const list = input.nextElementSibling
-  const focusable = [input].concat(queryAll(`${ITEM}:not([hidden])`, list))
+  const focusable = [input].concat(queryAll(`[tabindex="-1"]:not([hidden])`, list))
   const isClosing = event.keyCode === KEYS.ESC && input.getAttribute('aria-expanded') === 'true'
@@ -101,4 +102,5 @@ const index = focusable.indexOf(document.activeElement)
 function onFilter (input, detail) {
+  const limit = Number(input.getAttribute(`${UUID}-limit`)) || Infinity
   if (dispatchEvent(input, 'input.filter', detail) && ajax(input) === false) {
-    queryAll(ITEM, input.nextElementSibling).reduce((acc, item) => {
+    queryAll('[tabindex="-1"]', input.nextElementSibling).reduce((acc, item, index) => {
       const list = item.parentElement.nodeName === 'LI' && item.parentElement
@@ -110,3 +112,3 @@ const show = item.textContent.toLowerCase().indexOf(input.value.toLowerCase()) !== -1
       return show ? acc.concat(item) : acc
-    }, []).forEach(setupItem)
+    }, []).forEach((...args) => setupItem(limit, ...args))
   }
@@ -122,6 +124,7 @@ }
 
-function setupItem (item, index, items) {
+function setupItem (limit, item, index, items) {
   item.setAttribute('aria-label', `${item.textContent.trim()}, ${index + 1} av ${items.length}`)
   item.setAttribute('tabindex', '-1')
   item.setAttribute('type', 'button')
+  if (index >= limit) item.parentElement.setAttribute('hidden', '')
 }
@@ -128,0 +131,0 @@

core-input.jsx

@@ -7,3 +7,3 @@ import React from 'react'
 export default class Input extends React.Component {
-  static get defaultProps () { return { open: null, ajax: null, onAjax: null, onAjaxBeforeSend: null, onFilter: null, onSelect: null } }
+  static get defaultProps () { return { open: null, limit: null, ajax: null, onAjax: null, onAjaxBeforeSend: null, onFilter: null, onSelect: null } }
   constructor (props) {
@@ -51,2 +51,3 @@ super(props)
   open: PropTypes.bool,
+  limit: PropTypes.number,
   ajax: PropTypes.oneOfType([
@@ -53,0 +54,0 @@ PropTypes.string,

core-input.jsx.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-input v1.3.0 - Copyright (c) 2017-2019 NRK */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).CoreInput=t(e.React,e.PropTypes)}(this,function(i,e){"use strict";i=i&&i.hasOwnProperty("default")?i.default:i,e=e&&e.hasOwnProperty("default")?e.default:e;var t="undefined"!=typeof window,a=(t&&/(android)/i.test(navigator.userAgent),t&&/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 n(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 r={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","/":"&#x2F;","'":"&#x27;"};function u(e){return String(e||"").replace(/[&<>"'/]/g,function(e){return r[e]})}var l="prevent_recursive_dispatch_maximum_callstack";function c(e,t,n){void 0===n&&(n={});var r,o=""+l+t;if(e[o])return!0;e[o]=!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 i=e.dispatchEvent(r);return e[o]=null,i}function s(e){(window.requestAnimationFrame||window.setTimeout)(e)}function p(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.3.0".replace(/\W+/g,"-"),f=13,v=27,h=33,m=34,b=35,g=36,x=38,y=40,E='[tabindex="-1"]',A=500;function w(e,t){var o="object"==typeof t?t:{content:t},i="string"==typeof o.content;return p(e).map(function(e){var t=e.nextElementSibling,n=void 0===o.ajax?e.getAttribute(d):o.ajax,r=void 0===o.open?e===document.activeElement:o.open;return e.setAttribute(d,n||""),e.setAttribute(a?"data-role":"role","combobox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("autocomplete","off"),i&&(t.innerHTML=o.content),p("a,button",t).forEach(L),C(e,r),e})}function S(a){a.ctrlKey||a.altKey||a.metaKey||a.defaultPrevented||p("["+d+"]").forEach(function(e){var t,n,r=e.nextElementSibling,o=e===a.target||r.contains(a.target),i="click"===a.type&&o&&p(E,r).filter(function(e){return e.contains(a.target)})[0];i?(t=e,n={relatedTarget:r,currentTarget:i,value:i.value||i.textContent.trim()},c(t,"input.select",n)&&(t.value=n.value,t.focus(),s(function(){return C(t,!1)}))):C(e,o)})}function j(e,t){var n=e.nextElementSibling,r=[e].concat(p(E+":not([hidden])",n)),o=t.keyCode===v&&"true"===e.getAttribute("aria-expanded"),i=r.indexOf(document.activeElement),a=!1;t.keyCode===y?a=r[i+1]||r[0]:t.keyCode===x?a=r[i-1]||r.pop():n.contains(t.target)&&(t.keyCode===b||t.keyCode===m?a=r.pop():t.keyCode===g||t.keyCode===h?a=r[1]:t.keyCode!==f&&e.focus()),C(e,t.keyCode!==v),(!1!==a||o)&&t.preventDefault(),a&&a.focus()}function C(e,t){void 0===t&&(t="true"===e.getAttribute("aria-expanded")),s(function(){e.nextElementSibling[t?"removeAttribute":"setAttribute"]("hidden",""),e.setAttribute("aria-expanded",t)})}function L(e,t,n){e.setAttribute("aria-label",e.textContent.trim()+", "+(t+1)+" av "+n.length),e.setAttribute("tabindex","-1"),e.setAttribute("type","button")}function k(e){var t=e.getAttribute(d),n=k.xhr=k.xhr||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}c(e,"input.ajax",n)},k.timer=setTimeout(function(){e.value&&c(e,"input.ajax.beforeSend",n)&&(n.open("GET",t.replace("{{value}}",window.encodeURIComponent(e.value)),!0),n.setRequestHeader("X-Requested-With","XMLHttpRequest"),n.send())},A)}w.escapeHTML=u,w.highlight=function(e,t){var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return u(e).replace(new RegExp(n||".^","gi"),"<mark>$&</mark>")},n(d,"click",S),n(d,"focus",S,!0),n(d,"input",function(e){var i,t,n=e.target;n.hasAttribute(d)&&(t={relatedTarget:(i=n).nextElementSibling},c(i,"input.filter",t)&&!1===k(i)&&p(E,i.nextElementSibling).reduce(function(e,t){var n="LI"===t.parentElement.nodeName&&t.parentElement,r=-1!==t.textContent.toLowerCase().indexOf(i.value.toLowerCase()),o=r?"removeAttribute":"setAttribute";return n&&n[o]("hidden",""),t[o]("hidden",""),r?e.concat(t):e},[]).forEach(L))}),n(d,"keydown",function(e){if(!(e.ctrlKey||e.altKey||e.metaKey)){if(e.target.hasAttribute&&e.target.hasAttribute(d))return j(e.target,e);for(var t=e.target,n=void 0;t;t=t.parentElement)if((n=t.previousElementSibling)&&n.hasAttribute(d))return j(n,e)}},!0);var T=function(n){function t(e){var t=this;n.call(this,e),this.onFilter=function(e){return t.props.onFilter&&t.props.onFilter(e)},this.onSelect=function(e){return t.props.onSelect&&t.props.onSelect(e)},this.onAjaxBeforeSend=function(e){return t.props.onAjaxBeforeSend&&t.props.onAjaxBeforeSend(e)},this.onAjax=function(e){return t.props.onAjax&&t.props.onAjax(e)}}n&&(t.__proto__=n),(t.prototype=Object.create(n&&n.prototype)).constructor=t;var e={defaultProps:{configurable:!0}};return e.defaultProps.get=function(){return{open:null,ajax:null,onAjax:null,onAjaxBeforeSend:null,onFilter:null,onSelect:null}},t.prototype.componentDidMount=function(){this.el.addEventListener("input.filter",this.onFilter),this.el.addEventListener("input.select",this.onSelect),this.el.addEventListener("input.ajax.beforeSend",this.onAjaxBeforeSend),this.el.addEventListener("input.ajax",this.onAjax),w(this.el.firstElementChild,this.props)},t.prototype.componentDidUpdate=function(){w(this.el.firstElementChild)},t.prototype.componentWillUnmount=function(){this.el.removeEventListener("input.filter",this.onFilter),this.el.removeEventListener("input.select",this.onSelect),this.el.removeEventListener("input.beforeSend",this.onAjaxBeforeSend),this.el.removeEventListener("input.ajax",this.onAjax)},t.prototype.render=function(){var n,r,e,o=this;return i.createElement("div",(n=this.props,r=t.defaultProps,void 0===(e={ref:function(e){return o.el=e}})&&(e={}),Object.keys(n).reduce(function(e,t){return r.hasOwnProperty(t)||(e[t]=n[t]),e},e)),i.Children.map(this.props.children,function(e,t){return 0===t?i.cloneElement(e,{"aria-expanded":String(Boolean(o.props.open))}):1===t?i.cloneElement(e,{hidden:!o.props.open}):e}))},Object.defineProperties(t,e),t}(i.Component);return T.Highlight=function(e){var t=e.text,n=e.query;return void 0===n&&(n=""),i.createElement("span",{dangerouslySetInnerHTML:{__html:w.highlight(t,n)}})},T.propTypes={onFilter:e.func,onSelect:e.func,onAjax:e.func,open:e.bool,ajax:e.oneOfType([e.string,e.object])},T});
+/*! @nrk/core-input v1.3.1 - Copyright (c) 2017-2019 NRK */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).CoreInput=t(e.React,e.PropTypes)}(this,function(i,e){"use strict";i=i&&i.hasOwnProperty("default")?i.default:i,e=e&&e.hasOwnProperty("default")?e.default:e;var t="undefined"!=typeof window,u=(t&&/(android)/i.test(navigator.userAgent),t&&/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 n(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 r={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","/":"&#x2F;","'":"&#x27;"};function a(e){return String(e||"").replace(/[&<>"'/]/g,function(e){return r[e]})}var l="prevent_recursive_dispatch_maximum_callstack";function c(e,t,n){void 0===n&&(n={});var r,o=""+l+t;if(e[o])return!0;e[o]=!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 i=e.dispatchEvent(r);return e[o]=null,i}function p(e){(window.requestAnimationFrame||window.setTimeout)(e)}function s(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.4.0".replace(/\W+/g,"-"),f=13,m=27,v=33,h=34,b=35,g=36,x=38,y=40,E=500;function A(e,t){var o="object"==typeof t?t:{content:t},i="string"==typeof o.content,a=Math.max(o.limit,0)||0;return s(e).map(function(e){var t=e.nextElementSibling,n=void 0===o.ajax?e.getAttribute(d):o.ajax,r=void 0===o.open?e===document.activeElement:o.open;return e.setAttribute(d,n||""),e.setAttribute(d+"-limit",a),e.setAttribute(u?"data-role":"role","combobox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("autocomplete","off"),i&&(t.innerHTML=o.content),s("a,button",t).forEach(function(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];return C.apply(void 0,[a].concat(e))}),j(e,r),e})}function w(a){a.ctrlKey||a.altKey||a.metaKey||a.defaultPrevented||s("["+d+"]").forEach(function(e){var t,n,r=e.nextElementSibling,o=e===a.target||r.contains(a.target),i="click"===a.type&&o&&s('[tabindex="-1"]',r).filter(function(e){return e.contains(a.target)})[0];i?(t=e,n={relatedTarget:r,currentTarget:i,value:i.value||i.textContent.trim()},c(t,"input.select",n)&&(t.value=n.value,t.focus(),p(function(){return j(t,!1)}))):j(e,o)})}function S(e,t){var n=e.nextElementSibling,r=[e].concat(s('[tabindex="-1"]:not([hidden])',n)),o=t.keyCode===m&&"true"===e.getAttribute("aria-expanded"),i=r.indexOf(document.activeElement),a=!1;t.keyCode===y?a=r[i+1]||r[0]:t.keyCode===x?a=r[i-1]||r.pop():n.contains(t.target)&&(t.keyCode===b||t.keyCode===h?a=r.pop():t.keyCode===g||t.keyCode===v?a=r[1]:t.keyCode!==f&&e.focus()),j(e,t.keyCode!==m),(!1!==a||o)&&t.preventDefault(),a&&a.focus()}function j(e,t){void 0===t&&(t="true"===e.getAttribute("aria-expanded")),p(function(){e.nextElementSibling[t?"removeAttribute":"setAttribute"]("hidden",""),e.setAttribute("aria-expanded",t)})}function C(e,t,n,r){t.setAttribute("aria-label",t.textContent.trim()+", "+(n+1)+" av "+r.length),t.setAttribute("tabindex","-1"),t.setAttribute("type","button"),e<=n&&t.parentElement.setAttribute("hidden","")}function L(e){var t=e.getAttribute(d),n=L.xhr=L.xhr||new window.XMLHttpRequest;if(!t)return!1;clearTimeout(L.timer),n.abort(),n.onload=function(){try{n.responseJSON=JSON.parse(n.responseText)}catch(e){n.responseJSON=!1}c(e,"input.ajax",n)},L.timer=setTimeout(function(){e.value&&c(e,"input.ajax.beforeSend",n)&&(n.open("GET",t.replace("{{value}}",window.encodeURIComponent(e.value)),!0),n.setRequestHeader("X-Requested-With","XMLHttpRequest"),n.send())},E)}A.escapeHTML=a,A.highlight=function(e,t){var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return a(e).replace(new RegExp(n||".^","gi"),"<mark>$&</mark>")},n(d,"click",w),n(d,"focus",w,!0),n(d,"input",function(e){var a,t,n,r=e.target;r.hasAttribute(d)&&(t={relatedTarget:(a=r).nextElementSibling},n=Number(a.getAttribute(d+"-limit"))||1/0,c(a,"input.filter",t)&&!1===L(a)&&s('[tabindex="-1"]',a.nextElementSibling).reduce(function(e,t,n){var r="LI"===t.parentElement.nodeName&&t.parentElement,o=-1!==t.textContent.toLowerCase().indexOf(a.value.toLowerCase()),i=o?"removeAttribute":"setAttribute";return r&&r[i]("hidden",""),t[i]("hidden",""),o?e.concat(t):e},[]).forEach(function(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];return C.apply(void 0,[n].concat(e))}))}),n(d,"keydown",function(e){if(!(e.ctrlKey||e.altKey||e.metaKey)){if(e.target.hasAttribute&&e.target.hasAttribute(d))return S(e.target,e);for(var t=e.target,n=void 0;t;t=t.parentElement)if((n=t.previousElementSibling)&&n.hasAttribute(d))return S(n,e)}},!0);var k=function(n){function t(e){var t=this;n.call(this,e),this.onFilter=function(e){return t.props.onFilter&&t.props.onFilter(e)},this.onSelect=function(e){return t.props.onSelect&&t.props.onSelect(e)},this.onAjaxBeforeSend=function(e){return t.props.onAjaxBeforeSend&&t.props.onAjaxBeforeSend(e)},this.onAjax=function(e){return t.props.onAjax&&t.props.onAjax(e)}}n&&(t.__proto__=n),(t.prototype=Object.create(n&&n.prototype)).constructor=t;var e={defaultProps:{configurable:!0}};return e.defaultProps.get=function(){return{open:null,limit:null,ajax:null,onAjax:null,onAjaxBeforeSend:null,onFilter:null,onSelect:null}},t.prototype.componentDidMount=function(){this.el.addEventListener("input.filter",this.onFilter),this.el.addEventListener("input.select",this.onSelect),this.el.addEventListener("input.ajax.beforeSend",this.onAjaxBeforeSend),this.el.addEventListener("input.ajax",this.onAjax),A(this.el.firstElementChild,this.props)},t.prototype.componentDidUpdate=function(){A(this.el.firstElementChild)},t.prototype.componentWillUnmount=function(){this.el.removeEventListener("input.filter",this.onFilter),this.el.removeEventListener("input.select",this.onSelect),this.el.removeEventListener("input.beforeSend",this.onAjaxBeforeSend),this.el.removeEventListener("input.ajax",this.onAjax)},t.prototype.render=function(){var n,r,e,o=this;return i.createElement("div",(n=this.props,r=t.defaultProps,void 0===(e={ref:function(e){return o.el=e}})&&(e={}),Object.keys(n).reduce(function(e,t){return r.hasOwnProperty(t)||(e[t]=n[t]),e},e)),i.Children.map(this.props.children,function(e,t){return 0===t?i.cloneElement(e,{"aria-expanded":String(Boolean(o.props.open))}):1===t?i.cloneElement(e,{hidden:!o.props.open}):e}))},Object.defineProperties(t,e),t}(i.Component);return k.Highlight=function(e){var t=e.text,n=e.query;return void 0===n&&(n=""),i.createElement("span",{dangerouslySetInnerHTML:{__html:A.highlight(t,n)}})},k.propTypes={onFilter:e.func,onSelect:e.func,onAjax:e.func,open:e.bool,limit:e.number,ajax:e.oneOfType([e.string,e.object])},k});
 //# sourceMappingURL=core-input.jsx.js.map

core-input.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-input v1.3.0 - Copyright (c) 2017-2019 NRK */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).coreInput=t()}(this,function(){"use strict";var e="undefined"!=typeof window,a=(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 u="prevent_recursive_dispatch_maximum_callstack";function c(e,t,n){void 0===n&&(n={});var r,i=""+u+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 d(e){(window.requestAnimationFrame||window.setTimeout)(e)}function l(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 f="data-@nrk/core-input-1.3.0".replace(/\W+/g,"-"),s=13,p=27,v=33,m=34,b=35,g=36,y=38,w=40,x='[tabindex="-1"]',o=500;function h(e,t){var i="object"==typeof t?t:{content:t},o="string"==typeof i.content;return l(e).map(function(e){var t=e.nextElementSibling,n=void 0===i.ajax?e.getAttribute(f):i.ajax,r=void 0===i.open?e===document.activeElement:i.open;return e.setAttribute(f,n||""),e.setAttribute(a?"data-role":"role","combobox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("autocomplete","off"),o&&(t.innerHTML=i.content),l("a,button",t).forEach(k),C(e,r),e})}function E(a){a.ctrlKey||a.altKey||a.metaKey||a.defaultPrevented||l("["+f+"]").forEach(function(e){var t,n,r=e.nextElementSibling,i=e===a.target||r.contains(a.target),o="click"===a.type&&i&&l(x,r).filter(function(e){return e.contains(a.target)})[0];o?(t=e,n={relatedTarget:r,currentTarget:o,value:o.value||o.textContent.trim()},c(t,"input.select",n)&&(t.value=n.value,t.focus(),d(function(){return C(t,!1)}))):C(e,i)})}function A(e,t){var n=e.nextElementSibling,r=[e].concat(l(x+":not([hidden])",n)),i=t.keyCode===p&&"true"===e.getAttribute("aria-expanded"),o=r.indexOf(document.activeElement),a=!1;t.keyCode===w?a=r[o+1]||r[0]:t.keyCode===y?a=r[o-1]||r.pop():n.contains(t.target)&&(t.keyCode===b||t.keyCode===m?a=r.pop():t.keyCode===g||t.keyCode===v?a=r[1]:t.keyCode!==s&&e.focus()),C(e,t.keyCode!==p),(!1!==a||i)&&t.preventDefault(),a&&a.focus()}function C(e,t){void 0===t&&(t="true"===e.getAttribute("aria-expanded")),d(function(){e.nextElementSibling[t?"removeAttribute":"setAttribute"]("hidden",""),e.setAttribute("aria-expanded",t)})}function k(e,t,n){e.setAttribute("aria-label",e.textContent.trim()+", "+(t+1)+" av "+n.length),e.setAttribute("tabindex","-1"),e.setAttribute("type","button")}function S(e){var t=e.getAttribute(f),n=S.xhr=S.xhr||new window.XMLHttpRequest;if(!t)return!1;clearTimeout(S.timer),n.abort(),n.onload=function(){try{n.responseJSON=JSON.parse(n.responseText)}catch(e){n.responseJSON=!1}c(e,"input.ajax",n)},S.timer=setTimeout(function(){e.value&&c(e,"input.ajax.beforeSend",n)&&(n.open("GET",t.replace("{{value}}",window.encodeURIComponent(e.value)),!0),n.setRequestHeader("X-Requested-With","XMLHttpRequest"),n.send())},o)}return h.escapeHTML=r,h.highlight=function(e,t){var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return r(e).replace(new RegExp(n||".^","gi"),"<mark>$&</mark>")},t(f,"click",E),t(f,"focus",E,!0),t(f,"input",function(e){var o,t,n=e.target;n.hasAttribute(f)&&(t={relatedTarget:(o=n).nextElementSibling},c(o,"input.filter",t)&&!1===S(o)&&l(x,o.nextElementSibling).reduce(function(e,t){var n="LI"===t.parentElement.nodeName&&t.parentElement,r=-1!==t.textContent.toLowerCase().indexOf(o.value.toLowerCase()),i=r?"removeAttribute":"setAttribute";return n&&n[i]("hidden",""),t[i]("hidden",""),r?e.concat(t):e},[]).forEach(k))}),t(f,"keydown",function(e){if(!(e.ctrlKey||e.altKey||e.metaKey)){if(e.target.hasAttribute&&e.target.hasAttribute(f))return A(e.target,e);for(var t=e.target,n=void 0;t;t=t.parentElement)if((n=t.previousElementSibling)&&n.hasAttribute(f))return A(n,e)}},!0),h});
+/*! @nrk/core-input v1.3.1 - Copyright (c) 2017-2019 NRK */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).coreInput=t()}(this,function(){"use strict";var e="undefined"!=typeof window,u=(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 a="prevent_recursive_dispatch_maximum_callstack";function c(e,t,n){void 0===n&&(n={});var i,r=""+a+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 d(e){(window.requestAnimationFrame||window.setTimeout)(e)}function l(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 f="data-@nrk/core-input-1.4.0".replace(/\W+/g,"-"),s=13,p=27,m=33,v=34,b=35,g=36,y=38,x=40,o=500;function w(e,t){var r="object"==typeof t?t:{content:t},o="string"==typeof r.content,a=Math.max(r.limit,0)||0;return l(e).map(function(e){var t=e.nextElementSibling,n=void 0===r.ajax?e.getAttribute(f):r.ajax,i=void 0===r.open?e===document.activeElement:r.open;return e.setAttribute(f,n||""),e.setAttribute(f+"-limit",a),e.setAttribute(u?"data-role":"role","combobox"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("autocomplete","off"),o&&(t.innerHTML=r.content),l("a,button",t).forEach(function(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];return C.apply(void 0,[a].concat(e))}),E(e,i),e})}function h(a){a.ctrlKey||a.altKey||a.metaKey||a.defaultPrevented||l("["+f+"]").forEach(function(e){var t,n,i=e.nextElementSibling,r=e===a.target||i.contains(a.target),o="click"===a.type&&r&&l('[tabindex="-1"]',i).filter(function(e){return e.contains(a.target)})[0];o?(t=e,n={relatedTarget:i,currentTarget:o,value:o.value||o.textContent.trim()},c(t,"input.select",n)&&(t.value=n.value,t.focus(),d(function(){return E(t,!1)}))):E(e,r)})}function A(e,t){var n=e.nextElementSibling,i=[e].concat(l('[tabindex="-1"]:not([hidden])',n)),r=t.keyCode===p&&"true"===e.getAttribute("aria-expanded"),o=i.indexOf(document.activeElement),a=!1;t.keyCode===x?a=i[o+1]||i[0]:t.keyCode===y?a=i[o-1]||i.pop():n.contains(t.target)&&(t.keyCode===b||t.keyCode===v?a=i.pop():t.keyCode===g||t.keyCode===m?a=i[1]:t.keyCode!==s&&e.focus()),E(e,t.keyCode!==p),(!1!==a||r)&&t.preventDefault(),a&&a.focus()}function E(e,t){void 0===t&&(t="true"===e.getAttribute("aria-expanded")),d(function(){e.nextElementSibling[t?"removeAttribute":"setAttribute"]("hidden",""),e.setAttribute("aria-expanded",t)})}function C(e,t,n,i){t.setAttribute("aria-label",t.textContent.trim()+", "+(n+1)+" av "+i.length),t.setAttribute("tabindex","-1"),t.setAttribute("type","button"),e<=n&&t.parentElement.setAttribute("hidden","")}function k(e){var t=e.getAttribute(f),n=k.xhr=k.xhr||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}c(e,"input.ajax",n)},k.timer=setTimeout(function(){e.value&&c(e,"input.ajax.beforeSend",n)&&(n.open("GET",t.replace("{{value}}",window.encodeURIComponent(e.value)),!0),n.setRequestHeader("X-Requested-With","XMLHttpRequest"),n.send())},o)}return w.escapeHTML=i,w.highlight=function(e,t){var n=t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&");return i(e).replace(new RegExp(n||".^","gi"),"<mark>$&</mark>")},t(f,"click",h),t(f,"focus",h,!0),t(f,"input",function(e){var a,t,n,i=e.target;i.hasAttribute(f)&&(t={relatedTarget:(a=i).nextElementSibling},n=Number(a.getAttribute(f+"-limit"))||1/0,c(a,"input.filter",t)&&!1===k(a)&&l('[tabindex="-1"]',a.nextElementSibling).reduce(function(e,t,n){var i="LI"===t.parentElement.nodeName&&t.parentElement,r=-1!==t.textContent.toLowerCase().indexOf(a.value.toLowerCase()),o=r?"removeAttribute":"setAttribute";return i&&i[o]("hidden",""),t[o]("hidden",""),r?e.concat(t):e},[]).forEach(function(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];return C.apply(void 0,[n].concat(e))}))}),t(f,"keydown",function(e){if(!(e.ctrlKey||e.altKey||e.metaKey)){if(e.target.hasAttribute&&e.target.hasAttribute(f))return A(e.target,e);for(var t=e.target,n=void 0;t;t=t.parentElement)if((n=t.previousElementSibling)&&n.hasAttribute(f))return A(n,e)}},!0),w});
 //# sourceMappingURL=core-input.min.js.map

core-input.test.js

 const coreInput = require('./core-input.min')
 
-function expectOpenedState (input, suggestions) {
-  expect(input.getAttribute('role')).toEqual('combobox')
-  expect(input.getAttribute('aria-autocomplete')).toEqual('list')
-  expect(input.getAttribute('autocomplete')).toEqual('off')
-  expect(input.getAttribute('aria-expanded')).toEqual('true')
-  expect(suggestions.hasAttribute('hidden')).toBeFalsy()
-}
-
-function expectClosedState (input, suggestions) {
-  expect(input.getAttribute('role')).toEqual('combobox')
-  expect(input.getAttribute('aria-autocomplete')).toEqual('list')
-  expect(input.getAttribute('autocomplete')).toEqual('off')
-  expect(input.getAttribute('aria-expanded')).toEqual('false')
-  expect(suggestions.hasAttribute('hidden')).toBeTruthy()
-}
-
 const standardHTML = `
-<input type="text" class="my-input" placeholder="Type something...">
-<ul hidden>
-  <li><button>Chrome</button></li>
-  <li><button>Firefox</button></li>
-  <li><button>Opera</button></li>
-  <li><button>Safari</button></li>
-  <li><button>Microsoft Edge</button></li>
-</ul>
-<button id="something-else" type="button"></button>
+  <input type="text" class="my-input" placeholder="Type something...">
+  <ul hidden>
+    <li><button>Chrome</button></li>
+    <li><button>Firefox</button></li>
+    <li><button>Opera</button></li>
+    <li><button>Safari</button></li>
+    <li><button>Microsoft Edge</button></li>
+  </ul>
+  <button id="something-else" type="button"></button>
 `
@@ -44,7 +28,5 @@
 
-  it('should initialize input with props when core-input is called', () => {
+  it('should initialize input with props', () => {
     document.body.innerHTML = standardHTML
-
     const input = document.querySelector('.my-input')
-
     coreInput(input)
@@ -57,17 +39,17 @@ expect(input.getAttribute('role')).toEqual('combobox')
 
-  it('should expand suggestions when input field is clicked', () => {
+  it('should expand suggestions when input is clicked', () => {
     document.body.innerHTML = standardHTML
-
     const input = document.querySelector('.my-input')
     const suggestions = document.querySelector('.my-input + ul')
-
     coreInput(input)
-
     input.click()
-    expectOpenedState(input, suggestions)
+    expect(input.getAttribute('role')).toEqual('combobox')
+    expect(input.getAttribute('aria-autocomplete')).toEqual('list')
+    expect(input.getAttribute('autocomplete')).toEqual('off')
+    expect(input.getAttribute('aria-expanded')).toEqual('true')
+    expect(suggestions.hasAttribute('hidden')).toBeFalsy()
   })
 
-  it('should set input value to that of clicked suggestion', () => {
+  it('should set input value to clicked suggestion', () => {
     document.body.innerHTML = standardHTML
-
     const input = document.querySelector('.my-input')
@@ -77,40 +59,37 @@ const suggestions = document.querySelector('.my-input + ul')
     const callback = jest.fn()
-
     coreInput(input)
-
     input.addEventListener('input.select', callback)
     input.click()
     firefoxBtn.click()
-
     expect(callback).toHaveBeenCalled()
     expect(input.value).toEqual('Firefox')
-    expectClosedState(input, suggestions)
+    expect(input.getAttribute('role')).toEqual('combobox')
+    expect(input.getAttribute('aria-autocomplete')).toEqual('list')
+    expect(input.getAttribute('autocomplete')).toEqual('off')
+    expect(input.getAttribute('aria-expanded')).toEqual('false')
+    expect(suggestions.hasAttribute('hidden')).toBeTruthy()
   })
 
-  it('should close suggestions if focus is placed outside on elements outside list/input', () => {
+  it('should close suggestions on focusing outside', () => {
     document.body.innerHTML = standardHTML
-
     const input = document.querySelector('.my-input')
     const suggestions = document.querySelector('.my-input + ul')
     const someOtherBtn = document.querySelector('#something-else')
-
     coreInput(input)
-
     input.click()
     someOtherBtn.click()
-
-    expectClosedState(input, suggestions)
+    expect(input.getAttribute('role')).toEqual('combobox')
+    expect(input.getAttribute('aria-autocomplete')).toEqual('list')
+    expect(input.getAttribute('autocomplete')).toEqual('off')
+    expect(input.getAttribute('aria-expanded')).toEqual('false')
+    expect(suggestions.hasAttribute('hidden')).toBeTruthy()
   })
 
-  it('should filter suggestion list according to value in input', () => {
+  it('should filter suggestion from input value', () => {
     document.body.innerHTML = standardHTML
-
     const input = document.querySelector('.my-input')
     const event = new window.CustomEvent('input', { bubbles: true })
-
     coreInput(input)
-
     input.value = 'Chrome'
     input.dispatchEvent(event)
-
     expect(document.querySelectorAll('button[hidden]').length).toEqual(4)
@@ -121,3 +100,2 @@ })
     document.body.innerHTML = standardHTML
-
     coreInput(document.querySelector('.my-input'))
@@ -128,7 +106,14 @@ document.querySelectorAll('ul button').forEach((button) => {
   })
+
+  it('should limit length of suggestions from option', () => {
+    document.body.innerHTML = standardHTML
+    const input = document.querySelector('.my-input')
+    const suggestions = document.querySelector('.my-input + ul')
+    coreInput(input, { limit: 2 })
+    expect(suggestions.children[0].hasAttribute('hidden')).toBe(false)
+    expect(suggestions.children[1].hasAttribute('hidden')).toBe(false)
+    expect(suggestions.children[2].hasAttribute('hidden')).toBe(true)
+    expect(suggestions.children[3].hasAttribute('hidden')).toBe(true)
+    expect(suggestions.children[4].hasAttribute('hidden')).toBe(true)
+  })
 })
-
-module.exports = {
-  expectOpenedState,
-  expectClosedState
-}

core-input.test.jsx

 const React = require('react')
 const ReactDOM = require('react-dom')
 const CoreInput = require('./jsx')
-const { expectOpenedState, expectClosedState } = require('./core-input.test.js')
 
@@ -56,3 +55,7 @@ const mount = (props = {}, keepInstance) => {
     input.click()
-    expectOpenedState(input, suggestions)
+    expect(input.getAttribute('role')).toEqual('combobox')
+    expect(input.getAttribute('aria-autocomplete')).toEqual('list')
+    expect(input.getAttribute('autocomplete')).toEqual('off')
+    expect(input.getAttribute('aria-expanded')).toEqual('true')
+    expect(suggestions.hasAttribute('hidden')).toBeFalsy()
   })
@@ -73,3 +76,7 @@
     expect(input.value).toEqual('Firefox')
-    expectClosedState(input, suggestions)
+    expect(input.getAttribute('role')).toEqual('combobox')
+    expect(input.getAttribute('aria-autocomplete')).toEqual('list')
+    expect(input.getAttribute('autocomplete')).toEqual('off')
+    expect(input.getAttribute('aria-expanded')).toEqual('false')
+    expect(suggestions.hasAttribute('hidden')).toBeTruthy()
   })
@@ -86,3 +93,7 @@
 
-    expectClosedState(input, suggestions)
+    expect(input.getAttribute('role')).toEqual('combobox')
+    expect(input.getAttribute('aria-autocomplete')).toEqual('list')
+    expect(input.getAttribute('autocomplete')).toEqual('off')
+    expect(input.getAttribute('aria-expanded')).toEqual('false')
+    expect(suggestions.hasAttribute('hidden')).toBeTruthy()
   })
@@ -89,0 +100,0 @@

jsx.js

@@ -9,3 +9,3 @@ 'use strict';
 var name = "@nrk/core-input";
-var version = "1.3.0";
+var version = "1.4.0";
 
@@ -119,3 +119,2 @@ var IS_BROWSER = typeof window !== 'undefined';
 var KEYS = { ENTER: 13, ESC: 27, PAGEUP: 33, PAGEDOWN: 34, END: 35, HOME: 36, UP: 38, DOWN: 40 };
-var ITEM = '[tabindex="-1"]';
 var AJAX_DEBOUNCE = 500;
@@ -126,2 +125,3 @@
   var repaint = typeof options.content === 'string';
+  var limit = Math.max(options.limit, 0) || 0;
 
@@ -134,2 +134,3 @@ return queryAll(elements).map(function (input) {
     input.setAttribute(UUID, ajax || '');
+    input.setAttribute((UUID + "-limit"), limit);
     input.setAttribute(IS_IOS ? 'data-role' : 'role', 'combobox'); // iOS does not inform user area is editable if combobox
@@ -140,3 +141,8 @@ input.setAttribute('aria-autocomplete', 'list');
     if (repaint) { list.innerHTML = options.content; }
-    queryAll('a,button', list).forEach(setupItem);
+    queryAll('a,button', list).forEach(function () {
+      var args = [], len = arguments.length;
+      while ( len-- ) args[ len ] = arguments[ len ];
+
+      return setupItem.apply(void 0, [ limit ].concat( args ));
+    });
     setupExpand(input, open);
@@ -163,3 +169,3 @@
     var open = input === event.target || list.contains(event.target);
-    var item = event.type === 'click' && open && queryAll(ITEM, list).filter(function (item) { return item.contains(event.target); })[0];
+    var item = event.type === 'click' && open && queryAll('[tabindex="-1"]', list).filter(function (item) { return item.contains(event.target); })[0];
 
@@ -187,3 +193,3 @@ if (item) { onSelect(input, { relatedTarget: list, currentTarget: item, value: item.value || item.textContent.trim() }); }
   var list = input.nextElementSibling;
-  var focusable = [input].concat(queryAll((ITEM + ":not([hidden])"), list));
+  var focusable = [input].concat(queryAll("[tabindex=\"-1\"]:not([hidden])", list));
   var isClosing = event.keyCode === KEYS.ESC && input.getAttribute('aria-expanded') === 'true';
@@ -216,4 +222,5 @@ var index = focusable.indexOf(document.activeElement);
 function onFilter (input, detail) {
+  var limit = Number(input.getAttribute((UUID + "-limit"))) || Infinity;
   if (dispatchEvent(input, 'input.filter', detail) && ajax(input) === false) {
-    queryAll(ITEM, input.nextElementSibling).reduce(function (acc, item) {
+    queryAll('[tabindex="-1"]', input.nextElementSibling).reduce(function (acc, item, index) {
       var list = item.parentElement.nodeName === 'LI' && item.parentElement;
@@ -225,3 +232,8 @@ var show = item.textContent.toLowerCase().indexOf(input.value.toLowerCase()) !== -1;
       return show ? acc.concat(item) : acc
-    }, []).forEach(setupItem);
+    }, []).forEach(function () {
+      var args = [], len = arguments.length;
+      while ( len-- ) args[ len ] = arguments[ len ];
+
+      return setupItem.apply(void 0, [ limit ].concat( args ));
+    });
   }
@@ -239,6 +251,7 @@ }
 
-function setupItem (item, index, items) {
+function setupItem (limit, item, index, items) {
   item.setAttribute('aria-label', ((item.textContent.trim()) + ", " + (index + 1) + " av " + (items.length)));
   item.setAttribute('tabindex', '-1');
   item.setAttribute('type', 'button');
+  if (index >= limit) { item.parentElement.setAttribute('hidden', ''); }
 }
@@ -283,3 +296,3 @@
   var staticAccessors = { defaultProps: { configurable: true } };
-  staticAccessors.defaultProps.get = function () { return { open: null, ajax: null, onAjax: null, onAjaxBeforeSend: null, onFilter: null, onSelect: null } };
+  staticAccessors.defaultProps.get = function () { return { open: null, limit: null, ajax: null, onAjax: null, onAjaxBeforeSend: null, onFilter: null, onSelect: null } };
 
@@ -331,2 +344,3 @@ Input.prototype.componentDidMount = function componentDidMount () { // Mount client side only to avoid rerender
   open: PropTypes.bool,
+  limit: PropTypes.number,
   ajax: PropTypes.oneOfType([
@@ -333,0 +347,0 @@ PropTypes.string,

package.json

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

readme.md

@@ -61,3 +61,3 @@ # Core Input
 
-Typing toggles the [hidden attribute](https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden) on items of type `<button>` and `<a>`, based on matching [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). Focusing the input unhides the following element. The default filtering behavior can easily be altered through the The default filtering behavior can easily be altered through the `'input.select'`, `'input.filter'`, `'input.ajax'` and  `'input.ajax.beforeSend'` [events](#events). 
+Typing toggles the [hidden attribute](https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden) on items of type `<button>` and `<a>`, based on matching [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). Focusing the input unhides the following element. The default filtering behavior can easily be altered through the The default filtering behavior can easily be altered through the `'input.select'`, `'input.filter'`, `'input.ajax'` and  `'input.ajax.beforeSend'` [events](#events).
 
@@ -81,11 +81,18 @@ Results will be rendered in the element directly after the `<input>`.
 
-coreInput(String|Element|Elements, {    // Accepts a selector string, NodeList, Element or array of Elements
-  open: Boolean,                        // Optional. Defaults to value of aria-expanded. Use to force open state
-  content: String,                      // Optional. Set String of HTML content. HTML is used for full flexibility on markup
-  ajax: String                          // Optional. Fetch external data, example: "https://search.com?q={{value}}"
+coreInput(                              // Initializes input element
+  String|Element|Elements,              // Accepts a selector string, NodeList, Element or array of Elements
+  String|Object {                       // Optional. String sets content HTML, object sets options
+    open: Boolean,                      // Use to force open state. Defaults to value of aria-expanded.
+    content: String,                    // Sets content HTML. HTML is used for full flexibility on markup
+    limit: Number,                      // Sets the maximum number of visible items in list. Doesn't affect actual number of items
+    ajax: String                        // Fetches external data. See event 'input.ajax'. Example: 'https://search.com?q={{value}}'
+  }
 })
 
-// Passing a string as second argument sets the 'content' option
-coreInput('.my-input', '<li><a href="?q=' + coreInput.escapeHTML(input.value) + '">More results</a></li>') // escape html
-coreInput('.my-input', '<li><button>' + coreInput.highlight(item.text, input.value) + '</button></li>') // highlight match
+// Example initialize and limit items to 5
+coreInput('.my-input', { limit: 5 })
+// Example setting HTML content and escaping items
+coreInput('.my-input', '<li><a href="?q=' + coreInput.escapeHTML(input.value) + '">More results</a></li>')
+// Example setting HTML content and highlighting matched items
+coreInput('.my-input', '<li><button>' + coreInput.highlight(item.text, input.value) + '</button></li>')
 ```
@@ -102,3 +109,9 @@
 
-<CoreInput open={false} onFilter={(event) => {}} onSelect={(event) => {}} onAjax={(event) => {}} onAjaxBeforeSend={(event) => {}} ajax="https://search.com?q={{value}}">
+<CoreInput open={Boolean}                // Use to force open state. Defaults to value of aria-expanded.
+           limit={Number}                // Limit the maximum number of results in list.
+           ajax={String|Object}          // Fetches external data. See event 'input.ajax'. Example: 'https://search.com?q={{value}}'
+           onFilter={Function}           // See 'input.filter' event
+           onSelect={Function}           // See 'input.select' event
+           onAjax={Function}             // See 'input.ajax' event
+           onAjaxBeforeSend={Function}>  // See 'input.ajax.beforeSend' event
   <input type="text" />   // First element must result in a input-tag. Accepts both elements and components
@@ -105,0 +118,0 @@ <ul>                    // Next element will be used for items. Accepts both elements and components

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

140273

increased by24.04%

Number of package files

14

increased by7.69%

Lines of code

917

increased by5.28%

Number of lines in readme file

426

increased by3.15%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes