use-drop - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/index.es.js

@@ -1,2 +0,2 @@
-import e from"react";var t=10,n="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);function o(t,n){"function"==typeof HTMLElement.prototype.scroll&&e.useEffect(function(){var e,o,r,i,u,c,a,l,s,f;t&&n&&(o=n,i=(r=(e=t).getBoundingClientRect()).top,u=r.bottom,c=e.scrollTop,l=(a=o.getBoundingClientRect()).top,((f=(s=a.bottom)<=i)||l+(s-l)>u)&&e.scroll(0,c+(f?i-l:s-u)*(f?-1:1)))},[t,n])}function r(n){var o=n.value;void 0===o&&(o="");var r=n.items,i=n.multiple,u=n.placeholder;void 0===u&&(u="");var c=n.onUpdate,a=e.useMemo(function(){return(t++).toString(36)},[]),l=[],s=[].concat(o).filter(Boolean),f=e.useRef(null),d=e.useRef(null),v=e.useRef(!1),m=e.useRef(""),p=e.useState(!1),g=p[0],b=p[1],h=e.useState(s[0]),E=h[0],L=h[1],x=e.useState([]),k=x[0],y=x[1],A="data-"+a+"-option-value",O="data-"+a+"-option-label",C=e.useCallback(function(e){c&&c(i?s.indexOf(e)>-1?s.filter(function(t){return t!==e}):s.concat(e):e)},[s,i,c]),R=e.useMemo(function(){return r.map(function(e){function t(e,t){var n;void 0===t&&(t={});var o=t.isGroupDisabled;s.indexOf(e.value)>-1&&l.push(e.label);var r=e.disabled||o;return Object.assign({},e,{selected:s.indexOf(e.value)>-1,highlighted:E===e.value,itemProps:r?{}:(n={},n[A]=e.value,n[O]=e.label,n.onClick=function(){C(e.value),L(e.value),i||b(!1)},n)})}return e.items?Object.assign({},e,{items:e.items.map(function(n){return t(n,{isGroupDisabled:e.disabled})})}):t(e)})},[r,s,E]),w=i?l.length?l:[u]:l[0]||u,P=e.useMemo(function(){return k.filter(function(e){return e.getAttribute(A)===E})[0]},[k,E]);return e.useLayoutEffect(function(){var e=[].slice.call(document.querySelectorAll("["+A+"]"));e.length&&y(e)},[g]),e.useEffect(function(){function e(){v.current=!0}function t(){v.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",t),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",t)}},[]),e.useEffect(function(){function e(e){var t=e.key,n=e.keyCode,r=f.current;if(r){var u=38===n,c=40===n,a=13===n,l=32===n,s=27===n;if(document.activeElement===r&&(g||!u&&!c||b(!0),l&&b(!g)),g)if(u||c){e.preventDefault();var d=k.length-1,v=k.indexOf(P),p=u?v-1:v+1;L(k[p>d?0:p<0?d:p].getAttribute(A))}else if(a&&g)i||b(!1),C(P.getAttribute(A));else if(s)b(!1);else if(n>=65&&n<=90||n>=48&&n<=57){var h=m.current+t,E=k.filter(function(e){return e.getAttribute(O).toLowerCase().indexOf(h)>-1})[0];m.current=h,L(E?E.getAttribute(A):o)}else m.current=""}}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[g,f,C]),e.useEffect(function(){function e(e){var t=d.current,n=f.current;t&&n&&e.target!==t&&e.target!==n&&!t.contains(e.target)&&!n.contains(e.target)&&b(!1)}return g&&document.addEventListener("click",e),function(){document.removeEventListener("click",e)}},[g,d]),{id:a,isOpen:g,label:w,items:R,controlProps:{ref:f,id:a,role:"combobox","aria-label":i?w.join(", ")+", ":w,"aria-controls":"drop-"+a,"aria-haspopup":"listbox","aria-expanded":g,onBlur:function(){v.current||b(!1)},onClick:function(e){e.clientX+e.clientY>0&&b(!g)}},dropProps:{ref:d,id:"drop-"+a,role:"listbox"},__meta:{filter:m.current,options:k,highlightedValue:E,highlightedNode:P}}}export{n as useNative,o as useScroll,r as useDrop};
+import{useMemo as e,useRef as n,useState as t,useCallback as o,useEffect as r}from"react";var i=10;function u(u){var c=u.items,l=u.onSelect,s=u.onOpen,a=u.onDismiss,f=e(function(){return(i++).toString(36)},[]),d=n(null),p=n(null),v=n(!1),m=t(!1),g=m[0],O=m[1],b=t(0),h=b[0],S=b[1],k=Math.min(h,c.length-1),y=o(function(e){O(e),e&&s&&s(),!e&&a&&a()},[O]),C=o(function(e){S(Math.min(e,k))},[k]),j=e(function(){return c.map(function(e,n){return Object.assign({},e,{selected:!1,highlighted:k===n,getItemProps:function(t){return void 0===t&&(t={}),Object.assign({},t,{onClick:function(o){e.disabled||(l&&l(e),t.onClick&&t.onClick(o),S(n<c.length?n:0))}})}})})},[c,l,k,S]);return r(function(){function e(e){var n=e.keyCode,t=d.current;if(t){var o=38===n,r=40===n,i=13===n,u=32===n,s=27===n;if(document.activeElement===t&&(g||!o&&!r||y(!0),u&&y(!g)),(o||r)&&e.preventDefault(),g){var a=c.length-1,f=o?h-1:h+1;o||r?S(f>a?0:f<0?a:f):i&&g?l&&l(c[k]):s&&y(!1)}}}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[h,c,g,d,l]),r(function(){function e(e){var n=p.current,t=d.current;n&&t&&e.target!==n&&e.target!==t&&!n.contains(e.target)&&!t.contains(e.target)&&y(!1)}return g&&document.addEventListener("click",e),function(){document.removeEventListener("click",e)}},[g,p]),r(function(){function e(){v.current=!0}function n(){v.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",n),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",n)}},[]),{id:f,isOpen:g,isOpenSet:y,items:j,highlightedIndexSet:C,getControlProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:d,id:f,role:"listbox","aria-controls":"drop-"+f,"aria-haspopup":"listbox","aria-expanded":g,onBlur:function(){v.current||y(!1)},onClick:function(e){e.clientX+e.clientY>0&&y(!g)}})},getDropProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:p,id:"drop-"+f,role:"listbox"})}}}function c(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===n.indexOf(o)&&(t[o]=e[o]);return t}function l(e){var o=e.items,i=e.multiple;void 0===i&&(i=!1);var l=e.onSelect,s=e.onRemove,a=c(e,["items","multiple","onSelect","onRemove"]),f=n(""),d=t(o.filter(function(e){return e.selected})),p=d[0],v=d[1],m=u(Object.assign({},a,{items:o,onSelect:function(e){Boolean(p.filter(function(n){return n.value===e.value})[0])?(v(i?p.filter(function(n){return n.value!==e.value}):[]),s&&s(e)):(v(i?p.concat(e):[e]),l&&l(e)),i||O(!1)}})),g=m.isOpen,O=m.isOpenSet,b=m.items,h=m.highlightedIndexSet,S=c(m,["isOpen","isOpenSet","items","highlightedIndexSet"]);return r(function(){function e(e){var n=e.keyCode;if(n>=65&&n<=90||n>=48&&n<=57){f.current=f.current+e.key;for(var t=0;t<o.length;t++)if(o[t].label.toLowerCase().indexOf(f.current)>-1){h(t);break}}else f.current=""}return g&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[g,o,f]),Object.assign({},S,{isOpen:g,isOpenSet:O,items:b.map(function(e){return Object.assign({},e,{selected:Boolean(p.filter(function(n){return n.value===e.value})[0])})}),clear:function(){v([])}})}function s(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===n.indexOf(o)&&(t[o]=e[o]);return t}function a(e){var n=e.items,o=e.multiple;void 0===o&&(o=!1);var r=e.onSelect,i=e.onRemove,c=s(e,["items","multiple","onSelect","onRemove"]),l=t(n.filter(function(e){return e.selected})),a=l[0],f=l[1],d=u(Object.assign({},c,{items:n,onSelect:function(e){Boolean(a.filter(function(n){return n.value===e.value})[0])?(f(o?a.filter(function(n){return n.value!==e.value}):[]),i&&i(e)):(f(o?a.concat(e):[e]),r&&r(e))}})),p=d.isOpen,v=d.isOpenSet,m=d.items,g=d.getControlProps,O=d.getDropProps,b=s(d,["isOpen","isOpenSet","items","getControlProps","getDropProps"]);return Object.assign({},b,{isOpen:p,isOpenSet:v,items:m.map(function(e){return Object.assign({},e,{selected:Boolean(a.filter(function(n){return n.value===e.value})[0])})}),getInputProps:function(e){var n=e.onBlur,t=s(e,["onBlur"]),o=g();return Object.assign({},o,t,{role:"combobox",onKeyUp:function(e){var n=e.target;27!==e.keyCode?13!==e.keyCode&&n.value&&Boolean(m.length)&&!p&&v(!0):n.blur()},onBlur:function(e){o.onBlur&&o.onBlur(e),n&&n(e)},onClick:function(){}})},getDropProps:function(e){return Object.assign({},O(e),{role:"listbox"})},clear:function(){f([])}})}function f(e,n){"function"==typeof HTMLElement.prototype.scroll&&r(function(){var t,o,r,i,u,c,l,s,a,f;e&&n&&(o=n,i=(r=(t=e).getBoundingClientRect()).top,u=r.bottom,c=t.scrollTop,s=(l=o.getBoundingClientRect()).top,((f=(a=l.bottom)<=i)||s+(a-s)>u)&&t.scroll(0,c+(f?i-s:a-u)*(f?-1:1)))},[e,n])}var d="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);export{d as useNative,u as useDrop,l as useSelect,a as useCombobox,f as useScroll};
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -1,2 +0,2 @@
-var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,n=10,o="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);exports.useNative=o,exports.useScroll=function(e,n){"function"==typeof HTMLElement.prototype.scroll&&t.useEffect(function(){var t,o,r,i,u,c,a,l,s,f;e&&n&&(o=n,i=(r=(t=e).getBoundingClientRect()).top,u=r.bottom,c=t.scrollTop,l=(a=o.getBoundingClientRect()).top,((f=(s=a.bottom)<=i)||l+(s-l)>u)&&t.scroll(0,c+(f?i-l:s-u)*(f?-1:1)))},[e,n])},exports.useDrop=function(e){var o=e.value;void 0===o&&(o="");var r=e.items,i=e.multiple,u=e.placeholder;void 0===u&&(u="");var c=e.onUpdate,a=t.useMemo(function(){return(n++).toString(36)},[]),l=[],s=[].concat(o).filter(Boolean),f=t.useRef(null),d=t.useRef(null),v=t.useRef(!1),p=t.useRef(""),m=t.useState(!1),g=m[0],b=m[1],h=t.useState(s[0]),E=h[0],x=h[1],L=t.useState([]),y=L[0],k=L[1],A="data-"+a+"-option-value",O="data-"+a+"-option-label",C=t.useCallback(function(e){c&&c(i?s.indexOf(e)>-1?s.filter(function(t){return t!==e}):s.concat(e):e)},[s,i,c]),R=t.useMemo(function(){return r.map(function(e){function t(e,t){var n;void 0===t&&(t={});var o=t.isGroupDisabled;s.indexOf(e.value)>-1&&l.push(e.label);var r=e.disabled||o;return Object.assign({},e,{selected:s.indexOf(e.value)>-1,highlighted:E===e.value,itemProps:r?{}:(n={},n[A]=e.value,n[O]=e.label,n.onClick=function(){C(e.value),x(e.value),i||b(!1)},n)})}return e.items?Object.assign({},e,{items:e.items.map(function(n){return t(n,{isGroupDisabled:e.disabled})})}):t(e)})},[r,s,E]),S=i?l.length?l:[u]:l[0]||u,w=t.useMemo(function(){return y.filter(function(e){return e.getAttribute(A)===E})[0]},[y,E]);return t.useLayoutEffect(function(){var e=[].slice.call(document.querySelectorAll("["+A+"]"));e.length&&k(e)},[g]),t.useEffect(function(){function e(){v.current=!0}function t(){v.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",t),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",t)}},[]),t.useEffect(function(){function e(e){var t=e.key,n=e.keyCode,r=f.current;if(r){var u=38===n,c=40===n,a=13===n,l=32===n,s=27===n;if(document.activeElement===r&&(g||!u&&!c||b(!0),l&&b(!g)),g)if(u||c){e.preventDefault();var d=y.length-1,v=y.indexOf(w),m=u?v-1:v+1;x(y[m>d?0:m<0?d:m].getAttribute(A))}else if(a&&g)i||b(!1),C(w.getAttribute(A));else if(s)b(!1);else if(n>=65&&n<=90||n>=48&&n<=57){var h=p.current+t,E=y.filter(function(e){return e.getAttribute(O).toLowerCase().indexOf(h)>-1})[0];p.current=h,x(E?E.getAttribute(A):o)}else p.current=""}}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[g,f,C]),t.useEffect(function(){function e(e){var t=d.current,n=f.current;t&&n&&e.target!==t&&e.target!==n&&!t.contains(e.target)&&!n.contains(e.target)&&b(!1)}return g&&document.addEventListener("click",e),function(){document.removeEventListener("click",e)}},[g,d]),{id:a,isOpen:g,label:S,items:R,controlProps:{ref:f,id:a,role:"combobox","aria-label":i?S.join(", ")+", ":S,"aria-controls":"drop-"+a,"aria-haspopup":"listbox","aria-expanded":g,onBlur:function(){v.current||b(!1)},onClick:function(e){e.clientX+e.clientY>0&&b(!g)}},dropProps:{ref:d,id:"drop-"+a,role:"listbox"},__meta:{filter:p.current,options:y,highlightedValue:E,highlightedNode:w}}};
+var e=require("react"),n=10;function t(t){var o=t.items,r=t.onSelect,i=t.onOpen,u=t.onDismiss,c=e.useMemo(function(){return(n++).toString(36)},[]),s=e.useRef(null),l=e.useRef(null),a=e.useRef(!1),f=e.useState(!1),d=f[0],p=f[1],v=e.useState(0),m=v[0],g=v[1],O=Math.min(m,o.length-1),b=e.useCallback(function(e){p(e),e&&i&&i(),!e&&u&&u()},[p]),S=e.useCallback(function(e){g(Math.min(e,O))},[O]),h=e.useMemo(function(){return o.map(function(e,n){return Object.assign({},e,{selected:!1,highlighted:O===n,getItemProps:function(t){return void 0===t&&(t={}),Object.assign({},t,{onClick:function(i){e.disabled||(r&&r(e),t.onClick&&t.onClick(i),g(n<o.length?n:0))}})}})})},[o,r,O,g]);return e.useEffect(function(){function e(e){var n=e.keyCode,t=s.current;if(t){var i=38===n,u=40===n,c=13===n,l=32===n,a=27===n;if(document.activeElement===t&&(d||!i&&!u||b(!0),l&&b(!d)),(i||u)&&e.preventDefault(),d){var f=o.length-1,p=i?m-1:m+1;i||u?g(p>f?0:p<0?f:p):c&&d?r&&r(o[O]):a&&b(!1)}}}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[m,o,d,s,r]),e.useEffect(function(){function e(e){var n=l.current,t=s.current;n&&t&&e.target!==n&&e.target!==t&&!n.contains(e.target)&&!t.contains(e.target)&&b(!1)}return d&&document.addEventListener("click",e),function(){document.removeEventListener("click",e)}},[d,l]),e.useEffect(function(){function e(){a.current=!0}function n(){a.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",n),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",n)}},[]),{id:c,isOpen:d,isOpenSet:b,items:h,highlightedIndexSet:S,getControlProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:s,id:c,role:"listbox","aria-controls":"drop-"+c,"aria-haspopup":"listbox","aria-expanded":d,onBlur:function(){a.current||b(!1)},onClick:function(e){e.clientX+e.clientY>0&&b(!d)}})},getDropProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:l,id:"drop-"+c,role:"listbox"})}}}function o(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===n.indexOf(o)&&(t[o]=e[o]);return t}function r(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===n.indexOf(o)&&(t[o]=e[o]);return t}var i="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);exports.useNative=i,exports.useDrop=t,exports.useSelect=function(n){var r=n.items,i=n.multiple;void 0===i&&(i=!1);var u=n.onSelect,c=n.onRemove,s=o(n,["items","multiple","onSelect","onRemove"]),l=e.useRef(""),a=e.useState(r.filter(function(e){return e.selected})),f=a[0],d=a[1],p=t(Object.assign({},s,{items:r,onSelect:function(e){Boolean(f.filter(function(n){return n.value===e.value})[0])?(d(i?f.filter(function(n){return n.value!==e.value}):[]),c&&c(e)):(d(i?f.concat(e):[e]),u&&u(e)),i||m(!1)}})),v=p.isOpen,m=p.isOpenSet,g=p.items,O=p.highlightedIndexSet,b=o(p,["isOpen","isOpenSet","items","highlightedIndexSet"]);return e.useEffect(function(){function e(e){var n=e.keyCode;if(n>=65&&n<=90||n>=48&&n<=57){l.current=l.current+e.key;for(var t=0;t<r.length;t++)if(r[t].label.toLowerCase().indexOf(l.current)>-1){O(t);break}}else l.current=""}return v&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[v,r,l]),Object.assign({},b,{isOpen:v,isOpenSet:m,items:g.map(function(e){return Object.assign({},e,{selected:Boolean(f.filter(function(n){return n.value===e.value})[0])})}),clear:function(){d([])}})},exports.useCombobox=function(n){var o=n.items,i=n.multiple;void 0===i&&(i=!1);var u=n.onSelect,c=n.onRemove,s=r(n,["items","multiple","onSelect","onRemove"]),l=e.useState(o.filter(function(e){return e.selected})),a=l[0],f=l[1],d=t(Object.assign({},s,{items:o,onSelect:function(e){Boolean(a.filter(function(n){return n.value===e.value})[0])?(f(i?a.filter(function(n){return n.value!==e.value}):[]),c&&c(e)):(f(i?a.concat(e):[e]),u&&u(e))}})),p=d.isOpen,v=d.isOpenSet,m=d.items,g=d.getControlProps,O=d.getDropProps,b=r(d,["isOpen","isOpenSet","items","getControlProps","getDropProps"]);return Object.assign({},b,{isOpen:p,isOpenSet:v,items:m.map(function(e){return Object.assign({},e,{selected:Boolean(a.filter(function(n){return n.value===e.value})[0])})}),getInputProps:function(e){var n=e.onBlur,t=r(e,["onBlur"]),o=g();return Object.assign({},o,t,{role:"combobox",onKeyUp:function(e){var n=e.target;27!==e.keyCode?13!==e.keyCode&&n.value&&Boolean(m.length)&&!p&&v(!0):n.blur()},onBlur:function(e){o.onBlur&&o.onBlur(e),n&&n(e)},onClick:function(){}})},getDropProps:function(e){return Object.assign({},O(e),{role:"listbox"})},clear:function(){f([])}})},exports.useScroll=function(n,t){"function"==typeof HTMLElement.prototype.scroll&&e.useEffect(function(){var e,o,r,i,u,c,s,l,a,f;n&&t&&(o=t,i=(r=(e=n).getBoundingClientRect()).top,u=r.bottom,c=e.scrollTop,l=(s=o.getBoundingClientRect()).top,((f=(a=s.bottom)<=i)||l+(a-l)>u)&&e.scroll(0,c+(f?i-l:a-u)*(f?-1:1)))},[n,t])};
 //# sourceMappingURL=index.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t(e.useDrop={},e.react)}(this,function(e,t){t=t&&t.hasOwnProperty("default")?t.default:t;var n=10,o="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);e.useNative=o,e.useScroll=function(e,n){"function"==typeof HTMLElement.prototype.scroll&&t.useEffect(function(){var t,o,r,i,u,c,a,l,f,s;e&&n&&(o=n,i=(r=(t=e).getBoundingClientRect()).top,u=r.bottom,c=t.scrollTop,l=(a=o.getBoundingClientRect()).top,((s=(f=a.bottom)<=i)||l+(f-l)>u)&&t.scroll(0,c+(s?i-l:f-u)*(s?-1:1)))},[e,n])},e.useDrop=function(e){var o=e.value;void 0===o&&(o="");var r=e.items,i=e.multiple,u=e.placeholder;void 0===u&&(u="");var c=e.onUpdate,a=t.useMemo(function(){return(n++).toString(36)},[]),l=[],f=[].concat(o).filter(Boolean),s=t.useRef(null),d=t.useRef(null),v=t.useRef(!1),p=t.useRef(""),m=t.useState(!1),g=m[0],b=m[1],h=t.useState(f[0]),E=h[0],y=h[1],x=t.useState([]),L=x[0],k=x[1],O="data-"+a+"-option-value",A="data-"+a+"-option-label",C=t.useCallback(function(e){c&&c(i?f.indexOf(e)>-1?f.filter(function(t){return t!==e}):f.concat(e):e)},[f,i,c]),w=t.useMemo(function(){return r.map(function(e){function t(e,t){var n;void 0===t&&(t={});var o=t.isGroupDisabled;f.indexOf(e.value)>-1&&l.push(e.label);var r=e.disabled||o;return Object.assign({},e,{selected:f.indexOf(e.value)>-1,highlighted:E===e.value,itemProps:r?{}:(n={},n[O]=e.value,n[A]=e.label,n.onClick=function(){C(e.value),y(e.value),i||b(!1)},n)})}return e.items?Object.assign({},e,{items:e.items.map(function(n){return t(n,{isGroupDisabled:e.disabled})})}):t(e)})},[r,f,E]),P=i?l.length?l:[u]:l[0]||u,R=t.useMemo(function(){return L.filter(function(e){return e.getAttribute(O)===E})[0]},[L,E]);return t.useLayoutEffect(function(){var e=[].slice.call(document.querySelectorAll("["+O+"]"));e.length&&k(e)},[g]),t.useEffect(function(){function e(){v.current=!0}function t(){v.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",t),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",t)}},[]),t.useEffect(function(){function e(e){var t=e.key,n=e.keyCode,r=s.current;if(r){var u=38===n,c=40===n,a=13===n,l=32===n,f=27===n;if(document.activeElement===r&&(g||!u&&!c||b(!0),l&&b(!g)),g)if(u||c){e.preventDefault();var d=L.length-1,v=L.indexOf(R),m=u?v-1:v+1;y(L[m>d?0:m<0?d:m].getAttribute(O))}else if(a&&g)i||b(!1),C(R.getAttribute(O));else if(f)b(!1);else if(n>=65&&n<=90||n>=48&&n<=57){var h=p.current+t,E=L.filter(function(e){return e.getAttribute(A).toLowerCase().indexOf(h)>-1})[0];p.current=h,y(E?E.getAttribute(O):o)}else p.current=""}}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[g,s,C]),t.useEffect(function(){function e(e){var t=d.current,n=s.current;t&&n&&e.target!==t&&e.target!==n&&!t.contains(e.target)&&!n.contains(e.target)&&b(!1)}return g&&document.addEventListener("click",e),function(){document.removeEventListener("click",e)}},[g,d]),{id:a,isOpen:g,label:P,items:w,controlProps:{ref:s,id:a,role:"combobox","aria-label":i?P.join(", ")+", ":P,"aria-controls":"drop-"+a,"aria-haspopup":"listbox","aria-expanded":g,onBlur:function(){v.current||b(!1)},onClick:function(e){e.clientX+e.clientY>0&&b(!g)}},dropProps:{ref:d,id:"drop-"+a,role:"listbox"},__meta:{filter:p.current,options:L,highlightedValue:E,highlightedNode:R}}}});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n(e.useDrop={},e.react)}(this,function(e,n){var t=10;function o(e){var o=e.items,r=e.onSelect,i=e.onOpen,u=e.onDismiss,c=n.useMemo(function(){return(t++).toString(36)},[]),s=n.useRef(null),l=n.useRef(null),a=n.useRef(!1),f=n.useState(!1),d=f[0],p=f[1],v=n.useState(0),m=v[0],g=v[1],O=Math.min(m,o.length-1),b=n.useCallback(function(e){p(e),e&&i&&i(),!e&&u&&u()},[p]),h=n.useCallback(function(e){g(Math.min(e,O))},[O]),S=n.useMemo(function(){return o.map(function(e,n){return Object.assign({},e,{selected:!1,highlighted:O===n,getItemProps:function(t){return void 0===t&&(t={}),Object.assign({},t,{onClick:function(i){e.disabled||(r&&r(e),t.onClick&&t.onClick(i),g(n<o.length?n:0))}})}})})},[o,r,O,g]);return n.useEffect(function(){function e(e){var n=e.keyCode,t=s.current;if(t){var i=38===n,u=40===n,c=13===n,l=32===n,a=27===n;if(document.activeElement===t&&(d||!i&&!u||b(!0),l&&b(!d)),(i||u)&&e.preventDefault(),d){var f=o.length-1,p=i?m-1:m+1;i||u?g(p>f?0:p<0?f:p):c&&d?r&&r(o[O]):a&&b(!1)}}}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[m,o,d,s,r]),n.useEffect(function(){function e(e){var n=l.current,t=s.current;n&&t&&e.target!==n&&e.target!==t&&!n.contains(e.target)&&!t.contains(e.target)&&b(!1)}return d&&document.addEventListener("click",e),function(){document.removeEventListener("click",e)}},[d,l]),n.useEffect(function(){function e(){a.current=!0}function n(){a.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",n),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",n)}},[]),{id:c,isOpen:d,isOpenSet:b,items:S,highlightedIndexSet:h,getControlProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:s,id:c,role:"listbox","aria-controls":"drop-"+c,"aria-haspopup":"listbox","aria-expanded":d,onBlur:function(){a.current||b(!1)},onClick:function(e){e.clientX+e.clientY>0&&b(!d)}})},getDropProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:l,id:"drop-"+c,role:"listbox"})}}}function r(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===n.indexOf(o)&&(t[o]=e[o]);return t}function i(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===n.indexOf(o)&&(t[o]=e[o]);return t}var u="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);e.useNative=u,e.useDrop=o,e.useSelect=function(e){var t=e.items,i=e.multiple;void 0===i&&(i=!1);var u=e.onSelect,c=e.onRemove,s=r(e,["items","multiple","onSelect","onRemove"]),l=n.useRef(""),a=n.useState(t.filter(function(e){return e.selected})),f=a[0],d=a[1],p=o(Object.assign({},s,{items:t,onSelect:function(e){Boolean(f.filter(function(n){return n.value===e.value})[0])?(d(i?f.filter(function(n){return n.value!==e.value}):[]),c&&c(e)):(d(i?f.concat(e):[e]),u&&u(e)),i||m(!1)}})),v=p.isOpen,m=p.isOpenSet,g=p.items,O=p.highlightedIndexSet,b=r(p,["isOpen","isOpenSet","items","highlightedIndexSet"]);return n.useEffect(function(){function e(e){var n=e.keyCode;if(n>=65&&n<=90||n>=48&&n<=57){l.current=l.current+e.key;for(var o=0;o<t.length;o++)if(t[o].label.toLowerCase().indexOf(l.current)>-1){O(o);break}}else l.current=""}return v&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[v,t,l]),Object.assign({},b,{isOpen:v,isOpenSet:m,items:g.map(function(e){return Object.assign({},e,{selected:Boolean(f.filter(function(n){return n.value===e.value})[0])})}),clear:function(){d([])}})},e.useCombobox=function(e){var t=e.items,r=e.multiple;void 0===r&&(r=!1);var u=e.onSelect,c=e.onRemove,s=i(e,["items","multiple","onSelect","onRemove"]),l=n.useState(t.filter(function(e){return e.selected})),a=l[0],f=l[1],d=o(Object.assign({},s,{items:t,onSelect:function(e){Boolean(a.filter(function(n){return n.value===e.value})[0])?(f(r?a.filter(function(n){return n.value!==e.value}):[]),c&&c(e)):(f(r?a.concat(e):[e]),u&&u(e))}})),p=d.isOpen,v=d.isOpenSet,m=d.items,g=d.getControlProps,O=d.getDropProps,b=i(d,["isOpen","isOpenSet","items","getControlProps","getDropProps"]);return Object.assign({},b,{isOpen:p,isOpenSet:v,items:m.map(function(e){return Object.assign({},e,{selected:Boolean(a.filter(function(n){return n.value===e.value})[0])})}),getInputProps:function(e){var n=e.onBlur,t=i(e,["onBlur"]),o=g();return Object.assign({},o,t,{role:"combobox",onKeyUp:function(e){var n=e.target;27!==e.keyCode?13!==e.keyCode&&n.value&&Boolean(m.length)&&!p&&v(!0):n.blur()},onBlur:function(e){o.onBlur&&o.onBlur(e),n&&n(e)},onClick:function(){}})},getDropProps:function(e){return Object.assign({},O(e),{role:"listbox"})},clear:function(){f([])}})},e.useScroll=function(e,t){"function"==typeof HTMLElement.prototype.scroll&&n.useEffect(function(){var n,o,r,i,u,c,s,l,a,f;e&&t&&(o=t,i=(r=(n=e).getBoundingClientRect()).top,u=r.bottom,c=n.scrollTop,l=(s=o.getBoundingClientRect()).top,((f=(a=s.bottom)<=i)||l+(a-l)>u)&&n.scroll(0,c+(f?i-l:a-u)*(f?-1:1)))},[e,t])}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "use-drop",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A minimalist approach to custom dropdowns.",
