use-drop - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/index.es.js

@@ -1,2 +0,2 @@
-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};
+import{useMemo as e,useRef as n,useState as t,useCallback as o,useEffect as r,useLayoutEffect as i}from"react";var u=10;function c(i){var c=i.items,l=i.onSelect,s=i.onOpen,a=i.onDismiss,d=e(function(){return(u++).toString(36)},[]),f=n(null),v=n(null),p=n(!1),m=t(!1),g=m[0],O=m[1],b=t(0),h=b[0],y=b[1],S=Math.min(h,c.length-1),k=o(function(e){O(e),e&&s&&s(),!e&&a&&a()},[O]),B=o(function(e){y(Math.min(e,S))},[S]),C=e(function(){return c.map(function(e,n){var t=d+"-item-"+e.value;return Object.assign({},e,{id:t,selected:!1,highlighted:S===n,getItemProps:function(o){return void 0===o&&(o={}),Object.assign({},o,{id:t,onClick:function(t){e.disabled||(l&&l(e),o.onClick&&o.onClick(t),y(n<c.length?n:0))}})}})})},[c,l,S,y]);return r(function(){function e(e){var n=e.keyCode,t=f.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||k(!0),u&&k(!g)),g){var a=c.length-1,d=o?h-1:h+1;o||r?(e.preventDefault(),y(d>a?0:d<0?a:d)):i&&g?l&&l(c[S]):s&&k(!1)}}}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[h,c,g,f,l]),r(function(){function e(e){var n=v.current,t=f.current;n&&t&&e.target!==n&&e.target!==t&&!n.contains(e.target)&&!t.contains(e.target)&&k(!1)}return g&&document.addEventListener("click",e),function(){document.removeEventListener("click",e)}},[g,v]),r(function(){function e(){p.current=!0}function n(){p.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",n),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",n)}},[]),{id:d,isOpen:g,isOpenSet:k,items:C,highlightedIndex:h,highlightedIndexSet:B,getControlProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:f,id:d,role:"listbox","aria-controls":d+"-drop","aria-haspopup":"listbox","aria-expanded":g,onBlur:function(){p.current||k(!1)},onClick:function(e){e.clientX+e.clientY>0&&k(!g)}})},getDropProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:v,id:d+"-drop",role:"listbox"})}}}function l(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 s(e){var o=e.items,i=e.multiple;void 0===i&&(i=!1);var u=e.onSelect,s=e.onRemove,a=l(e,["items","multiple","onSelect","onRemove"]),d=n(""),f=t(o.filter(function(e){return e.selected})),v=f[0],p=f[1],m=c(Object.assign({},a,{items:o,onSelect:function(e){Boolean(v.filter(function(n){return n.value===e.value})[0])?(p(i?v.filter(function(n){return n.value!==e.value}):[]),s&&s(e)):(p(i?v.concat(e):[e]),u&&u(e)),i||O(!1)}})),g=m.isOpen,O=m.isOpenSet,b=m.items,h=m.highlightedIndexSet,y=l(m,["isOpen","isOpenSet","items","highlightedIndexSet"]);return r(function(){function e(e){var n=e.keyCode;if(n>=65&&n<=90||n>=48&&n<=57){d.current=d.current+e.key;for(var t=0;t<o.length;t++)if(o[t].label.toLowerCase().indexOf(d.current)>-1){h(t);break}}else d.current=""}return g&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}},[g,o,d]),Object.assign({},y,{isOpen:g,isOpenSet:O,items:b.map(function(e){return Object.assign({},e,{selected:Boolean(v.filter(function(n){return n.value===e.value})[0])})}),clear:function(){p([])}})}function a(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 d(e){var n=e.items,o=e.multiple;void 0===o&&(o=!1);var r=e.onSelect,i=e.onRemove,u=a(e,["items","multiple","onSelect","onRemove"]),l=t(n.filter(function(e){return e.selected})),s=l[0],d=l[1],f=c(Object.assign({},u,{items:n,onSelect:function(e){Boolean(s.filter(function(n){return n.value===e.value})[0])?(d(o?s.filter(function(n){return n.value!==e.value}):[]),i&&i(e)):(d(o?s.concat(e):[e]),r&&r(e))}})),v=f.isOpen,p=f.isOpenSet,m=f.items,g=f.getControlProps,O=f.getDropProps,b=a(f,["isOpen","isOpenSet","items","getControlProps","getDropProps"]);return Object.assign({},b,{isOpen:v,isOpenSet:p,items:m.map(function(e){return Object.assign({},e,{selected:Boolean(s.filter(function(n){return n.value===e.value})[0])})}),getInputProps:function(e){var n=e.onBlur,t=a(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)&&!v&&p(!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(){d([])}})}function f(e,n){"function"==typeof HTMLElement.prototype.scroll&&i(function(){var t=document.getElementById(e+"-drop"),o=document.getElementById(n.id);if(t&&o){var r=t.getBoundingClientRect(),i=r.top,u=r.bottom,c=t.scrollTop,l=o.getBoundingClientRect(),s=l.top,a=l.bottom,d=a<=i;(d||s+(a-s)>u)&&t.scroll(0,c+(d?i-s:a-u)*(d?-1:1))}},[e,n])}var v="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);export{v as useNative,c as useDrop,s as useSelect,d as useCombobox,f as useScroll};
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -1,2 +0,2 @@
-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])};
+var e=require("react"),t=10;function n(n){var o=n.items,r=n.onSelect,i=n.onOpen,u=n.onDismiss,c=e.useMemo(function(){return(t++).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]),h=e.useCallback(function(e){g(Math.min(e,O))},[O]),S=e.useMemo(function(){return o.map(function(e,t){var n=c+"-item-"+e.value;return Object.assign({},e,{id:n,selected:!1,highlighted:O===t,getItemProps:function(i){return void 0===i&&(i={}),Object.assign({},i,{id:n,onClick:function(n){e.disabled||(r&&r(e),i.onClick&&i.onClick(n),g(t<o.length?t:0))}})}})})},[o,r,O,g]);return e.useEffect(function(){function e(e){var t=e.keyCode,n=s.current;if(n){var i=38===t,u=40===t,c=13===t,l=32===t,a=27===t;if(document.activeElement===n&&(d||!i&&!u||b(!0),l&&b(!d)),d){var f=o.length-1,p=i?m-1:m+1;i||u?(e.preventDefault(),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 t=l.current,n=s.current;t&&n&&e.target!==t&&e.target!==n&&!t.contains(e.target)&&!n.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 t(){a.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",t),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",t)}},[]),{id:c,isOpen:d,isOpenSet:b,items:S,highlightedIndex:m,highlightedIndexSet:h,getControlProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:s,id:c,role:"listbox","aria-controls":c+"-drop","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:c+"-drop",role:"listbox"})}}}function o(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===t.indexOf(o)&&(n[o]=e[o]);return n}function r(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===t.indexOf(o)&&(n[o]=e[o]);return n}var i="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);exports.useNative=i,exports.useDrop=n,exports.useSelect=function(t){var r=t.items,i=t.multiple;void 0===i&&(i=!1);var u=t.onSelect,c=t.onRemove,s=o(t,["items","multiple","onSelect","onRemove"]),l=e.useRef(""),a=e.useState(r.filter(function(e){return e.selected})),f=a[0],d=a[1],p=n(Object.assign({},s,{items:r,onSelect:function(e){Boolean(f.filter(function(t){return t.value===e.value})[0])?(d(i?f.filter(function(t){return t.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 t=e.keyCode;if(t>=65&&t<=90||t>=48&&t<=57){l.current=l.current+e.key;for(var n=0;n<r.length;n++)if(r[n].label.toLowerCase().indexOf(l.current)>-1){O(n);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(t){return t.value===e.value})[0])})}),clear:function(){d([])}})},exports.useCombobox=function(t){var o=t.items,i=t.multiple;void 0===i&&(i=!1);var u=t.onSelect,c=t.onRemove,s=r(t,["items","multiple","onSelect","onRemove"]),l=e.useState(o.filter(function(e){return e.selected})),a=l[0],f=l[1],d=n(Object.assign({},s,{items:o,onSelect:function(e){Boolean(a.filter(function(t){return t.value===e.value})[0])?(f(i?a.filter(function(t){return t.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(t){return t.value===e.value})[0])})}),getInputProps:function(e){var t=e.onBlur,n=r(e,["onBlur"]),o=g();return Object.assign({},o,n,{role:"combobox",onKeyUp:function(e){var t=e.target;27!==e.keyCode?13!==e.keyCode&&t.value&&Boolean(m.length)&&!p&&v(!0):t.blur()},onBlur:function(e){o.onBlur&&o.onBlur(e),t&&t(e)},onClick:function(){}})},getDropProps:function(e){return Object.assign({},O(e),{role:"listbox"})},clear:function(){f([])}})},exports.useScroll=function(t,n){"function"==typeof HTMLElement.prototype.scroll&&e.useLayoutEffect(function(){var e=document.getElementById(t+"-drop"),o=document.getElementById(n.id);if(e&&o){var r=e.getBoundingClientRect(),i=r.top,u=r.bottom,c=e.scrollTop,s=o.getBoundingClientRect(),l=s.top,a=s.bottom,f=a<=i;(f||l+(a-l)>u)&&e.scroll(0,c+(f?i-l:a-u)*(f?-1:1))}},[t,n])};
 //# sourceMappingURL=index.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!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])}});
+!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){var n=10;function o(e){var o=e.items,r=e.onSelect,i=e.onOpen,u=e.onDismiss,c=t.useMemo(function(){return(n++).toString(36)},[]),s=t.useRef(null),l=t.useRef(null),a=t.useRef(!1),f=t.useState(!1),d=f[0],p=f[1],v=t.useState(0),m=v[0],g=v[1],O=Math.min(m,o.length-1),b=t.useCallback(function(e){p(e),e&&i&&i(),!e&&u&&u()},[p]),h=t.useCallback(function(e){g(Math.min(e,O))},[O]),S=t.useMemo(function(){return o.map(function(e,t){var n=c+"-item-"+e.value;return Object.assign({},e,{id:n,selected:!1,highlighted:O===t,getItemProps:function(i){return void 0===i&&(i={}),Object.assign({},i,{id:n,onClick:function(n){e.disabled||(r&&r(e),i.onClick&&i.onClick(n),g(t<o.length?t:0))}})}})})},[o,r,O,g]);return t.useEffect(function(){function e(e){var t=e.keyCode,n=s.current;if(n){var i=38===t,u=40===t,c=13===t,l=32===t,a=27===t;if(document.activeElement===n&&(d||!i&&!u||b(!0),l&&b(!d)),d){var f=o.length-1,p=i?m-1:m+1;i||u?(e.preventDefault(),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]),t.useEffect(function(){function e(e){var t=l.current,n=s.current;t&&n&&e.target!==t&&e.target!==n&&!t.contains(e.target)&&!n.contains(e.target)&&b(!1)}return d&&document.addEventListener("click",e),function(){document.removeEventListener("click",e)}},[d,l]),t.useEffect(function(){function e(){a.current=!0}function t(){a.current=!1}return document.addEventListener("mousedown",e),document.addEventListener("mouseup",t),function(){document.removeEventListener("mousedown",e),document.removeEventListener("mouseup",t)}},[]),{id:c,isOpen:d,isOpenSet:b,items:S,highlightedIndex:m,highlightedIndexSet:h,getControlProps:function(e){return void 0===e&&(e={}),Object.assign({},e,{ref:s,id:c,role:"listbox","aria-controls":c+"-drop","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:c+"-drop",role:"listbox"})}}}function r(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===t.indexOf(o)&&(n[o]=e[o]);return n}function i(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&-1===t.indexOf(o)&&(n[o]=e[o]);return n}var u="undefined"==typeof navigator||/iPad|iPhone|Android/i.test(navigator.userAgent);e.useNative=u,e.useDrop=o,e.useSelect=function(e){var n=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=t.useRef(""),a=t.useState(n.filter(function(e){return e.selected})),f=a[0],d=a[1],p=o(Object.assign({},s,{items:n,onSelect:function(e){Boolean(f.filter(function(t){return t.value===e.value})[0])?(d(i?f.filter(function(t){return t.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 t.useEffect(function(){function e(e){var t=e.keyCode;if(t>=65&&t<=90||t>=48&&t<=57){l.current=l.current+e.key;for(var o=0;o<n.length;o++)if(n[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,n,l]),Object.assign({},b,{isOpen:v,isOpenSet:m,items:g.map(function(e){return Object.assign({},e,{selected:Boolean(f.filter(function(t){return t.value===e.value})[0])})}),clear:function(){d([])}})},e.useCombobox=function(e){var n=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=t.useState(n.filter(function(e){return e.selected})),a=l[0],f=l[1],d=o(Object.assign({},s,{items:n,onSelect:function(e){Boolean(a.filter(function(t){return t.value===e.value})[0])?(f(r?a.filter(function(t){return t.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(t){return t.value===e.value})[0])})}),getInputProps:function(e){var t=e.onBlur,n=i(e,["onBlur"]),o=g();return Object.assign({},o,n,{role:"combobox",onKeyUp:function(e){var t=e.target;27!==e.keyCode?13!==e.keyCode&&t.value&&Boolean(m.length)&&!p&&v(!0):t.blur()},onBlur:function(e){o.onBlur&&o.onBlur(e),t&&t(e)},onClick:function(){}})},getDropProps:function(e){return Object.assign({},O(e),{role:"listbox"})},clear:function(){f([])}})},e.useScroll=function(e,n){"function"==typeof HTMLElement.prototype.scroll&&t.useLayoutEffect(function(){var t=document.getElementById(e+"-drop"),o=document.getElementById(n.id);if(t&&o){var r=t.getBoundingClientRect(),i=r.top,u=r.bottom,c=t.scrollTop,s=o.getBoundingClientRect(),l=s.top,a=s.bottom,f=a<=i;(f||l+(a-l)>u)&&t.scroll(0,c+(f?i-l:a-u)*(f?-1:1))}},[e,n])}});
 //# sourceMappingURL=index.umd.js.map

dist/lib/types.d.ts

 import * as React from "react";
 export declare type HTMLPropGetter = (props?: Partial<React.HTMLAttributes<HTMLElement>>) => Partial<React.HTMLAttributes<HTMLElement>>;
+export declare type HTMLPropGetterWithRef = (props?: Partial<React.HTMLAttributes<HTMLElement>>) => Partial<React.HTMLAttributes<HTMLElement>> & {
+    ref: React.RefObject<HTMLElement>;
+};
 export declare type OnSelect = (item: ItemConfig) => void;
@@ -21,5 +24,6 @@ export declare type OnRemove = OnSelect;
     items: Item[];
+    highlightedIndex: number;
     highlightedIndexSet(index: number): void;
-    getControlProps: HTMLPropGetter;
-    getDropProps: HTMLPropGetter;
+    getControlProps: HTMLPropGetterWithRef;
+    getDropProps: HTMLPropGetterWithRef;
 };
@@ -31,4 +35,4 @@ export declare type UseSelect = {
     items: Item[];
-    getControlProps: HTMLPropGetter;
-    getDropProps: HTMLPropGetter;
+    getControlProps: HTMLPropGetterWithRef;
+    getDropProps: HTMLPropGetterWithRef;
     clear(): void;
@@ -41,5 +45,5 @@ };
     items: Item[];
-    getInputProps: HTMLPropGetter;
-    getDropProps: HTMLPropGetter;
+    getInputProps: HTMLPropGetterWithRef;
+    getDropProps: HTMLPropGetterWithRef;
     clear(): void;
 };

dist/lib/useScroll.d.ts

@@ -1,1 +0,2 @@
-export declare function useScroll(scrollParent: HTMLElement, activeElement: HTMLElement): void;
+import { Item } from "./types";
+export declare function useScroll(id: string, highlightedItem: Item): void;

package.json

 {
   "name": "use-drop",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "A minimalist approach to custom dropdowns.",
@@ -5,0 +5,0 @@ "source": "index.ts",

No alert changes

Improved metrics

Total package byte prevSize

70150

increased by1.87%

Lines of code

141

increased by5.22%

No dependency changes