react-selectable-fast - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

dist/react-selectable-fast.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["React-Selectable-Fast"]=t(require("react")):e["React-Selectable-Fast"]=t(e.React)}(window,(function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(t,n){t.exports=e},function(e,t){},function(e,t,n){"use strict";n.r(t);var o=n(0),r=n.n(o),l=["pageX","pageY","clientX","clientY"];function i(e,t){l.forEach((function(n){void 0===e[n]&&(e[n]=e[t][0][n])}))}function c(e){if(e.type.includes("mouse"))return e;try{"touchstart"===e.type?i(e,"targetTouches"):"touchmove"===e.type&&i(e,"changedTouches")}catch(e){console.error(e.message)}return e}function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return!(e.metaKey&&!n.allowMetaClick||e.ctrlKey&&!n.allowCtrlClick||e.altKey&&!n.allowAltClick||e.shiftKey&&!n.allowShiftClick)&&("buttons"in e?e.buttons===t:"which"in e?e.which===t:e.button===t-1)}function a(){return{documentScrollTop:Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),documentScrollLeft:Math.max(window.pageXOffset,document.documentElement.scrollLeft,document.body.scrollLeft)}}function u(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{scrollTop:0,scrollLeft:0},n=t.scrollTop,o=t.scrollLeft,r=a(),l=r.documentScrollTop,i=r.documentScrollLeft;return Array.from(e.getClientRects()).map((function(t){return{top:t.top+l+n,left:t.left+i+o,offsetWidth:e.offsetWidth,offsetHeight:e.offsetHeight,width:t.width,height:t.height}}))}var f=function(e,t,n){var o=n.tolerance,r=void 0===o?0:o,l=n.useOffsetSize,i=void 0!==l&&l,c=i?e.offsetHeight:e.height,s=i?t.offsetHeight:t.height,a=i?e.offsetWidth:e.width,u=i?t.offsetWidth:t.width;return!(e.top+c-r<t.top||e.top+r>t.top+s||e.left+a-r<t.left||e.left+r>t.left+u)};function p(e){return Array.isArray(e)?e:[e]}function d(e,t){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,r=e instanceof HTMLElement?u(e):p(e),l=t instanceof HTMLElement?u(t):p(t),i=0;i<r.length;i++)for(var c=0;c<l.length;c++)return f(r[i],l[c],{tolerance:n,useOffsetSize:1===o})}function h(e,t){for(;e;){if(e===t)return!0;e=e.parentNode}return!1}var y=function(){},m=r.a.createContext({selectable:{register:function(e){},unregister:function(e){},selectAll:y,clearSelection:y,getScrolledContainer:function(){return null}}});function b(e){return(b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function v(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function g(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function S(e,t){return!t||"object"!==b(t)&&"function"!=typeof t?O(e):t}function w(e){return(w=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function O(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){return(C=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function x(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var k=function(e){function t(){var e,n;v(this,t);for(var o=arguments.length,r=new Array(o),l=0;l<o;l++)r[l]=arguments[l];return x(O(n=S(this,(e=w(t)).call.apply(e,[this].concat(r)))),"state",{y:0,x:0,width:0,height:0,isSelecting:!1}),x(O(n),"selectbox",null),x(O(n),"getRef",(function(){return n.selectbox})),x(O(n),"getSelectboxRef",(function(e){n.selectbox=e})),n}var n,o,l;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&C(e,t)}(t,e),n=t,(o=[{key:"render",value:function(){var e=this.props,t=e.fixedPosition,n=e.className,o={left:this.state.x,top:this.state.y,width:this.state.width,height:this.state.height,zIndex:9e3,position:t?"fixed":"absolute",cursor:"default"};return r.a.createElement("div",null,this.state.isSelecting&&r.a.createElement("div",{ref:this.getSelectboxRef,style:o,className:n}))}}])&&g(n.prototype,o),l&&g(n,l),t}(o.Component);x(k,"defaultProps",{className:"selectable-selectbox"});var j=k;function E(e){return(E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function P(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach((function(t){N(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function I(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var n=[],o=!0,r=!1,l=void 0;try{for(var i,c=e[Symbol.iterator]();!(o=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);o=!0);}catch(e){r=!0,l=e}finally{try{o||null==c.return||c.return()}finally{if(r)throw l}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function _(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function M(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function T(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function D(e,t){return!t||"object"!==E(t)&&"function"!=typeof t?A(e):t}function R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function A(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function B(e,t){return(B=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function N(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var W=function(e){function t(){var e,n;M(this,t);for(var o=arguments.length,r=new Array(o),l=0;l<o;l++)r[l]=arguments[l];return N(A(n=D(this,(e=R(t)).call.apply(e,[this].concat(r)))),"state",{selectionMode:!1}),N(A(n),"mouseDownStarted",!1),N(A(n),"mouseMoveStarted",!1),N(A(n),"mouseMoved",!1),N(A(n),"mouseUpStarted",!1),N(A(n),"selectionStarted",!1),N(A(n),"deselectionStarted",!1),N(A(n),"clickedItem",void 0),N(A(n),"mouseDownData",{selectboxY:0,selectboxX:0,target:null}),N(A(n),"registry",new Set),N(A(n),"selectedItems",new Set),N(A(n),"selectingItems",new Set),N(A(n),"ignoreCheckCache",new Map),N(A(n),"ignoreList",n.props.ignoreList.concat([".selectable-select-all",".selectable-deselect-all"])),N(A(n),"ignoreListNodes",[]),N(A(n),"selectbox",null),N(A(n),"selectableGroup",null),N(A(n),"scrollContainer",null),N(A(n),"maxScrollTop",0),N(A(n),"maxScrollLeft",0),N(A(n),"scrollBounds",null),N(A(n),"updateRegistry",(function(){var e={scrollTop:n.scrollContainer.scrollTop,scrollLeft:n.scrollContainer.scrollLeft},t=!0,o=!1,r=void 0;try{for(var l,i=n.registry.values()[Symbol.iterator]();!(t=(l=i.next()).done);t=!0){l.value.registerSelectable(e)}}catch(e){o=!0,r=e}finally{try{t||null==i.return||i.return()}finally{if(o)throw r}}})),N(A(n),"registerSelectable",(function(e){n.registry.add(e),e.state.isSelected&&n.selectedItems.add(e)})),N(A(n),"unregisterSelectable",(function(e){n.registry.delete(e);var t=n.selectedItems.has(e)||n.selectingItems.has(e);n.selectedItems.delete(e),n.selectingItems.delete(e),t&&n.props.onSelectedItemUnmount(e,_(n.selectedItems))})),N(A(n),"updateContainerScroll",(function(e){var t=n.scrollContainer,o=t.scrollTop,r=t.scrollLeft;n.checkScrollTop(e.clientY,o),n.checkScrollBottom(e.clientY,o),n.checkScrollLeft(e.clientX,r),n.checkScrollRight(e.clientX,r)})),N(A(n),"getScrollStep",(function(e){var t=n.props,o=t.minimumSpeedFactor,r=t.scrollSpeed;return Math.max(e,o)*r})),N(A(n),"checkScrollTop",(function(e,t){var o=n.scrollBounds.top-e;(o>0||e<0)&&(n.scrollContainer.scrollTop=t-n.getScrollStep(o))})),N(A(n),"checkScrollBottom",(function(e,t){var o=e-n.scrollBounds.bottom;if(o>0||e>window.innerHeight){var r=t+n.getScrollStep(o);n.scrollContainer.scrollTop=Math.min(r,n.maxScrollTop)}})),N(A(n),"checkScrollLeft",(function(e,t){var o=n.scrollBounds.left-e;if(o>0||e<0){var r=t-n.getScrollStep(o);n.scrollContainer.scrollLeft=r}})),N(A(n),"checkScrollRight",(function(e,t){var o=e-n.scrollBounds.right;if(o>0||e>window.innerWidth){var r=t+n.getScrollStep(o);n.scrollContainer.scrollLeft=Math.min(r,n.maxScrollLeft)}})),N(A(n),"updateSelectBox",(function(e){var t=c(e);if(n.updateContainerScroll(t),!n.mouseMoveStarted){n.mouseMoveStarted=!0,n.mouseMoved=!0;var o=A(n).mouseDownData,r=t.clientX,l=t.clientY,i=n.scrollContainer,s=i.scrollLeft,a=i.scrollTop,u=l-n.scrollBounds.top+a,f=Math.min(u,o.selectboxY),p=r-n.scrollBounds.left+s,d=Math.min(p,o.selectboxX);n.selectbox.setState({x:d,y:f,isSelecting:!0,width:Math.abs(p-o.selectboxX),height:Math.abs(u-o.selectboxY)},(function(){n.updateSelecting(),n.props.duringSelection(_(n.selectingItems)),n.mouseMoveStarted=!1}))}})),N(A(n),"updateSelecting",(function(){var e=n.selectbox.getRef();if(e){var t=I(u(e),1)[0];n.selectItems(P({},t,{offsetWidth:t.offsetWidth||1,offsetHeight:t.offsetHeight||1}))}})),N(A(n),"selectItems",(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=n.props,r=o.tolerance,l=o.enableDeselect,i=o.mixedDeselect;e.top+=n.scrollContainer.scrollTop,e.left+=n.scrollContainer.scrollLeft;var c=!0,s=!1,a=void 0;try{for(var u,f=n.registry.values()[Symbol.iterator]();!(c=(u=f.next()).done);c=!0){var p=u.value;n.processItem({item:p,selectboxBounds:e,tolerance:r,mixedDeselect:i,enableDeselect:l,isFromClick:t&&t.isFromClick})}}catch(e){s=!0,a=e}finally{try{c||null==f.return||f.return()}finally{if(s)throw a}}})),N(A(n),"clearSelection",(function(){var e=!0,t=!1,o=void 0;try{for(var r,l=n.selectedItems.values()[Symbol.iterator]();!(e=(r=l.next()).done);e=!0){var i=r.value;i.setState({isSelected:!1}),n.selectedItems.delete(i)}}catch(e){t=!0,o=e}finally{try{e||null==l.return||l.return()}finally{if(t)throw o}}n.setState({selectionMode:!1}),n.props.onSelectionFinish(_(n.selectedItems)),n.props.onSelectionClear()})),N(A(n),"selectAll",(function(){n.updateWhiteListNodes();var e=!0,t=!1,o=void 0;try{for(var r,l=n.registry.values()[Symbol.iterator]();!(e=(r=l.next()).done);e=!0){var i=r.value;n.isInIgnoreList(i.node)||i.state.isSelected||(i.setState({isSelected:!0}),n.selectedItems.add(i))}}catch(e){t=!0,o=e}finally{try{e||null==l.return||l.return()}finally{if(t)throw o}}n.setState({selectionMode:!0}),n.props.onSelectionFinish(_(n.selectedItems))})),N(A(n),"mouseDown",(function(e){var t=!e.type.includes("touch")&&!s(e,1,{allowAltClick:n.props.allowAltClick,allowCtrlClick:n.props.allowCtrlClick,allowMetaClick:n.props.allowMetaClick,allowShiftClick:n.props.allowShiftClick});if(!(n.mouseDownStarted||n.props.disabled||t))if(n.updateWhiteListNodes(),n.isInIgnoreList(e.target))n.mouseDownStarted=!1;else{n.props.resetOnStart&&n.clearSelection(),n.mouseDownStarted=!0,n.mouseUpStarted=!1;var o=c(e);if(!n.props.globalMouse&&!h(o.target,n.selectableGroup)){var r=I(u(n.selectableGroup),1)[0];if(!d({top:r.top,left:r.left,width:0,height:0,offsetHeight:r.offsetHeight,offsetWidth:r.offsetWidth},{top:o.pageY,left:o.pageX,width:0,height:0,offsetWidth:0,offsetHeight:0}))return}n.updateRootBounds(),n.updateRegistry(),n.mouseDownData={target:o.target,selectboxY:o.clientY-n.scrollBounds.top+n.scrollContainer.scrollTop,selectboxX:o.clientX-n.scrollBounds.left+n.scrollContainer.scrollLeft},o.preventDefault(),document.addEventListener("mousemove",n.updateSelectBox),document.addEventListener("touchmove",n.updateSelectBox),document.addEventListener("mouseup",n.mouseUp),document.addEventListener("touchend",n.mouseUp)}})),N(A(n),"mouseUp",(function(e){if(!n.mouseUpStarted&&(n.mouseUpStarted=!0,n.mouseDownStarted=!1,n.removeTempEventListeners(),n.mouseDownData)){var t=c(e),o=t.pageX,r=t.pageY;if(!n.mouseMoved&&h(t.target,n.selectableGroup))n.handleClick(t,r,o);else{var l=!0,i=!1,s=void 0;try{for(var a,u=n.selectingItems.values()[Symbol.iterator]();!(l=(a=u.next()).done);l=!0){a.value.setState({isSelected:!0,isSelecting:!1})}}catch(e){i=!0,s=e}finally{try{l||null==u.return||u.return()}finally{if(i)throw s}}n.selectedItems=new Set([].concat(_(n.selectedItems),_(n.selectingItems))),n.selectingItems.clear(),1===t.which&&n.mouseDownData.target===t.target&&n.preventEvent(t.target,"click"),n.selectbox.setState({isSelecting:!1,width:0,height:0}),n.props.onSelectionFinish(_(n.selectedItems))}n.toggleSelectionMode(),n.cleanUp(),n.mouseMoved=!1}})),N(A(n),"keyListener",(function(e){27===e.keyCode&&n.clearSelection()})),N(A(n),"getGroupRef",(function(e){n.selectableGroup=e})),N(A(n),"getSelectboxRef",(function(e){n.selectbox=e})),N(A(n),"defaultContainerStyle",{position:"relative"}),N(A(n),"contextValue",{selectable:{register:n.registerSelectable,unregister:n.unregisterSelectable,selectAll:n.selectAll,clearSelection:n.clearSelection,getScrolledContainer:function(){return n.scrollContainer}}}),n}var n,o,l;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&B(e,t)}(t,e),n=t,(o=[{key:"componentDidMount",value:function(){this.props.scrollContainer?this.scrollContainer=document.querySelector(this.props.scrollContainer):this.scrollContainer=this.selectableGroup,this.selectableGroup.addEventListener("mousedown",this.mouseDown),this.selectableGroup.addEventListener("touchstart",this.mouseDown),this.props.deselectOnEsc&&(document.addEventListener("keydown",this.keyListener),document.addEventListener("keyup",this.keyListener))}},{key:"componentWillUnmount",value:function(){this.selectableGroup.removeEventListener("mousedown",this.mouseDown),this.selectableGroup.removeEventListener("touchstart",this.mouseDown),this.props.deselectOnEsc&&(document.removeEventListener("keydown",this.keyListener),document.removeEventListener("keyup",this.keyListener)),this.removeTempEventListeners(),this.selectedItems.clear(),this.selectingItems.clear()}},{key:"removeTempEventListeners",value:function(){document.removeEventListener("mousemove",this.updateSelectBox),document.removeEventListener("touchmove",this.updateSelectBox),document.removeEventListener("mouseup",this.mouseUp),document.removeEventListener("touchend",this.mouseUp)}},{key:"updateRootBounds",value:function(){this.scrollBounds=this.scrollContainer.getBoundingClientRect(),this.maxScrollTop=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight,this.maxScrollLeft=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth}},{key:"toggleSelectionMode",value:function(){var e=this.selectedItems,t=this.state.selectionMode;e.size&&!t&&this.setState({selectionMode:!0}),!e.size&&t&&this.setState({selectionMode:!1})}},{key:"processItem",value:function(e){var t=e.item,n=e.tolerance,o=e.selectboxBounds,r=e.enableDeselect,l=e.mixedDeselect,i=e.isFromClick;if(this.isInIgnoreList(t.node))return null;var c=this.props.delta,s=d(o,t.bounds,n,c),a=t.state,u=a.isSelecting,f=a.isSelected;if(i&&s)return f?this.selectedItems.delete(t):this.selectedItems.add(t),t.setState({isSelected:!f}),this.clickedItem=t,t;if(!i&&s){if(f&&r&&(!this.selectionStarted||l))return t.setState({isSelected:!1}),t.deselected=!0,this.deselectionStarted=!0,this.selectedItems.delete(t);var p=l?!t.deselected:!this.deselectionStarted;if(!u&&!f&&p)return t.setState({isSelecting:!0}),this.selectionStarted=!0,this.selectingItems.add(t),{updateSelecting:!0}}return!i&&!s&&u&&this.selectingItems.has(t)?(t.setState({isSelecting:!1}),this.selectingItems.delete(t),{updateSelecting:!0}):null}},{key:"isInIgnoreList",value:function(e){if(e){if(void 0!==this.ignoreCheckCache.get(e))return this.ignoreCheckCache.get(e);var t=this.ignoreListNodes.some((function(t){return e===t||t.contains(e)}));return this.ignoreCheckCache.set(e,t),t}}},{key:"updateWhiteListNodes",value:function(){this.ignoreListNodes=Array.from(document.querySelectorAll(this.ignoreList.join(", ")))}},{key:"preventEvent",value:function(e,t){e.addEventListener(t,(function n(o){e.removeEventListener(t,n,!0),o.preventDefault(),o.stopPropagation()}),!0)}},{key:"cleanUp",value:function(){if(this.deselectionStarted=!1,this.selectionStarted=!1,this.props.mixedDeselect){var e=!0,t=!1,n=void 0;try{for(var o,r=this.registry.values()[Symbol.iterator]();!(e=(o=r.next()).done);e=!0)o.value.deselected=!1}catch(e){t=!0,n=e}finally{try{e||null==r.return||r.return()}finally{if(t)throw n}}}}},{key:"handleClick",value:function(e,t,n){if(this.props.selectOnClick){var o=this.props,r=o.clickClassName,l=o.allowClickWithoutSelected,i=o.onSelectionFinish,c=e.target.classList||[],s=Array.from(c).includes(r);(l||this.selectedItems.size||s||e.ctrlKey)&&(this.selectItems({top:t,left:n,width:0,height:0,offsetWidth:0,offsetHeight:0},{isFromClick:!0}),i(_(this.selectedItems),this.clickedItem),1===e.which&&this.preventEvent(e.target,"click"),2!==e.which&&3!==e.which||this.preventEvent(e.target,"contextmenu"))}}},{key:"render",value:function(){var e=this.state.selectionMode,t=this.props,n=t.component,o=void 0===n?"div":n,l=t.className,i=t.style,c=t.selectionModeClass,s=t.fixedPosition,a=t.selectboxClassName,u=t.children;return r.a.createElement(m.Provider,{value:this.contextValue},r.a.createElement(o,{ref:this.getGroupRef,style:P({},this.defaultContainerStyle,{},i),className:"".concat(l," ").concat(e?c:"")},r.a.createElement(j,{ref:this.getSelectboxRef,className:a,fixedPosition:s}),u))}}])&&T(n.prototype,o),l&&T(n,l),t}(o.Component);N(W,"defaultProps",{clickClassName:"",tolerance:0,globalMouse:!1,ignoreList:[],scrollSpeed:.25,minimumSpeedFactor:60,duringSelection:y,onSelectionFinish:y,onSelectionClear:y,onSelectedItemUnmount:y,allowClickWithoutSelected:!0,selectionModeClass:"in-selection-mode",resetOnStart:!1,disabled:!1,deselectOnEsc:!0,fixedPosition:!1,delta:1,allowAltClick:!1,allowCtrlClick:!1,allowMetaClick:!1,allowShiftClick:!1,selectOnClick:!0});var H=W;function U(e){return(U="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function F(){return(F=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function G(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function X(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function Y(e,t){return!t||"object"!==U(t)&&"function"!=typeof t?K(e):t}function z(e){return(z=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function K(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function q(e,t){return(q=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function V(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var J=function(e){var t,n;return n=t=function(t){function n(){var e,t;G(this,n);for(var o=arguments.length,r=new Array(o),l=0;l<o;l++)r[l]=arguments[l];return V(K(t=Y(this,(e=z(n)).call.apply(e,[this].concat(r)))),"state",{isSelected:t.props.isSelected,isSelecting:!1}),V(K(t),"node",null),V(K(t),"bounds",null),V(K(t),"registerSelectable",(function(e){t.bounds=u(t.node,e),t.context.selectable.register(K(t))})),V(K(t),"getSelectableRef",(function(e){t.node=e})),t}var o,l,i;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&q(e,t)}(n,t),o=n,(l=[{key:"componentDidMount",value:function(){this.registerSelectable()}},{key:"componentWillUnmount",value:function(){this.context.selectable.unregister(this)}},{key:"render",value:function(){return r.a.createElement(e,F({},this.props,this.state,{selectableRef:this.getSelectableRef}))}}])&&X(o.prototype,l),i&&X(o,i),n}(o.Component),V(t,"contextType",m),V(t,"defaultProps",{isSelected:!1}),n};function Q(e){return(Q="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function Z(){return(Z=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function $(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function ee(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function te(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function ne(e,t){return!t||"object"!==Q(t)&&"function"!=typeof t?re(e):t}function oe(e){return(oe=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function re(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function le(e,t){return(le=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function ie(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var ce=function(e){function t(){var e,n;ee(this,t);for(var o=arguments.length,r=new Array(o),l=0;l<o;l++)r[l]=arguments[l];return ie(re(n=ne(this,(e=oe(t)).call.apply(e,[this].concat(r)))),"root",null),ie(re(n),"getRootRef",(function(e){n.root=e})),n}var n,o,l;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&le(e,t)}(t,e),n=t,(o=[{key:"componentDidMount",value:function(){this.root.addEventListener("mousedown",(function(e){return e.stopPropagation()}))}},{key:"render",value:function(){var e=this.props,t=e.component,n=void 0===t?"div":t,o=e.children,l=e.className,i=void 0===l?"":l,c=$(e,["component","children","className"]);return r.a.createElement(n,Z({ref:this.getRootRef,className:"selectable-select-all ".concat(i),onClick:this.context.selectable.selectAll},c),o)}}])&&te(n.prototype,o),l&&te(n,l),t}(o.Component);ie(ce,"contextType",m);var se=ce;function ae(e){return(ae="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function ue(){return(ue=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function fe(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function pe(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function de(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function he(e,t){return!t||"object"!==ae(t)&&"function"!=typeof t?me(e):t}function ye(e){return(ye=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function me(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function be(e,t){return(be=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function ve(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var ge=function(e){function t(){var e,n;pe(this,t);for(var o=arguments.length,r=new Array(o),l=0;l<o;l++)r[l]=arguments[l];return ve(me(n=he(this,(e=ye(t)).call.apply(e,[this].concat(r)))),"root",null),ve(me(n),"getRootRef",(function(e){n.root=e})),n}var n,o,l;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&be(e,t)}(t,e),n=t,(o=[{key:"componentDidMount",value:function(){this.root.addEventListener("mousedown",(function(e){return e.stopPropagation()}))}},{key:"render",value:function(){var e=this.props,t=e.component,n=void 0===t?"div":t,o=e.children,l=e.className,i=fe(e,["component","children","className"]);return r.a.createElement(n,ue({ref:this.getRootRef,className:"selectable-select-all ".concat(l),onClick:this.context.selectable.clearSelection},i),o)}}])&&de(n.prototype,o),l&&de(n,l),t}(o.Component);ve(ge,"contextType",m);var Se=ge,we=n(1);n.d(t,"TSelectableItemProps",(function(){return we.TSelectableItemProps})),n.d(t,"SelectableGroup",(function(){return H})),n.d(t,"createSelectable",(function(){return J})),n.d(t,"SelectAll",(function(){return se})),n.d(t,"DeselectAll",(function(){return Se}))}])}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["React-Selectable-Fast"]=t(require("react")):e["React-Selectable-Fast"]=t(e.React)}(window,(function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(t,n){t.exports=e},function(e,t){},function(e,t,n){"use strict";n.r(t),n.d(t,"TSelectableItemProps",(function(){return Se.TSelectableItemProps})),n.d(t,"SelectableGroup",(function(){return B})),n.d(t,"createSelectable",(function(){return q})),n.d(t,"SelectAll",(function(){return ce})),n.d(t,"DeselectAll",(function(){return be}));var o=n(0),r=n.n(o),l=["pageX","pageY","clientX","clientY"];function c(e,t){l.forEach((function(n){void 0===e[n]&&(e[n]=e[t][0][n])}))}function i(e){if(e.type.includes("mouse"))return e;try{"touchstart"===e.type?c(e,"targetTouches"):"touchmove"===e.type&&c(e,"changedTouches")}catch(e){console.error(e.message)}return e}function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return!(e.metaKey&&!n.allowMetaClick||e.ctrlKey&&!n.allowCtrlClick||e.altKey&&!n.allowAltClick||e.shiftKey&&!n.allowShiftClick)&&("buttons"in e?e.buttons===t:"which"in e?e.which===t:e.button===t-1)}var a=function(e,t,n){var o=n.tolerance,r=void 0===o?0:o,l=n.useOffsetSize,c=void 0!==l&&l,i=c?e.offsetHeight:e.height,s=c?t.offsetHeight:t.height,a=c?e.offsetWidth:e.width,u=c?t.offsetWidth:t.width;return!(e.top+i-r<t.top||e.top+r>t.top+s||e.left+a-r<t.left||e.left+r>t.left+u)};function u(e){return Array.isArray(e)?e:[e]}function f(e,t){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,r=u(e),l=u(t),c=0;c<r.length;c++)for(var i=0;i<l.length;i++)return a(r[c],l[i],{tolerance:n,useOffsetSize:1===o})}function p(){return{documentScrollTop:Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),documentScrollLeft:Math.max(window.pageXOffset,document.documentElement.scrollLeft,document.body.scrollLeft)}}function d(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{scrollTop:0,scrollLeft:0},n=t.scrollTop,o=t.scrollLeft;return Array.from(e.getClientRects()).map((function(t){return{top:t.top+n,left:t.left+o,offsetWidth:e.offsetWidth,offsetHeight:e.offsetHeight,width:t.width,height:t.height}}))}function h(e,t){for(;e;){if(e===t)return!0;e=e.parentNode}return!1}var m=function(){},y=r.a.createContext({selectable:{register:function(e){},unregister:function(e){},selectAll:m,clearSelection:m,getScrolledContainer:function(){return null}}});function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],o=!0,r=!1,l=void 0;try{for(var c,i=e[Symbol.iterator]();!(o=(c=i.next()).done)&&(n.push(c.value),!t||n.length!==t);o=!0);}catch(e){r=!0,l=e}finally{try{o||null==i.return||i.return()}finally{if(r)throw l}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return b(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return b(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var S={y:0,x:0,width:0,height:0};function g(e){var t=e.fixedPosition,n=e.getSetState,l=e.className,c=v(Object(o.useState)(S),2),i=c[0],s=c[1];Object(o.useEffect)((function(){n(s)}),[]);var a={left:i.x,top:i.y,width:i.width,height:i.height,zIndex:9e3,position:t?"fixed":"absolute",cursor:"default",willChange:"transform",transform:"translateZ(0)"};return r.a.createElement("div",{className:l,style:a})}function w(e){return(w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach((function(t){_(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function k(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],o=!0,r=!1,l=void 0;try{for(var c,i=e[Symbol.iterator]();!(o=(c=i.next()).done)&&(n.push(c.value),!t||n.length!==t);o=!0);}catch(e){r=!0,l=e}finally{try{o||null==i.return||i.return()}finally{if(r)throw l}}return n}(e,t)||I(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e){return function(e){if(Array.isArray(e))return L(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||I(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=I(e))){var t=0,n=function(){};return{s:n,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,r,l=!0,c=!1;return{s:function(){o=e[Symbol.iterator]()},n:function(){var e=o.next();return l=e.done,e},e:function(e){c=!0,r=e},f:function(){try{l||null==o.return||o.return()}finally{if(c)throw r}}}}function I(e,t){if(e){if("string"==typeof e)return L(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?L(e,t):void 0}}function L(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function E(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function P(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function R(e,t){return(R=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function D(e,t){return!t||"object"!==w(t)&&"function"!=typeof t?T(e):t}function T(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function M(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function A(e){return(A=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}g.defaultProps={className:"selectable-selectbox"};var B=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&R(e,t)}(a,e);var t,n,o,l,c=(t=a,function(){var e,n=A(t);if(M()){var o=A(this).constructor;e=Reflect.construct(n,arguments,o)}else e=n.apply(this,arguments);return D(this,e)});function a(){var e;E(this,a);for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return _(T(e=c.call.apply(c,[this].concat(n))),"state",{selectionMode:!1}),_(T(e),"mouseDownStarted",!1),_(T(e),"mouseMoveStarted",!1),_(T(e),"mouseMoved",!1),_(T(e),"mouseUpStarted",!1),_(T(e),"selectionStarted",!1),_(T(e),"deselectionStarted",!1),_(T(e),"clickedItem",void 0),_(T(e),"mouseDownData",{selectboxY:0,selectboxX:0,target:null}),_(T(e),"registry",new Set),_(T(e),"selectedItems",new Set),_(T(e),"selectingItems",new Set),_(T(e),"ignoreCheckCache",new Map),_(T(e),"ignoreList",e.props.ignoreList.concat([".selectable-select-all",".selectable-deselect-all"])),_(T(e),"ignoreListNodes",[]),_(T(e),"setSelectboxState",null),_(T(e),"selectableGroup",null),_(T(e),"scrollContainer",null),_(T(e),"maxScrollTop",0),_(T(e),"maxScrollLeft",0),_(T(e),"scrollBounds",null),_(T(e),"containerScroll",{scrollTop:0,scrollLeft:0}),_(T(e),"documentScroll",{scrollTop:0,scrollLeft:0}),_(T(e),"saveContainerScroll",(function(){var t=e.scrollContainer,n=t.scrollTop,o=t.scrollLeft;e.containerScroll={scrollTop:n,scrollLeft:o}})),_(T(e),"saveDocumentScroll",(function(){var t=p(),n=t.documentScrollLeft,o=t.documentScrollTop;e.documentScroll={scrollTop:o,scrollLeft:n}})),_(T(e),"updateRegistry",(function(){var t,n=j(e.registry.values());try{for(n.s();!(t=n.n()).done;){t.value.updateBounds(e.containerDocumentScroll)}}catch(e){n.e(e)}finally{n.f()}})),_(T(e),"registerSelectable",(function(t){e.registry.add(t),t.state.isSelected&&e.selectedItems.add(t)})),_(T(e),"unregisterSelectable",(function(t){e.registry.delete(t);var n=e.selectedItems.has(t)||e.selectingItems.has(t);e.selectedItems.delete(t),e.selectingItems.delete(t),n&&e.props.onSelectedItemUnmount(t,x(e.selectedItems))})),_(T(e),"updateContainerScroll",(function(t){var n=e.containerScroll,o=n.scrollTop,r=n.scrollLeft;e.checkScrollTop(t.clientY,o),e.checkScrollBottom(t.clientY,o),e.checkScrollLeft(t.clientX,r),e.checkScrollRight(t.clientX,r)})),_(T(e),"getScrollStep",(function(t){var n=e.props,o=n.minimumSpeedFactor,r=n.scrollSpeed;return Math.max(t,o)*r})),_(T(e),"checkScrollTop",(function(t,n){var o=e.scrollBounds.top-t;(o>0||t<0)&&(e.scrollContainer.scrollTop=n-e.getScrollStep(o))})),_(T(e),"checkScrollBottom",(function(t,n){var o=t-e.scrollBounds.bottom;if(o>0||t>window.innerHeight){var r=n+e.getScrollStep(o);e.scrollContainer.scrollTop=Math.min(r,e.maxScrollTop)}})),_(T(e),"checkScrollLeft",(function(t,n){var o=e.scrollBounds.left-t;if(o>0||t<0){var r=n-e.getScrollStep(o);e.scrollContainer.scrollLeft=r}})),_(T(e),"checkScrollRight",(function(t,n){var o=t-e.scrollBounds.right;if(o>0||t>window.innerWidth){var r=n+e.getScrollStep(o);e.scrollContainer.scrollLeft=Math.min(r,e.maxScrollLeft)}})),_(T(e),"updateSelectBox",(function(t){var n=i(t);if(e.updateContainerScroll(n),!e.mouseMoveStarted){e.mouseMoveStarted=!0,e.mouseMoved=!0;var o=T(e).mouseDownData,r=n.clientX,l=n.clientY-e.scrollBounds.top+e.containerScroll.scrollTop,c=Math.min(l,o.selectboxY),s=r-e.scrollBounds.left+e.containerScroll.scrollLeft,a={x:Math.min(s,o.selectboxX),y:c,width:Math.abs(s-o.selectboxX),height:Math.abs(l-o.selectboxY)};e.setSelectboxState(a);var u={top:a.y+e.scrollBounds.top+e.documentScroll.scrollTop,left:a.x+e.scrollBounds.left+e.documentScroll.scrollLeft,width:a.width,height:a.height,offsetWidth:a.width||1,offsetHeight:a.height||1};e.selectItems(u),e.props.duringSelection(x(e.selectingItems)),e.mouseMoveStarted=!1}})),_(T(e),"selectItems",(function(t){var n,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=e.props,l=r.tolerance,c=r.enableDeselect,i=r.mixedDeselect,s=j(e.registry.values());try{for(s.s();!(n=s.n()).done;){var a=n.value;e.processItem({item:a,selectboxBounds:t,tolerance:l,mixedDeselect:i,enableDeselect:c,isFromClick:o&&o.isFromClick})}}catch(e){s.e(e)}finally{s.f()}})),_(T(e),"clearSelection",(function(){var t,n=j(e.selectedItems.values());try{for(n.s();!(t=n.n()).done;){var o=t.value;o.setState({isSelected:!1}),e.selectedItems.delete(o)}}catch(e){n.e(e)}finally{n.f()}e.setState({selectionMode:!1}),e.props.onSelectionFinish(x(e.selectedItems)),e.props.onSelectionClear()})),_(T(e),"selectAll",(function(){e.removeIgnoredItemsFromRegistry();var t,n=j(e.registry.values());try{for(n.s();!(t=n.n()).done;){var o=t.value;o.state.isSelected||(o.setState({isSelected:!0}),e.selectedItems.add(o))}}catch(e){n.e(e)}finally{n.f()}e.setState({selectionMode:!0}),e.props.onSelectionFinish(x(e.selectedItems))})),_(T(e),"mouseDown",(function(t){var n=!t.type.includes("touch")&&!s(t,1,{allowAltClick:e.props.allowAltClick,allowCtrlClick:e.props.allowCtrlClick,allowMetaClick:e.props.allowMetaClick,allowShiftClick:e.props.allowShiftClick});if(!(e.mouseDownStarted||e.props.disabled||n))if(e.removeIgnoredItemsFromRegistry(),e.isInIgnoreList(t.target))e.mouseDownStarted=!1;else{e.props.resetOnStart&&e.clearSelection(),e.mouseDownStarted=!0,e.mouseUpStarted=!1;var o=i(t);if(!e.props.globalMouse&&!h(o.target,e.selectableGroup)){var r=k(d(e.selectableGroup,e.documentScroll),1)[0];if(!f({top:r.top,left:r.left,width:0,height:0,offsetHeight:r.offsetHeight,offsetWidth:r.offsetWidth},{top:o.pageY,left:o.pageX,width:0,height:0,offsetWidth:0,offsetHeight:0}))return}e.updateRootBounds(),e.updateRegistry(),e.mouseDownData={target:o.target,selectboxY:o.clientY-e.scrollBounds.top+e.containerScroll.scrollTop,selectboxX:o.clientX-e.scrollBounds.left+e.containerScroll.scrollLeft},o.preventDefault(),document.addEventListener("mousemove",e.updateSelectBox),document.addEventListener("touchmove",e.updateSelectBox),document.addEventListener("mouseup",e.mouseUp),document.addEventListener("touchend",e.mouseUp)}})),_(T(e),"mouseUp",(function(t){if(!e.mouseUpStarted&&(e.mouseUpStarted=!0,e.mouseDownStarted=!1,e.removeTempEventListeners(),e.mouseDownData)){var n=i(t),o=n.pageX,r=n.pageY;if(!e.mouseMoved&&h(n.target,e.selectableGroup))e.handleClick(n,r,o);else{var l,c=j(e.selectingItems.values());try{for(c.s();!(l=c.n()).done;){l.value.setState({isSelected:!0,isSelecting:!1})}}catch(e){c.e(e)}finally{c.f()}e.selectedItems=new Set([].concat(x(e.selectedItems),x(e.selectingItems))),e.selectingItems.clear(),1===n.which&&e.mouseDownData.target===n.target&&e.preventEvent(n.target,"click"),e.setSelectboxState({x:0,y:0,width:0,height:0}),e.props.onSelectionFinish(x(e.selectedItems))}e.toggleSelectionMode(),e.cleanUp(),e.mouseMoved=!1}})),_(T(e),"keyListener",(function(t){27===t.keyCode&&e.clearSelection()})),_(T(e),"getGroupRef",(function(t){e.selectableGroup=t})),_(T(e),"getSelectboxSetState",(function(t){e.setSelectboxState=t})),_(T(e),"defaultContainerStyle",{position:"relative"}),_(T(e),"contextValue",{selectable:{register:e.registerSelectable,unregister:e.unregisterSelectable,selectAll:e.selectAll,clearSelection:e.clearSelection,getScrolledContainer:function(){return e.scrollContainer}}}),e}return n=a,(o=[{key:"componentDidMount",value:function(){this.props.scrollContainer?this.scrollContainer=document.querySelector(this.props.scrollContainer):this.scrollContainer=this.selectableGroup,this.scrollContainer.addEventListener("scroll",this.saveContainerScroll),document.addEventListener("scroll",this.saveDocumentScroll),this.selectableGroup.addEventListener("mousedown",this.mouseDown),this.selectableGroup.addEventListener("touchstart",this.mouseDown),this.props.deselectOnEsc&&(document.addEventListener("keydown",this.keyListener),document.addEventListener("keyup",this.keyListener)),this.removeIgnoredItemsFromRegistry()}},{key:"componentWillUnmount",value:function(){this.scrollContainer.removeEventListener("scroll",this.saveContainerScroll),document.removeEventListener("scroll",this.saveDocumentScroll),this.selectableGroup.removeEventListener("mousedown",this.mouseDown),this.selectableGroup.removeEventListener("touchstart",this.mouseDown),this.props.deselectOnEsc&&(document.removeEventListener("keydown",this.keyListener),document.removeEventListener("keyup",this.keyListener)),this.removeTempEventListeners(),this.selectedItems.clear(),this.selectingItems.clear()}},{key:"removeTempEventListeners",value:function(){document.removeEventListener("mousemove",this.updateSelectBox),document.removeEventListener("touchmove",this.updateSelectBox),document.removeEventListener("mouseup",this.mouseUp),document.removeEventListener("touchend",this.mouseUp)}},{key:"updateRootBounds",value:function(){this.scrollBounds=this.scrollContainer.getBoundingClientRect(),this.maxScrollTop=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight,this.maxScrollLeft=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth}},{key:"toggleSelectionMode",value:function(){var e=this.selectedItems,t=this.state.selectionMode;e.size&&!t&&this.setState({selectionMode:!0}),!e.size&&t&&this.setState({selectionMode:!1})}},{key:"processItem",value:function(e){var t=e.item,n=e.tolerance,o=e.selectboxBounds,r=e.enableDeselect,l=e.mixedDeselect,c=e.isFromClick,i=this.props.delta,s=f(o,t.bounds,n,i),a=t.state,u=a.isSelecting,p=a.isSelected;if(c&&s)return p?this.selectedItems.delete(t):this.selectedItems.add(t),t.setState({isSelected:!p}),this.clickedItem=t,t;if(!c&&s){if(p&&r&&(!this.selectionStarted||l))return t.setState({isSelected:!1}),t.deselected=!0,this.deselectionStarted=!0,this.selectedItems.delete(t);var d=l?!t.deselected:!this.deselectionStarted;if(!u&&!p&&d)return t.setState({isSelecting:!0}),this.selectionStarted=!0,this.selectingItems.add(t),{updateSelecting:!0}}return!c&&!s&&u&&this.selectingItems.has(t)?(t.setState({isSelecting:!1}),this.selectingItems.delete(t),{updateSelecting:!0}):null}},{key:"isInIgnoreList",value:function(e){if(e){if(void 0!==this.ignoreCheckCache.get(e))return this.ignoreCheckCache.get(e);var t=this.ignoreListNodes.some((function(t){return e===t||t.contains(e)}));return this.ignoreCheckCache.set(e,t),t}}},{key:"removeIgnoredItemsFromRegistry",value:function(){var e=this;this.ignoreListNodes=Array.from(document.querySelectorAll(this.ignoreList.join(", "))),this.registry=new Set(x(this.registry).filter((function(t){return!e.isInIgnoreList(t.node)}))),this.selectedItems=new Set(x(this.selectedItems).filter((function(t){return!e.isInIgnoreList(t.node)})))}},{key:"preventEvent",value:function(e,t){e.addEventListener(t,(function n(o){e.removeEventListener(t,n,!0),o.preventDefault(),o.stopPropagation()}),!0)}},{key:"cleanUp",value:function(){if(this.deselectionStarted=!1,this.selectionStarted=!1,this.props.mixedDeselect){var e,t=j(this.registry.values());try{for(t.s();!(e=t.n()).done;)e.value.deselected=!1}catch(e){t.e(e)}finally{t.f()}}}},{key:"handleClick",value:function(e,t,n){if(this.props.selectOnClick){var o=this.props,r=o.clickClassName,l=o.allowClickWithoutSelected,c=o.onSelectionFinish,i=e.target.classList||[],s=Array.from(i).includes(r);(l||this.selectedItems.size||s||e.ctrlKey)&&(this.selectItems({top:t,left:n,width:0,height:0,offsetWidth:0,offsetHeight:0},{isFromClick:!0}),c(x(this.selectedItems),this.clickedItem),1===e.which&&this.preventEvent(e.target,"click"),2!==e.which&&3!==e.which||this.preventEvent(e.target,"contextmenu"))}}},{key:"render",value:function(){var e=this.state.selectionMode,t=this.props,n=t.component,o=void 0===n?"div":n,l=t.className,c=t.style,i=t.selectionModeClass,s=t.fixedPosition,a=t.selectboxClassName,u=t.children;return r.a.createElement(y.Provider,{value:this.contextValue},r.a.createElement(o,{ref:this.getGroupRef,style:C({},this.defaultContainerStyle,{},c),className:"".concat(l," ").concat(e?i:"")},u,r.a.createElement(g,{getSetState:this.getSelectboxSetState,className:a,fixedPosition:s})))}},{key:"containerDocumentScroll",get:function(){return{scrollTop:this.containerScroll.scrollTop+this.documentScroll.scrollTop,scrollLeft:this.containerScroll.scrollLeft+this.documentScroll.scrollLeft}}}])&&P(n.prototype,o),l&&P(n,l),a}(o.Component);function N(e){return(N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function F(){return(F=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function U(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function W(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function G(e,t){return(G=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function X(e,t){return!t||"object"!==N(t)&&"function"!=typeof t?Y(e):t}function Y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function H(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function z(e){return(z=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function K(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}_(B,"defaultProps",{clickClassName:"",tolerance:0,globalMouse:!1,ignoreList:[],scrollSpeed:.25,minimumSpeedFactor:60,duringSelection:m,onSelectionFinish:m,onSelectionClear:m,onSelectedItemUnmount:m,allowClickWithoutSelected:!0,selectionModeClass:"in-selection-mode",resetOnStart:!1,disabled:!1,deselectOnEsc:!0,fixedPosition:!1,delta:1,allowAltClick:!1,allowCtrlClick:!1,allowMetaClick:!1,allowShiftClick:!1,selectOnClick:!0});var q=function(e){var t,n;return n=t=function(t){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&G(e,t)}(s,t);var n,o,l,c,i=(n=s,function(){var e,t=z(n);if(H()){var o=z(this).constructor;e=Reflect.construct(t,arguments,o)}else e=t.apply(this,arguments);return X(this,e)});function s(){var e;U(this,s);for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return K(Y(e=i.call.apply(i,[this].concat(n))),"state",{isSelected:e.props.isSelected,isSelecting:!1}),K(Y(e),"node",null),K(Y(e),"bounds",null),K(Y(e),"updateBounds",(function(t){e.bounds=d(e.node,t)})),K(Y(e),"getSelectableRef",(function(t){e.node=t})),e}return o=s,(l=[{key:"componentDidMount",value:function(){this.updateBounds(),this.context.selectable.register(this)}},{key:"componentWillUnmount",value:function(){this.context.selectable.unregister(this)}},{key:"render",value:function(){return r.a.createElement(e,F({},this.props,this.state,{selectableRef:this.getSelectableRef}))}}])&&W(o.prototype,l),c&&W(o,c),s}(o.Component),K(t,"contextType",y),K(t,"defaultProps",{isSelected:!1}),n};function V(e){return(V="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function $(){return($=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function Z(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function J(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Q(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function ee(e,t){return(ee=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function te(e,t){return!t||"object"!==V(t)&&"function"!=typeof t?ne(e):t}function ne(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function oe(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function re(e){return(re=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function le(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var ce=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&ee(e,t)}(i,e);var t,n,o,l,c=(t=i,function(){var e,n=re(t);if(oe()){var o=re(this).constructor;e=Reflect.construct(n,arguments,o)}else e=n.apply(this,arguments);return te(this,e)});function i(){var e;J(this,i);for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return le(ne(e=c.call.apply(c,[this].concat(n))),"root",null),le(ne(e),"getRootRef",(function(t){e.root=t})),e}return n=i,(o=[{key:"componentDidMount",value:function(){this.root.addEventListener("mousedown",(function(e){return e.stopPropagation()}))}},{key:"render",value:function(){var e=this.props,t=e.component,n=void 0===t?"div":t,o=e.children,l=e.className,c=void 0===l?"":l,i=Z(e,["component","children","className"]),s=n;return r.a.createElement(s,$({ref:this.getRootRef,className:"selectable-select-all ".concat(c),onClick:this.context.selectable.selectAll},i),o)}}])&&Q(n.prototype,o),l&&Q(n,l),i}(o.Component);function ie(e){return(ie="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function se(){return(se=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function ae(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function ue(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function fe(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function pe(e,t){return(pe=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function de(e,t){return!t||"object"!==ie(t)&&"function"!=typeof t?he(e):t}function he(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function me(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function ye(e){return(ye=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function ve(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}le(ce,"contextType",y);var be=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&pe(e,t)}(i,e);var t,n,o,l,c=(t=i,function(){var e,n=ye(t);if(me()){var o=ye(this).constructor;e=Reflect.construct(n,arguments,o)}else e=n.apply(this,arguments);return de(this,e)});function i(){var e;ue(this,i);for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return ve(he(e=c.call.apply(c,[this].concat(n))),"root",null),ve(he(e),"getRootRef",(function(t){e.root=t})),e}return n=i,(o=[{key:"componentDidMount",value:function(){this.root.addEventListener("mousedown",(function(e){return e.stopPropagation()}))}},{key:"render",value:function(){var e=this.props,t=e.component,n=void 0===t?"div":t,o=e.children,l=e.className,c=ae(e,["component","children","className"]),i=n;return r.a.createElement(i,se({ref:this.getRootRef,className:"selectable-select-all ".concat(l),onClick:this.context.selectable.clearSelection},c),o)}}])&&fe(n.prototype,o),l&&fe(n,l),i}(o.Component);ve(be,"contextType",y);var Se=n(1)}])}));
 //# sourceMappingURL=react-selectable-fast.js.map

lib/CreateSelectable.d.ts

 import React from 'react';
-import { TComputedBounds, TGetBoundsForNodeArgs } from './utils';
-import { TSelectableItemState } from './Selectable.types';
-declare const createSelectable: (WrappedComponent: React.ComponentType<any>) => {
-    new (props: Readonly<any>): {
-        state: {
-            isSelected: any;
-            isSelecting: boolean;
-        };
-        node: HTMLElement | null;
-        bounds: import("./utils").Maybe<TComputedBounds[]>;
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        registerSelectable: (containerScroll?: TGetBoundsForNodeArgs | undefined) => void;
-        getSelectableRef: (ref: HTMLElement | null) => void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends "isSelected" | "isSelecting">(state: TSelectableItemState | ((prevState: Readonly<TSelectableItemState>, props: Readonly<any>) => TSelectableItemState | Pick<TSelectableItemState, K> | null) | Pick<TSelectableItemState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<any> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<TSelectableItemState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<TSelectableItemState>): any;
-        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<TSelectableItemState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<TSelectableItemState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<TSelectableItemState>, nextContext: any): void;
-    };
-    new (props: any, context?: any): {
-        state: {
-            isSelected: any;
-            isSelecting: boolean;
-        };
-        node: HTMLElement | null;
-        bounds: import("./utils").Maybe<TComputedBounds[]>;
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        registerSelectable: (containerScroll?: TGetBoundsForNodeArgs | undefined) => void;
-        getSelectableRef: (ref: HTMLElement | null) => void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends "isSelected" | "isSelecting">(state: TSelectableItemState | ((prevState: Readonly<TSelectableItemState>, props: Readonly<any>) => TSelectableItemState | Pick<TSelectableItemState, K> | null) | Pick<TSelectableItemState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<any> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<TSelectableItemState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<TSelectableItemState>): any;
-        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<TSelectableItemState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<TSelectableItemState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<TSelectableItemState>, nextContext: any): void;
-    };
-    contextType: React.Context<import("./Selectable.types").TSelectableGroupContext>;
-    propTypes: {
-        isSelected: import("prop-types").Requireable<boolean>;
-    };
-    defaultProps: {
-        isSelected: boolean;
-    };
-};
-export default createSelectable;
+import { TSelectableItemState, TSelectableItemProps } from './Selectable.types';
+export declare const createSelectable: <T extends any>(WrappedComponent: React.ComponentType<TSelectableItemState & {
+    selectableRef(node: HTMLElement | null): void;
+} & T>) => React.ComponentType<T & Partial<Pick<TSelectableItemProps, "isSelected">>>;

lib/CreateSelectable.js

@@ -33,11 +33,7 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var prop_types_1 = require("prop-types");
 var utils_1 = require("./utils");
-var Context_1 = __importDefault(require("./Context"));
-var createSelectable = function (WrappedComponent) { var _a; return _a = (function (_super) {
+var SelectableGroup_context_1 = require("./SelectableGroup.context");
+exports.createSelectable = function (WrappedComponent) { var _a; return _a = (function (_super) {
         __extends(SelectableItem, _super);
@@ -48,9 +44,8 @@ function SelectableItem() {
                 isSelected: _this.props.isSelected,
-                isSelecting: false
+                isSelecting: false,
             };
             _this.node = null;
             _this.bounds = null;
-            _this.registerSelectable = function (containerScroll) {
+            _this.updateBounds = function (containerScroll) {
                 _this.bounds = utils_1.getBoundsForNode(_this.node, containerScroll);
-                _this.context.selectable.register(_this);
             };
@@ -63,3 +58,4 @@ _this.getSelectableRef = function (ref) {
         SelectableItem.prototype.componentDidMount = function () {
-            this.registerSelectable();
+            this.updateBounds();
+            this.context.selectable.register(this);
         };
@@ -74,11 +70,7 @@ SelectableItem.prototype.componentWillUnmount = function () {
     }(react_1.Component)),
-    _a.contextType = Context_1.default,
-    _a.propTypes = {
-        isSelected: prop_types_1.bool
-    },
+    _a.contextType = SelectableGroup_context_1.SelectableGroupContext,
     _a.defaultProps = {
-        isSelected: false
+        isSelected: false,
     },
     _a; };
-exports.default = createSelectable;
 //# sourceMappingURL=CreateSelectable.js.map

lib/DeselectAll.d.ts

@@ -1,16 +0,15 @@
-import React, { Component, ReactNode } from 'react';
-import { ReactComponentLike } from 'prop-types';
-declare type TDeselectAllButton = {
+import React, { Component, FunctionComponent, ReactNode } from 'react';
+declare type TDeselectAllProps = {
     children: ReactNode;
-    component?: ReactComponentLike;
+    component?: string | FunctionComponent;
     className?: string;
     [key: string]: any;
 };
-declare class DeselectAllButton extends Component<TDeselectAllButton> {
+export declare class DeselectAll extends Component<TDeselectAllProps> {
     static contextType: React.Context<import("./Selectable.types").TSelectableGroupContext>;
     root: HTMLDivElement | null;
     componentDidMount(): void;
-    getRootRef: (ref: import("./utils").Maybe<HTMLDivElement>) => void;
+    getRootRef: (ref: HTMLDivElement | null) => void;
     render(): JSX.Element;
 }
-export default DeselectAllButton;
+export {};

lib/DeselectAll.js

@@ -44,11 +44,8 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var Context_1 = __importDefault(require("./Context"));
-var DeselectAllButton = (function (_super) {
-    __extends(DeselectAllButton, _super);
-    function DeselectAllButton() {
+var SelectableGroup_context_1 = require("./SelectableGroup.context");
+var DeselectAll = (function (_super) {
+    __extends(DeselectAll, _super);
+    function DeselectAll() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -61,13 +58,14 @@ _this.root = null;
     }
-    DeselectAllButton.prototype.componentDidMount = function () {
+    DeselectAll.prototype.componentDidMount = function () {
         this.root.addEventListener('mousedown', function (evt) { return evt.stopPropagation(); });
     };
-    DeselectAllButton.prototype.render = function () {
-        var _a = this.props, _b = _a.component, ButtonComponent = _b === void 0 ? 'div' : _b, children = _a.children, className = _a.className, rest = __rest(_a, ["component", "children", "className"]);
+    DeselectAll.prototype.render = function () {
+        var _a = this.props, _b = _a.component, component = _b === void 0 ? 'div' : _b, children = _a.children, className = _a.className, rest = __rest(_a, ["component", "children", "className"]);
+        var ButtonComponent = component;
         return (react_1.default.createElement(ButtonComponent, __assign({ ref: this.getRootRef, className: "selectable-select-all " + className, onClick: this.context.selectable.clearSelection }, rest), children));
     };
-    DeselectAllButton.contextType = Context_1.default;
-    return DeselectAllButton;
+    DeselectAll.contextType = SelectableGroup_context_1.SelectableGroupContext;
+    return DeselectAll;
 }(react_1.Component));
-exports.default = DeselectAllButton;
+exports.DeselectAll = DeselectAll;
 //# sourceMappingURL=DeselectAll.js.map

lib/index.d.ts

@@ -1,6 +0,6 @@
-import SelectableGroup from './SelectableGroup';
-import createSelectable from './CreateSelectable';
-import SelectAll from './SelectAll';
-import DeselectAll from './DeselectAll';
+import { SelectableGroup } from './SelectableGroup';
+import { createSelectable } from './CreateSelectable';
+import { SelectAll } from './SelectAll';
+import { DeselectAll } from './DeselectAll';
 import { TSelectableItemProps } from './Selectable.types';
 export { TSelectableItemProps, SelectableGroup, createSelectable, SelectAll, DeselectAll };

lib/index.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var SelectableGroup_1 = __importDefault(require("./SelectableGroup"));
-exports.SelectableGroup = SelectableGroup_1.default;
-var CreateSelectable_1 = __importDefault(require("./CreateSelectable"));
-exports.createSelectable = CreateSelectable_1.default;
-var SelectAll_1 = __importDefault(require("./SelectAll"));
-exports.SelectAll = SelectAll_1.default;
-var DeselectAll_1 = __importDefault(require("./DeselectAll"));
-exports.DeselectAll = DeselectAll_1.default;
+var SelectableGroup_1 = require("./SelectableGroup");
+exports.SelectableGroup = SelectableGroup_1.SelectableGroup;
+var CreateSelectable_1 = require("./CreateSelectable");
+exports.createSelectable = CreateSelectable_1.createSelectable;
+var SelectAll_1 = require("./SelectAll");
+exports.SelectAll = SelectAll_1.SelectAll;
+var DeselectAll_1 = require("./DeselectAll");
+exports.DeselectAll = DeselectAll_1.DeselectAll;
 if (process.env.NODE_ENV === 'development') {
@@ -15,0 +12,0 @@ if (typeof Map !== 'function' ||

lib/Selectable.types.d.ts

@@ -1,2 +0,1 @@
-import { Component } from 'react';
 import { Maybe, TComputedBounds, TGetBoundsForNodeArgs } from './utils';
@@ -17,7 +16,9 @@ declare type TSelectableContext = {
 };
-export declare type TSelectableItem = Component & {
+export declare type TSelectableItem = {
+    updateBounds(containerScroll?: TGetBoundsForNodeArgs): void;
     registerSelectable(containerScroll?: TGetBoundsForNodeArgs): void;
+    setState(state: any): void;
     state: TSelectableItemState;
     deselected: boolean;
-    node: Maybe<HTMLDivElement>;
+    node: Maybe<HTMLElement>;
     bounds: Maybe<TComputedBounds[]>;
@@ -24,0 +25,0 @@ };

lib/SelectableGroup.d.ts

@@ -1,6 +0,5 @@
-import { Component } from 'react';
-import { ReactComponentLike } from 'prop-types';
+import React, { Component, ComponentType, CSSProperties } from 'react';
 import { Maybe, TComputedBounds } from './utils';
 import { TSelectableItem } from './Selectable.types';
-import Selectbox from './Selectbox';
+import { TSetSelectboxState } from './Selectbox';
 declare type TSelectItemsOptions = {
@@ -30,3 +29,3 @@ isFromClick?: boolean;
     selectboxClassName?: string;
-    style?: object;
+    style?: CSSProperties;
     selectionModeClass?: string;
@@ -49,7 +48,7 @@ onSelectionFinish?: Function;
     duringSelection?: Function;
-    component?: ReactComponentLike;
+    component?: ComponentType;
     tolerance?: number;
     fixedPosition?: boolean;
 };
-declare class SelectableGroup extends Component<TSelectableGroupProps> {
+export declare class SelectableGroup extends Component<TSelectableGroupProps> {
     static defaultProps: {
@@ -96,3 +95,3 @@ clickClassName: string;
     ignoreListNodes: HTMLElement[];
-    selectbox: Maybe<Selectbox>;
+    setSelectboxState: Maybe<TSetSelectboxState>;
     selectableGroup: Maybe<HTMLElement>;
@@ -103,4 +102,18 @@ scrollContainer: Maybe<HTMLElement>;
     scrollBounds: Maybe<DOMRect | ClientRect>;
+    containerScroll: {
+        scrollTop: number;
+        scrollLeft: number;
+    };
+    documentScroll: {
+        scrollTop: number;
+        scrollLeft: number;
+    };
     componentDidMount(): void;
     componentWillUnmount(): void;
+    saveContainerScroll: () => void;
+    saveDocumentScroll: () => void;
+    get containerDocumentScroll(): {
+        scrollTop: number;
+        scrollLeft: number;
+    };
     removeTempEventListeners(): void;
@@ -119,3 +132,2 @@ updateRootBounds(): void;
     updateSelectBox: (event: Event) => void;
-    updateSelecting: () => void;
     selectItems: (selectboxBounds: TComputedBounds, options?: TSelectItemsOptions) => void;
@@ -128,3 +140,3 @@ processItem(options: TProcessItemOptions): boolean | TSelectableItem | {
     isInIgnoreList(target: HTMLElement | null): boolean | undefined;
-    updateWhiteListNodes(): void;
+    removeIgnoredItemsFromRegistry(): void;
     mouseDown: (e: Event) => void;
@@ -136,6 +148,4 @@ preventEvent(target: HTMLElement, type: string): void;
     getGroupRef: (ref: HTMLElement | null) => void;
-    getSelectboxRef: (ref: Maybe<Selectbox>) => void;
-    defaultContainerStyle: {
-        position: string;
-    };
+    getSelectboxSetState: (setState: React.Dispatch<React.SetStateAction<import("./Selectbox").TSelectboxState>>) => void;
+    defaultContainerStyle: CSSProperties;
     contextValue: {
@@ -153,2 +163,2 @@ selectable: {
 }
-export default SelectableGroup;
+export {};

lib/SelectableGroup.js

@@ -64,10 +64,7 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var utils_1 = require("./utils");
-var Context_1 = __importDefault(require("./Context"));
-var Selectbox_1 = __importDefault(require("./Selectbox"));
+var SelectableGroup_context_1 = require("./SelectableGroup.context");
+var Selectbox_1 = require("./Selectbox");
 var SelectableGroup = (function (_super) {
@@ -87,3 +84,3 @@ __extends(SelectableGroup, _super);
             selectboxX: 0,
-            target: null
+            target: null,
         };
@@ -96,3 +93,3 @@ _this.registry = new Set();
         _this.ignoreListNodes = [];
-        _this.selectbox = null;
+        _this.setSelectboxState = null;
         _this.selectableGroup = null;
@@ -103,12 +100,30 @@ _this.scrollContainer = null;
         _this.scrollBounds = null;
+        _this.containerScroll = {
+            scrollTop: 0,
+            scrollLeft: 0,
+        };
+        _this.documentScroll = {
+            scrollTop: 0,
+            scrollLeft: 0,
+        };
+        _this.saveContainerScroll = function () {
+            var _a = _this.scrollContainer, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
+            _this.containerScroll = {
+                scrollTop: scrollTop,
+                scrollLeft: scrollLeft,
+            };
+        };
+        _this.saveDocumentScroll = function () {
+            var _a = utils_1.getDocumentScroll(), documentScrollLeft = _a.documentScrollLeft, documentScrollTop = _a.documentScrollTop;
+            _this.documentScroll = {
+                scrollTop: documentScrollTop,
+                scrollLeft: documentScrollLeft,
+            };
+        };
         _this.updateRegistry = function () {
             var e_1, _a;
-            var containerScroll = {
-                scrollTop: _this.scrollContainer.scrollTop,
-                scrollLeft: _this.scrollContainer.scrollLeft
-            };
             try {
                 for (var _b = __values(_this.registry.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var selectableItem = _c.value;
-                    selectableItem.registerSelectable(containerScroll);
+                    selectableItem.updateBounds(_this.containerDocumentScroll);
                 }
@@ -140,3 +155,3 @@ }
         _this.updateContainerScroll = function (evt) {
-            var _a = _this.scrollContainer, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
+            var _a = _this.containerScroll, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
             _this.checkScrollTop(evt.clientY, scrollTop);
@@ -188,27 +203,25 @@ _this.checkScrollBottom(evt.clientY, scrollTop);
             var clientX = evt.clientX, clientY = evt.clientY;
-            var _a = _this.scrollContainer, scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop;
-            var pointY = clientY - _this.scrollBounds.top + scrollTop;
+            var pointY = clientY - _this.scrollBounds.top + _this.containerScroll.scrollTop;
             var selectboxY = Math.min(pointY, mouseDownData.selectboxY);
-            var pointX = clientX - _this.scrollBounds.left + scrollLeft;
+            var pointX = clientX - _this.scrollBounds.left + _this.containerScroll.scrollLeft;
             var selectboxX = Math.min(pointX, mouseDownData.selectboxX);
-            _this.selectbox.setState({
+            var selectboxState = {
                 x: selectboxX,
                 y: selectboxY,
-                isSelecting: true,
                 width: Math.abs(pointX - mouseDownData.selectboxX),
-                height: Math.abs(pointY - mouseDownData.selectboxY)
-            }, function () {
-                _this.updateSelecting();
-                _this.props.duringSelection(__spread(_this.selectingItems));
-                _this.mouseMoveStarted = false;
-            });
+                height: Math.abs(pointY - mouseDownData.selectboxY),
+            };
+            _this.setSelectboxState(selectboxState);
+            var selectboxBounds = {
+                top: selectboxState.y + _this.scrollBounds.top + _this.documentScroll.scrollTop,
+                left: selectboxState.x + _this.scrollBounds.left + _this.documentScroll.scrollLeft,
+                width: selectboxState.width,
+                height: selectboxState.height,
+                offsetWidth: selectboxState.width || 1,
+                offsetHeight: selectboxState.height || 1,
+            };
+            _this.selectItems(selectboxBounds);
+            _this.props.duringSelection(__spread(_this.selectingItems));
+            _this.mouseMoveStarted = false;
         };
-        _this.updateSelecting = function () {
-            var selectboxNode = _this.selectbox.getRef();
-            if (!selectboxNode) {
-                return;
-            }
-            var _a = __read(utils_1.getBoundsForNode(selectboxNode), 1), selectboxBounds = _a[0];
-            _this.selectItems(__assign(__assign({}, selectboxBounds), { offsetWidth: selectboxBounds.offsetWidth || 1, offsetHeight: selectboxBounds.offsetHeight || 1 }));
-        };
         _this.selectItems = function (selectboxBounds, options) {
@@ -218,4 +231,2 @@ var e_2, _a;
             var _b = _this.props, tolerance = _b.tolerance, enableDeselect = _b.enableDeselect, mixedDeselect = _b.mixedDeselect;
-            selectboxBounds.top += _this.scrollContainer.scrollTop;
-            selectboxBounds.left += _this.scrollContainer.scrollLeft;
             try {
@@ -230,3 +241,3 @@ for (var _c = __values(_this.registry.values()), _d = _c.next(); !_d.done; _d = _c.next()) {
                         enableDeselect: enableDeselect,
-                        isFromClick: options && options.isFromClick
+                        isFromClick: options && options.isFromClick,
                     });
@@ -265,7 +276,7 @@ }
             var e_4, _a;
-            _this.updateWhiteListNodes();
+            _this.removeIgnoredItemsFromRegistry();
             try {
                 for (var _b = __values(_this.registry.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var item = _c.value;
-                    if (!_this.isInIgnoreList(item.node) && !item.state.isSelected) {
+                    if (!item.state.isSelected) {
                         item.setState({ isSelected: true });
@@ -292,3 +303,3 @@ _this.selectedItems.add(item);
                     allowMetaClick: _this.props.allowMetaClick,
-                    allowShiftClick: _this.props.allowShiftClick
+                    allowShiftClick: _this.props.allowShiftClick,
                 });
@@ -298,3 +309,3 @@ if (_this.mouseDownStarted || _this.props.disabled || isNotLeftButtonClick) {
             }
-            _this.updateWhiteListNodes();
+            _this.removeIgnoredItemsFromRegistry();
             if (_this.isInIgnoreList(e.target)) {
@@ -311,10 +322,10 @@ _this.mouseDownStarted = false;
             if (!_this.props.globalMouse && !utils_1.isNodeInRoot(evt.target, _this.selectableGroup)) {
-                var _a = __read(utils_1.getBoundsForNode(_this.selectableGroup), 1), offsetData = _a[0];
+                var _a = __read(utils_1.getBoundsForNode(_this.selectableGroup, _this.documentScroll), 1), bounds = _a[0];
                 var collides = utils_1.doObjectsCollide({
-                    top: offsetData.top,
-                    left: offsetData.left,
+                    top: bounds.top,
+                    left: bounds.left,
                     width: 0,
                     height: 0,
-                    offsetHeight: offsetData.offsetHeight,
-                    offsetWidth: offsetData.offsetWidth
+                    offsetHeight: bounds.offsetHeight,
+                    offsetWidth: bounds.offsetWidth,
                 }, {
@@ -326,3 +337,3 @@ top: evt.pageY,
                     offsetWidth: 0,
-                    offsetHeight: 0
+                    offsetHeight: 0,
                 });
@@ -337,4 +348,4 @@ if (!collides) {
                 target: evt.target,
-                selectboxY: evt.clientY - _this.scrollBounds.top + _this.scrollContainer.scrollTop,
-                selectboxX: evt.clientX - _this.scrollBounds.left + _this.scrollContainer.scrollLeft
+                selectboxY: evt.clientY - _this.scrollBounds.top + _this.containerScroll.scrollTop,
+                selectboxX: evt.clientX - _this.scrollBounds.left + _this.containerScroll.scrollLeft,
             };
@@ -382,6 +393,7 @@ evt.preventDefault();
                 }
-                _this.selectbox.setState({
-                    isSelecting: false,
+                _this.setSelectboxState({
+                    x: 0,
+                    y: 0,
                     width: 0,
-                    height: 0
+                    height: 0,
                 });
@@ -402,7 +414,7 @@ _this.props.onSelectionFinish(__spread(_this.selectedItems));
         };
-        _this.getSelectboxRef = function (ref) {
-            _this.selectbox = ref;
+        _this.getSelectboxSetState = function (setState) {
+            _this.setSelectboxState = setState;
         };
         _this.defaultContainerStyle = {
-            position: 'relative'
+            position: 'relative',
         };
@@ -415,4 +427,4 @@ _this.contextValue = {
                 clearSelection: _this.clearSelection,
-                getScrolledContainer: function () { return _this.scrollContainer; }
-            }
+                getScrolledContainer: function () { return _this.scrollContainer; },
+            },
         };
@@ -428,2 +440,4 @@ return _this;
         }
+        this.scrollContainer.addEventListener('scroll', this.saveContainerScroll);
+        document.addEventListener('scroll', this.saveDocumentScroll);
         this.selectableGroup.addEventListener('mousedown', this.mouseDown);
@@ -435,4 +449,7 @@ this.selectableGroup.addEventListener('touchstart', this.mouseDown);
         }
+        this.removeIgnoredItemsFromRegistry();
     };
     SelectableGroup.prototype.componentWillUnmount = function () {
+        this.scrollContainer.removeEventListener('scroll', this.saveContainerScroll);
+        document.removeEventListener('scroll', this.saveDocumentScroll);
         this.selectableGroup.removeEventListener('mousedown', this.mouseDown);
@@ -448,2 +465,12 @@ this.selectableGroup.removeEventListener('touchstart', this.mouseDown);
     };
+    Object.defineProperty(SelectableGroup.prototype, "containerDocumentScroll", {
+        get: function () {
+            return {
+                scrollTop: this.containerScroll.scrollTop + this.documentScroll.scrollTop,
+                scrollLeft: this.containerScroll.scrollLeft + this.documentScroll.scrollLeft,
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
     SelectableGroup.prototype.removeTempEventListeners = function () {
@@ -471,5 +498,2 @@ document.removeEventListener('mousemove', this.updateSelectBox);
         var item = options.item, tolerance = options.tolerance, selectboxBounds = options.selectboxBounds, enableDeselect = options.enableDeselect, mixedDeselect = options.mixedDeselect, isFromClick = options.isFromClick;
-        if (this.isInIgnoreList(item.node)) {
-            return null;
-        }
         var delta = this.props.delta;
@@ -524,4 +548,7 @@ var isCollided = utils_1.doObjectsCollide(selectboxBounds, item.bounds, tolerance, delta);
     };
-    SelectableGroup.prototype.updateWhiteListNodes = function () {
+    SelectableGroup.prototype.removeIgnoredItemsFromRegistry = function () {
+        var _this = this;
         this.ignoreListNodes = Array.from(document.querySelectorAll(this.ignoreList.join(', ')));
+        this.registry = new Set(__spread(this.registry).filter(function (item) { return !_this.isInIgnoreList(item.node); }));
+        this.selectedItems = new Set(__spread(this.selectedItems).filter(function (item) { return !_this.isInIgnoreList(item.node); }));
     };
@@ -573,3 +600,3 @@ SelectableGroup.prototype.preventEvent = function (target, type) {
                 offsetWidth: 0,
-                offsetHeight: 0
+                offsetHeight: 0,
             }, { isFromClick: true });
@@ -588,6 +615,6 @@ onSelectionFinish(__spread(this.selectedItems), this.clickedItem);
         var _a = this.props, _b = _a.component, GroupComponent = _b === void 0 ? 'div' : _b, className = _a.className, style = _a.style, selectionModeClass = _a.selectionModeClass, fixedPosition = _a.fixedPosition, selectboxClassName = _a.selectboxClassName, children = _a.children;
-        return (react_1.default.createElement(Context_1.default.Provider, { value: this.contextValue },
+        return (react_1.default.createElement(SelectableGroup_context_1.SelectableGroupContext.Provider, { value: this.contextValue },
             react_1.default.createElement(GroupComponent, { ref: this.getGroupRef, style: __assign(__assign({}, this.defaultContainerStyle), style), className: className + " " + (selectionMode ? selectionModeClass : '') },
-                react_1.default.createElement(Selectbox_1.default, { ref: this.getSelectboxRef, className: selectboxClassName, fixedPosition: fixedPosition }),
-                children)));
+                children,
+                react_1.default.createElement(Selectbox_1.Selectbox, { getSetState: this.getSelectboxSetState, className: selectboxClassName, fixedPosition: fixedPosition }))));
     };
@@ -616,7 +643,7 @@ SelectableGroup.defaultProps = {
         allowShiftClick: false,
-        selectOnClick: true
+        selectOnClick: true,
     };
     return SelectableGroup;
 }(react_1.Component));
-exports.default = SelectableGroup;
+exports.SelectableGroup = SelectableGroup;
 //# sourceMappingURL=SelectableGroup.js.map

lib/SelectAll.d.ts

@@ -1,16 +0,15 @@
-import React, { Component, ReactNode } from 'react';
-import { ReactComponentLike } from 'prop-types';
-declare type TSelectAllButton = {
+import React, { Component, ReactNode, FunctionComponent } from 'react';
+declare type TSelectAllProps = {
     children: ReactNode;
-    component?: ReactComponentLike;
+    component?: string | FunctionComponent;
     className?: string;
     [key: string]: any;
 };
-declare class SelectAllButton extends Component<TSelectAllButton> {
+export declare class SelectAll extends Component<TSelectAllProps> {
     static contextType: React.Context<import("./Selectable.types").TSelectableGroupContext>;
     root: HTMLDivElement | null;
     componentDidMount(): void;
-    getRootRef: (ref: import("./utils").Maybe<HTMLDivElement>) => void;
+    getRootRef: (ref: HTMLDivElement | null) => void;
     render(): JSX.Element;
 }
-export default SelectAllButton;
+export {};

lib/SelectAll.js

@@ -44,11 +44,8 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var Context_1 = __importDefault(require("./Context"));
-var SelectAllButton = (function (_super) {
-    __extends(SelectAllButton, _super);
-    function SelectAllButton() {
+var SelectableGroup_context_1 = require("./SelectableGroup.context");
+var SelectAll = (function (_super) {
+    __extends(SelectAll, _super);
+    function SelectAll() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -61,13 +58,14 @@ _this.root = null;
     }
-    SelectAllButton.prototype.componentDidMount = function () {
+    SelectAll.prototype.componentDidMount = function () {
         this.root.addEventListener('mousedown', function (evt) { return evt.stopPropagation(); });
     };
-    SelectAllButton.prototype.render = function () {
-        var _a = this.props, _b = _a.component, ButtonComponent = _b === void 0 ? 'div' : _b, children = _a.children, _c = _a.className, className = _c === void 0 ? '' : _c, rest = __rest(_a, ["component", "children", "className"]);
+    SelectAll.prototype.render = function () {
+        var _a = this.props, _b = _a.component, component = _b === void 0 ? 'div' : _b, children = _a.children, _c = _a.className, className = _c === void 0 ? '' : _c, rest = __rest(_a, ["component", "children", "className"]);
+        var ButtonComponent = component;
         return (react_1.default.createElement(ButtonComponent, __assign({ ref: this.getRootRef, className: "selectable-select-all " + className, onClick: this.context.selectable.selectAll }, rest), children));
     };
-    SelectAllButton.contextType = Context_1.default;
-    return SelectAllButton;
+    SelectAll.contextType = SelectableGroup_context_1.SelectableGroupContext;
+    return SelectAll;
 }(react_1.Component));
-exports.default = SelectAllButton;
+exports.SelectAll = SelectAll;
 //# sourceMappingURL=SelectAll.js.map

lib/Selectbox.d.ts

@@ -1,22 +0,19 @@
-import { Component } from 'react';
-declare type TSelectboxProps = {
+import React from 'react';
+export declare type TSetSelectboxState = React.Dispatch<React.SetStateAction<TSelectboxState>>;
+export declare type TSelectboxProps = {
     fixedPosition: boolean;
     className: string;
+    getSetState(setState: TSetSelectboxState): void;
 };
-declare class Selectbox extends Component<TSelectboxProps> {
-    static defaultProps: {
+export declare type TSelectboxState = {
+    y: number;
+    x: number;
+    width: number;
+    height: number;
+};
+export declare function Selectbox(props: TSelectboxProps): JSX.Element;
+export declare namespace Selectbox {
+    var defaultProps: {
         className: string;
     };
-    state: {
-        y: number;
-        x: number;
-        width: number;
-        height: number;
-        isSelecting: boolean;
-    };
-    selectbox: HTMLDivElement | null;
-    getRef: () => import("./utils").Maybe<HTMLDivElement>;
-    getSelectboxRef: (ref: import("./utils").Maybe<HTMLDivElement>) => void;
-    render(): JSX.Element;
 }
-export default Selectbox;

lib/Selectbox.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importStar = (this && this.__importStar) || function (mod) {
@@ -24,39 +27,31 @@ if (mod && mod.__esModule) return mod;
 var react_1 = __importStar(require("react"));
-var Selectbox = (function (_super) {
-    __extends(Selectbox, _super);
-    function Selectbox() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            y: 0,
-            x: 0,
-            width: 0,
-            height: 0,
-            isSelecting: false
-        };
-        _this.selectbox = null;
-        _this.getRef = function () { return _this.selectbox; };
-        _this.getSelectboxRef = function (ref) {
-            _this.selectbox = ref;
-        };
-        return _this;
-    }
-    Selectbox.prototype.render = function () {
-        var _a = this.props, fixedPosition = _a.fixedPosition, className = _a.className;
-        var boxStyle = {
-            left: this.state.x,
-            top: this.state.y,
-            width: this.state.width,
-            height: this.state.height,
-            zIndex: 9000,
-            position: fixedPosition ? 'fixed' : 'absolute',
-            cursor: 'default'
-        };
-        return (react_1.default.createElement("div", null, this.state.isSelecting && (react_1.default.createElement("div", { ref: this.getSelectboxRef, style: boxStyle, className: className }))));
+var initialState = {
+    y: 0,
+    x: 0,
+    width: 0,
+    height: 0,
+};
+function Selectbox(props) {
+    var fixedPosition = props.fixedPosition, getSetState = props.getSetState, className = props.className;
+    var _a = __read(react_1.useState(initialState), 2), state = _a[0], setState = _a[1];
+    react_1.useEffect(function () {
+        getSetState(setState);
+    }, []);
+    var boxStyle = {
+        left: state.x,
+        top: state.y,
+        width: state.width,
+        height: state.height,
+        zIndex: 9000,
+        position: fixedPosition ? 'fixed' : 'absolute',
+        cursor: 'default',
+        willChange: 'transform',
+        transform: 'translateZ(0)',
     };
-    Selectbox.defaultProps = {
-        className: 'selectable-selectbox'
-    };
-    return Selectbox;
-}(react_1.Component));
-exports.default = Selectbox;
+    return react_1.default.createElement("div", { className: className, style: boxStyle });
+}
+exports.Selectbox = Selectbox;
+Selectbox.defaultProps = {
+    className: 'selectable-selectbox',
+};
 //# sourceMappingURL=Selectbox.js.map

lib/utils/doObjectsCollide.d.ts

 import { TComputedBounds } from './getBoundsForNode';
-export declare function doObjectsCollide(a: HTMLElement | TComputedBounds | TComputedBounds[], b: HTMLElement | TComputedBounds | TComputedBounds[], tolerance?: number, delta?: number): boolean | undefined;
+export declare function doObjectsCollide(a: TComputedBounds | TComputedBounds[], b: TComputedBounds | TComputedBounds[], tolerance?: number, delta?: number): boolean | undefined;

lib/utils/doObjectsCollide.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var getBoundsForNode_1 = require("./getBoundsForNode");
 var areBoundsCollide = function (a, b, _a) {
@@ -24,4 +23,4 @@ var _b = _a.tolerance, tolerance = _b === void 0 ? 0 : _b, _c = _a.useOffsetSize, useOffsetSize = _c === void 0 ? false : _c;
     if (delta === void 0) { delta = 1; }
-    var aBounds = a instanceof HTMLElement ? getBoundsForNode_1.getBoundsForNode(a) : toArray(a);
-    var bBounds = b instanceof HTMLElement ? getBoundsForNode_1.getBoundsForNode(b) : toArray(b);
+    var aBounds = toArray(a);
+    var bBounds = toArray(b);
     for (var i = 0; i < aBounds.length; i++) {
@@ -28,0 +27,0 @@ for (var j = 0; j < bBounds.length; j++) {

lib/utils/getBoundsForNode.js

@@ -12,10 +12,9 @@ "use strict";
     var scrollTop = containerScroll.scrollTop, scrollLeft = containerScroll.scrollLeft;
-    var _a = getDocumentScroll(), documentScrollTop = _a.documentScrollTop, documentScrollLeft = _a.documentScrollLeft;
     return Array.from(node.getClientRects()).map(function (rect) { return ({
-        top: rect.top + documentScrollTop + scrollTop,
-        left: rect.left + documentScrollLeft + scrollLeft,
+        top: rect.top + scrollTop,
+        left: rect.left + scrollLeft,
         offsetWidth: node.offsetWidth,
         offsetHeight: node.offsetHeight,
         width: rect.width,
-        height: rect.height
+        height: rect.height,
     }); });
@@ -22,0 +21,0 @@ }

package.json

 {
   "name": "react-selectable-fast",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Enable other React components to be selectable by drawing a box with your mouse/touch",
@@ -17,3 +17,3 @@ "repository": {
     "prepublishOnly": "yarn lint && yarn clean && yarn build:prod && yarn transpile",
-    "prettier": "prettier --write src/**/*.{js,ts,tsx} example/src/**/*.{js,ts,tsx} .js",
+    "prettier": "prettier --write src/**/*.{ts,tsx} example/src/**/*.{ts,tsx}",
     "lint:basic": "tsc --pretty --noEmit && eslint --fix --format codeframe",
@@ -74,33 +74,31 @@ "lint": "yarn lint:basic '{example/,}src/**/*.{ts,tsx}'",
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.8.3",
-    "@types/react": "^16.9.22",
-    "@types/react-dom": "^16.9.5",
-    "@typescript-eslint/eslint-plugin": "^2.17.0",
-    "@typescript-eslint/parser": "^2.17.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "cross-env": "^7.0.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@types/react": "^16.9.6",
+    "@types/react-dom": "^16.9.6",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "babel-loader": "^8.1.0",
+    "cross-env": "^7.0.2",
     "eslint": "6.8.0",
-    "eslint-config-airbnb": "18.0.1",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-config-airbnb": "18.1.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^2.2.0",
-    "husky": "^4.2.3",
-    "lint-staged": "^10.0.7",
-    "prettier": "^1.18.2",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "release-it": "^12.6.1",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.1.3",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "release-it": "^13.5.2",
     "rimraf": "^3.0.2",
-    "typescript": "^3.8.2",
-    "webpack": "^4.41.6",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.1",
+    "webpack-bundle-analyzer": "^3.6.1",
     "webpack-cli": "^3.3.11",
@@ -107,0 +105,0 @@ "webpack-dev-server": "^3.10.3"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

32

decreased by-5.88%

Worsened metrics

Total package byte prevSize

180739

decreased by-0.29%

Lines of code

1446

decreased by-3.79%

No dependency changes