-  "source": "index.js",
+  "source": "index.ts",
   "main": "dist/index.js",
@@ -29,2 +29,3 @@ "module": "dist/index.es.js",
   "devDependencies": {
+    "@types/react": "^16.9.35",
     "ava": "^2.4.0",
@@ -31,0 +32,0 @@ "microbundle": "^0.11.0",

README.md

 # use-drop ![npm](https://img.shields.io/npm/v/use-drop) [![](https://badgen.net/bundlephobia/minzip/use-drop)](https://bundlephobia.com/result?p=use-drop)
 
-A minimalist approach to custom dropdowns.
+A minimalist approach to custom dropdowns and autocompletes.
 
@@ -8,2 +8,3 @@ ### Features
 - bring your own markup
+- no magic
 - full a11y support
@@ -22,11 +23,17 @@ - supports multi-select
 ```javascript
-import { useDrop } from "use-drop";
+import React from "react";
+const cx from "classnames";
 
+import { useSelect } from "use-drop";
+
 function Dropdown() {
-  const [value, setValue] = React.useState();
+  const [label, lableSet] = React.useState("Please select");
 
-  const { label, items, isOpen, controlProps, dropProps } = useDropdown({
-    value,
-    placeholder: "Please select",
-    multiple: true,
+  const {
+    id,
+    items,
+    isOpen,
+    getControlProps,
+    getDropProps,
+  } = useSelect({
     items: [
@@ -40,5 +47,8 @@ { value: "san-francisco", label: "San Francisco" },
     ],
-    onUpdate(value) {
-      setValue(value);
-    }
+    onSelect(item) {
+      labelSet(item.label); // set to active item
+    },
+    onRemove() {
+      labelSet("Please select"); // reset to placeholder
+    },
   });
@@ -48,14 +58,18 @@
     <>
-      <button {...controlProps}>{label}</button>
+      <label htmlFor={id}>Cities</label>
+      <button id={id} controlProps={getControlProps()}>{label}</button>
 
       {isOpen && (
-        <ul {...dropProps}>
-          {items.map(({
-            value,
-            label,
-            selected,
-            highlighted,
-            itemProps,
-          }) => (
-            <li key={label} {...itemProps}>{label}</li>
+        <ul {...getDropProps()}>
+          {items.map(i => (
+            <li
+              key={i.value}
+              className={cx({
+                'is-selected': i.selected,
+                'is-highlighted': i.highlighted,
+              })}
+              {...i.getItemProps()}
+            >
+              {i.label}
+            </li>
           ))}
@@ -62,0 +76,0 @@ </ul>

No alert changes

Improved metrics

Total package byte prevSize

68724

increased by37.02%

Number of package files

14

increased by75%

Lines of code

133

increased by209.3%

Number of lines in readme file

82

increased by20.59%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes