react-table-dnd 2.0.0

package/dist/index.cjs.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require(`react`);l=c(l);let u=require(`react/jsx-runtime`),d=require(`react-dom`),f=require(`classnames`);f=c(f);var p=({children:e,className:t})=>(0,u.jsx)(`div`,{"data-flexitable-root":``,className:t??``,children:e}),m=o((e=>{var t=require(`react`);function n(e,t){return e===t&&(e!==0||1/e==1/t)||e!==e&&t!==t}var r=typeof Object.is==`function`?Object.is:n,i=t.useState,a=t.useEffect,o=t.useLayoutEffect,s=t.useDebugValue;function c(e,t){var n=t(),r=i({inst:{value:n,getSnapshot:t}}),c=r[0].inst,u=r[1];return o(function(){c.value=n,c.getSnapshot=t,l(c)&&u({inst:c})},[e,n,t]),a(function(){return l(c)&&u({inst:c}),e(function(){l(c)&&u({inst:c})})},[e]),s(n),n}function l(e){var t=e.getSnapshot;e=e.value;try{var n=t();return!r(e,n)}catch{return!0}}function u(e,t){return t()}var d=typeof window>`u`||window.document===void 0||window.document.createElement===void 0?u:c;e.useSyncExternalStore=t.useSyncExternalStore===void 0?d:t.useSyncExternalStore})),h=o((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e,t){return e===t&&(e!==0||1/e==1/t)||e!==e&&t!==t}function n(e,t){d||a.startTransition===void 0||(d=!0,console.error(`You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release.`));var n=t();if(!f){var i=t();o(n,i)||(console.error(`The result of getSnapshot should be cached to avoid an infinite loop`),f=!0)}i=s({inst:{value:n,getSnapshot:t}});var p=i[0].inst,m=i[1];return l(function(){p.value=n,p.getSnapshot=t,r(p)&&m({inst:p})},[e,n,t]),c(function(){return r(p)&&m({inst:p}),e(function(){r(p)&&m({inst:p})})},[e]),u(n),n}function r(e){var t=e.getSnapshot;e=e.value;try{var n=t();return!o(e,n)}catch{return!0}}function i(e,t){return t()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<`u`&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart==`function`&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var a=require(`react`),o=typeof Object.is==`function`?Object.is:t,s=a.useState,c=a.useEffect,l=a.useLayoutEffect,u=a.useDebugValue,d=!1,f=!1,p=typeof window>`u`||window.document===void 0||window.document.createElement===void 0?i:n;e.useSyncExternalStore=a.useSyncExternalStore===void 0?p:a.useSyncExternalStore,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<`u`&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop==`function`&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())})()})),g=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=m():t.exports=h()}))(),_=(0,l.createContext)(null),v=e=>{let t=(0,l.useContext)(_);if(!t)throw Error(`useTableStore must be used within TableProvider`);return(0,g.useSyncExternalStore)(t.subscribe,()=>e(t.getState()))},y=()=>{let e=(0,l.useContext)(_);if(!e)throw Error(`useTableDispatch must be used within TableProvider`);return e.dispatch},b=()=>{let e=(0,l.useContext)(_);if(!e)throw Error(`useTable must be used within a TableProvider`);return{state:(0,g.useSyncExternalStore)(e.subscribe,e.getState),dispatch:e.dispatch}};function x(e,t){let n=t,r=new Set;return{getState:()=>n,dispatch(t){n=e(n,t),r.forEach(e=>e())},subscribe(e){return r.add(e),()=>{r.delete(e)}}}}var S=30,C=e=>{let{headerRef:t,bodyRef:n}=e,r=(0,l.useRef)(null),i=(0,l.useRef)(t),a=(0,l.useRef)(!1),o=(0,l.useRef)(!1),s=(0,l.useRef)(0),c=(0,l.useRef)(null),u=(0,l.useRef)({x:0,y:0}),d=(0,l.useRef)(null),f=(0,l.useCallback)(e=>{d.current=e},[]),p=(0,l.useCallback)(()=>{o.current=!1,a.current=!1,c.current!==null&&(cancelAnimationFrame(c.current),c.current=null)},[]),m=(0,l.useCallback)((e,t,n)=>{let l=n===`vertical`,f=l?o:a;if(!f.current)return;let p=d.current;if(p){let e=u.current;if(l){let t=e.y<p.top+S,n=e.y>p.bottom-S;if(!t&&!n){f.current=!1;return}}else{let t=e.x<p.left+S,n=e.x>p.right-S;if(!t&&!n){f.current=!1;return}}}let m=l?t.scrollHeight-t.clientHeight:t.scrollWidth-t.clientWidth;if(l)t.scrollTop+=e;else{t.scrollLeft+=e;let n=i.current;n?.current&&(n.current.scrollLeft=t.scrollLeft)}let h=l?t.scrollTop:t.scrollLeft;if(h>=m||h<=0){f.current=!1;return}s.current+=e/1e3,c.current=requestAnimationFrame(()=>r.current?.(e+s.current,t,n))},[]);return(0,l.useEffect)(()=>{r.current=m},[m]),{startAutoScroll:(0,l.useCallback)((e,t,n)=>{let r=n===`vertical`?o:a;r.current||(r.current=!0,s.current=0,c.current=requestAnimationFrame(()=>m(e,t,n)))},[m]),stopAutoScroll:p,setContainerRect:f,isAutoScrollingVertical:o,isAutoScrollingHorizontal:a,pointerRef:u,BodyScrollHandle:(0,l.useCallback)(e=>{t?.current&&e.currentTarget&&(t.current.scrollLeft=e.currentTarget.scrollLeft)},[t]),HeaderScrollHandle:(0,l.useCallback)(e=>{n?.current&&e.currentTarget&&(n.current.scrollLeft=e.currentTarget.scrollLeft)},[n])}},w=300,T=8,E=.92,D=.5;function O(e,t,n,r){let i=(0,l.useRef)(null),a=(0,l.useRef)({x:0,y:0}),o=(0,l.useRef)(null),s=(0,l.useRef)(!1),c=(0,l.useRef)(null),u=(0,l.useRef)(null),d=(0,l.useCallback)(()=>{u.current!==null&&(cancelAnimationFrame(u.current),u.current=null)},[]),f=(0,l.useCallback)(()=>{i.current&&=(clearTimeout(i.current),null),o.current=null,c.current&&=(c.current(),null)},[]);return{touchStart:(0,l.useCallback)(l=>{if(l.target===l.currentTarget)return;let p=l.target,m=!1;for(;p&&!(p.dataset?.contextid||p.dataset?.disabled===`true`);){if(p.dataset?.id){m=!0;break}p=p.parentNode}if(!m)return;d(),f(),s.current=!0,window.getSelection()?.removeAllRanges();let h=l.touches[0];a.current={x:h.clientX,y:h.clientY},o.current=l;let g=e.tableRef?.current;if(!g)return;let _=!1,v=!1,y=h.clientY,b=h.clientX,x=0,S=0,C=Date.now(),O=e=>e.preventDefault();document.addEventListener(`selectstart`,O);let k=(t=>{let n=e.bodyRef?.current,r=t;for(;r&&r!==n;){let e=window.getComputedStyle(r),t=e.overflowY,n=e.overflowX,i=(t===`auto`||t===`scroll`)&&r.scrollHeight>r.clientHeight,a=(n===`auto`||n===`scroll`)&&r.scrollWidth>r.clientWidth;if(i||a)return r;r=r.parentElement}return n??document.body})(l.target),A=t=>{t.preventDefault();let n=t.touches[0],s=Date.now(),c=Math.max(s-C,1);if(C=s,v){let t=n.clientY-y,r=n.clientX-b;if(k){let n=e.bodyRef?.current,i=t>0&&k.scrollTop<=0,a=t<0&&k.scrollTop+k.clientHeight>=k.scrollHeight-1,o=r>0&&k.scrollLeft<=0,s=r<0&&k.scrollLeft+k.clientWidth>=k.scrollWidth-1,c=i||a,l=o||s;k===n?(k.scrollTop-=t,k.scrollLeft-=r):(l||(k.scrollLeft-=r),c||(k.scrollTop-=t),n&&(c&&(n.scrollTop-=t),l&&(n.scrollLeft-=r)))}x=-t/c*16,S=-r/c*16,y=n.clientY,b=n.clientX}else if(_)r(n.clientX,n.clientY);else{let e=n.clientX-a.current.x,t=n.clientY-a.current.y;(Math.abs(e)>T||Math.abs(t)>T)&&(i.current&&=(clearTimeout(i.current),null),o.current=null,v=!0,y=n.clientY,b=n.clientX,x=0,S=0,C=Date.now())}},j=()=>{if(_)M(),n();else{if(f(),v&&k&&(Math.abs(x)>D||Math.abs(S)>D)){let e=k,t=()=>{x*=E,S*=E,e.scrollTop+=x,e.scrollLeft+=S,Math.abs(x)>D||Math.abs(S)>D?u.current=requestAnimationFrame(t):u.current=null};u.current=requestAnimationFrame(t)}setTimeout(()=>{s.current=!1},400)}},M=()=>{g.removeEventListener(`touchmove`,A),g.removeEventListener(`touchend`,j),g.removeEventListener(`touchcancel`,j),document.removeEventListener(`selectstart`,O),c.current=null};g.addEventListener(`touchmove`,A,{passive:!1}),g.addEventListener(`touchend`,j,!1),g.addEventListener(`touchcancel`,j,!1),c.current=M,i.current=setTimeout(()=>{i.current=null,_=!0;let e=o.current;o.current=null,e&&t(e,h.clientX,h.clientY)},w)},[t,n,r,f,d,e.tableRef?.current,e.bodyRef?.current]),cancelLongPress:f,isTouchActiveRef:s}}var k=`transform 450ms cubic-bezier(0.2, 0, 0, 1)`,A=(e,t,n,r)=>{let i=(0,l.useRef)({width:0,height:0}),a=(0,l.useRef)(null),o=(0,l.useRef)(new Set),s=(0,l.useRef)(new Set),c=(0,l.useRef)(new Map),u=(0,l.useCallback)((t,n,r,a)=>{let o=e.placeholderRef?.current;if(!o||!t){o&&(o.style.display=`none`);return}let s=i.current,c=t.getBoundingClientRect(),l=e.tableRef?.current?.getBoundingClientRect(),u=(n??0)<(r??0);o.style.display=`block`,a===`row`?(o.style.top=`${u?c.top+c.height-s.height:c.top}px`,o.style.left=`${l?.left??c.left}px`,o.style.width=`${l?.width??c.width}px`,o.style.height=`${s.height}px`):(o.style.top=`${l?.top??c.top}px`,o.style.left=`${u?c.left+c.width-s.width:c.left}px`,o.style.width=`${s.width}px`,o.style.height=`${l?.height??c.height}px`)},[e.placeholderRef,e.tableRef]);return{applyShiftTransforms:(0,l.useCallback)((e,l,d)=>{if(e===null||l===null)return;let f=i.current,p=a.current,m=p===null,h=m?-1/0:Math.min(p,l,e)-1,g=m?1/0:Math.max(p,l,e)+1,_=null,v=(d===`row`?t.current:n.current).get(l);v&&(_=v.outer),u(_,e,l,d);let y=(t,n,r)=>{let i=(t,i,a)=>{let s=``;t>e&&t<=l?s=`translate${n}(-${r}px)`:t<e&&t>=l&&(s=`translate${n}(${r}px)`),a.style.transform=s,a.style.transition=t===e?`none`:k,s&&o.current.add(a),t===l?i.setAttribute(`data-drop-target`,`true`):i.removeAttribute(`data-drop-target`)};if(m)for(let[e,{outer:n,inner:r}]of t)i(e,n,r);else for(let e=h;e<=g;e++){let n=t.get(e);n&&i(e,n.outer,n.inner)}};if(d===`row`)y(t.current,`Y`,f.height);else if(d===`column`){y(n.current,`X`,f.width);let t=r.current,i=c.current,a=(t,n,r)=>{let a=``;t>e&&t<=l?a=`translateX(-${f.width}px)`:t<e&&t>=l&&(a=`translateX(${f.width}px)`);for(let e of n)i.get(e)!==a&&(e.style.transform=a,r&&(e.style.transition=k),i.set(e,a),a&&s.current.add(e))};if(m)for(let[e,n]of t)a(e,n,!0);else for(let e=h;e<=g;e++){let n=t.get(e);n&&a(e,n,!1)}}a.current=l},[u,t,n,r]),clearShiftTransforms:(0,l.useCallback)(()=>{let t=e.placeholderRef?.current;t&&(t.style.display=`none`);for(let e of o.current){e.style.transition=`none`,e.style.transform=``;let t=e.parentElement;t&&t.removeAttribute(`data-drop-target`)}o.current.clear();for(let e of s.current)e.style.transition=`none`,e.style.transform=``;s.current.clear(),c.current.clear(),a.current=null},[e.placeholderRef]),prevTargetIndexRef:a,draggedSizeRef:i}},j=e=>{let t=(0,l.useRef)(new Map),n=(0,l.useRef)(new Map),r=(0,l.useRef)(new Map),i=(0,l.useRef)(!1),a=(0,l.useCallback)(()=>{t.current.clear(),n.current.clear(),r.current.clear()},[]),o=(0,l.useCallback)(e=>{t.current.clear();let n=e.querySelectorAll(`.draggable[data-type="row"]`);for(let e=0;e<n.length;e++){let r=n[e],i=r.dataset.index;if(i===void 0)continue;let a=r.firstElementChild;a&&t.current.set(+i,{outer:r,inner:a})}},[]),s=(0,l.useCallback)(e=>{n.current.clear();let t=e.querySelectorAll(`.draggable[data-type="column"]`);for(let e=0;e<t.length;e++){let r=t[e],i=r.dataset.index;if(i===void 0)continue;let a=r.firstElementChild;a&&n.current.set(+i,{outer:r,inner:a})}},[]),c=(0,l.useCallback)(e=>{r.current.clear();let t=e.querySelectorAll(`.td[data-col-index]`);for(let e=0;e<t.length;e++){let n=t[e],i=+n.dataset.colIndex;r.current.has(i)||r.current.set(i,[]),r.current.get(i).push(n)}},[]);return{rowIndexMapRef:t,colIndexMapRef:n,cellIndexMapRef:r,mapStaleRef:i,buildMaps:(0,l.useCallback)((t,n)=>{if(a(),n){if(t===`row`)o(n);else if(t===`column`){let t=e.headerRef?.current;t&&s(t),c(n)}}},[e.headerRef,a,o,s,c]),rebuildRowMap:(0,l.useCallback)(e=>{i.current=!1,o(e)},[o]),rebuildColumnMaps:(0,l.useCallback)((e,t)=>{i.current=!1,t&&s(t),c(e)},[s,c]),checkStaleness:(0,l.useCallback)(()=>{if(!i.current){if(t.current.size>0){let e=t.current.values().next().value;if(e&&!e.outer.isConnected){i.current=!0;return}}if(n.current.size>0){let e=n.current.values().next().value;e&&!e.outer.isConnected&&(i.current=!0)}}},[]),clearMaps:a}},M=(e,t)=>{let n=e,r=0,i=t.length-1;for(;r<i;){let e=Math.floor((r+i)/2),a=t[e];if(a.itemTop<=n&&n<=a.itemBottom)return n<a.itemTop+a.height/2?+a.index:+a.index+1;n<a.itemTop?i=e-1:r=e+1}return+t[r].index},N=(e,t)=>{let n=e,r=0,i=t.length-1;for(;r<i;){let e=Math.floor((r+i)/2),a=t[e];if(a.itemLeft<=n&&n<=a.itemRight)return n<a.itemLeft+a.width/2?+a.index:+a.index+1;n<a.itemLeft?i=e-1:r=e+1}return+t[r].index};function ee(e,t,n){let r=n.getBoundingClientRect();return e>r.left+n.clientWidth||t>r.top+n.clientHeight}var P=(e,t,n)=>{let r=Number(e);return t!==void 0&&r<t||n!==void 0&&r>n},te=(e,t)=>{let n=(0,l.useRef)(null),r=(0,l.useRef)(null),i=(0,l.useCallback)(()=>{let n=e.bodyRef?.current;if(!n)return null;let r=n.scrollTop,i=n.getBoundingClientRect().top,a=n.querySelectorAll(`.draggable[data-type="row"]`),o=[];for(let e=0;e<a.length;e++){let t=a[e];if(t.dataset.index===void 0)continue;let n=t.getBoundingClientRect(),s=n.top-i+r;o.push({height:n.height,itemTop:s,itemBottom:s+n.height,index:t.dataset.index})}let{start:s,end:c}=t.rowDragRange;return(s||c)&&(o=o.filter(e=>(!s||+e.index>=s)&&(!c||+e.index<=c))),o},[e.bodyRef,t.rowDragRange]),a=(0,l.useCallback)(()=>{let n=e.headerRef?.current;if(!n||!n.children[0])return null;let r=Array.from(n.children[0].children).map(e=>{let t=e.getBoundingClientRect();return{left:t.left,width:t.width,itemLeft:t.left,itemRight:t.left+t.width,index:e.dataset.index}}).filter(e=>e.index!==void 0),{start:i,end:a}=t.columnDragRange??{};return(i!==void 0||a!==void 0)&&(r=r.filter(e=>{let t=+e.index;return(i===void 0||t>=i)&&(a===void 0||t<=a)})),r},[e.headerRef,t.columnDragRange]);return{computeRowItems:i,computeColumnItems:a,resolveDropIndex:(0,l.useCallback)((e,t,r,o,s,c,l)=>{let u;if(r===`row`){if(u=n.current,u||(u=i(),n.current=u),u&&u.length>0)return M(t-c.y+l.height/2-o.top+s,u)}else if(u=n.current,u||(u=a(),n.current=u),u&&u.length>0)return N(e-c.x+l.width/2,u);return 0},[i,a]),cachedItemsRef:n,cachedContainerRef:r}},F=200,I=30,L=5;function ne(e){let t=e,n=!1;for(;t;){if(t.dataset?.dragHandle===`true`&&(n=!0),t.dataset?.contextid||t.dataset?.disabled===`true`)return null;if(t.dataset?.id)return{element:t,foundHandle:n};t=t.parentNode}return null}var R=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,setContainerRect:c,pointerRef:u,isAutoScrollingVertical:f,isAutoScrollingHorizontal:p}=C(e),m=j(e),{rowIndexMapRef:h,colIndexMapRef:g,cellIndexMapRef:_,mapStaleRef:v}=m,{applyShiftTransforms:y,clearShiftTransforms:b,prevTargetIndexRef:x,draggedSizeRef:S}=A(e,h,g,_),w=te(e,i),{resolveDropIndex:T,cachedItemsRef:E,cachedContainerRef:D}=w,k=(0,l.useRef)(null),M=(0,l.useRef)({x:0,y:0}),N=(0,l.useRef)(null),P=(0,l.useRef)(null),R=(0,l.useRef)(!1),z=(0,l.useRef)(!1),B=(0,l.useRef)(null),V=(0,l.useRef)(null),H=(0,l.useRef)([]),U=(0,l.useCallback)((t,r,i)=>{let a=ne(t.target);if(!a)return;let{element:o,foundHandle:s}=a;if(!s&&o.querySelector(`[data-drag-handle]`))return;let l=o.dataset.id,d=+o.dataset.index,f=o.dataset.type;k.current=f??null,N.current=d,P.current=null,B.current=null,H.current=[],x.current=null,R.current=!1;let p=f===`row`?e.bodyRef?.current?.scrollLeft??0:0,h=o.getBoundingClientRect();S.current={width:h.width,height:h.height};let g={x:r-h.left-p,y:i-h.top};M.current=g,u.current={x:r,y:i};let _={x:h.left+p,y:h.top};E.current=f===`row`?w.computeRowItems():w.computeColumnItems();let v=e.bodyRef?.current;v&&(D.current=v.getBoundingClientRect(),c(D.current)),m.buildMaps(f,v??null);let y=e.tableRef?.current;y&&(y.style.touchAction=`none`);let b=o.firstElementChild;b&&(b.style.opacity=`0`,b.style.pointerEvents=`none`,b.style.zIndex=`2`,b.style.cursor=`-webkit-grabbing`),V.current=b;let C=e.cloneRef?.current;if(C){if(C.innerHTML=``,C.style.transform=`translate(${_.x}px, ${_.y}px)`,z.current=(v?.querySelector(`[data-type="row"]`))?.style.position===`absolute`,f===`row`){let e=o.firstElementChild?.firstElementChild;e&&C.appendChild(e.cloneNode(!0))}else if(f===`column`&&v){let e=String(d),t=o.querySelector(`.th`);if(t){let e=document.createElement(`div`);e.style.flexShrink=`0`,e.style.order=`-1`,e.appendChild(t.cloneNode(!0)),C.appendChild(e)}let n=document.createElement(`div`);n.style.flex=`1`;let r=document.createElement(`div`);r.className=`rbody`,r.style.height=`${v.scrollHeight}px`,r.style.position=`relative`,v.querySelectorAll(`[data-type="row"]`).forEach(t=>{let n=t.cloneNode(!0);if(z.current){let t=n.querySelector(`.tr`);if(t){let n=t.querySelector(`[data-col-index="${e}"]`);for(;t.firstChild;)t.removeChild(t.firstChild);n&&t.appendChild(n)}}else n.querySelectorAll(`[data-col-index]`).forEach(t=>{t.getAttribute(`data-col-index`)!==e&&t.remove()});r.appendChild(n)}),n.appendChild(r),z.current?(n.style.overflow=`auto`,n.style.scrollbarWidth=`none`,n.className=`clone-body-strip`):n.style.overflow=`hidden`,C.appendChild(n),B.current=n,H.current=[],v.querySelectorAll(`[data-col-index="${e}"]`).forEach(e=>{e.style.opacity=`0`,H.current.push(e)})}}n({type:`dragStart`,value:{rect:{draggedItemHeight:h.height,draggedItemWidth:h.width},dragged:{initial:g,translate:_,draggedID:l??null,isDragging:!0,sourceIndex:d},dragType:f??null,tableDimensions:{height:(e.tableRef?.current?.offsetHeight??0)-(v?v.offsetHeight-v.clientHeight:0),width:(e.tableRef?.current?.offsetWidth??0)-(v?v.offsetWidth-v.clientWidth:0)}}});let T=v?.scrollLeft??0,O=v?.scrollTop??0;requestAnimationFrame(()=>{let t=e.cloneRef?.current;t&&(f===`row`?t.scrollLeft=T:B.current&&(B.current.scrollTop=O))})},[n,e,u,c,w,m,E,D,S,x]),W=(0,l.useCallback)((t,r,i,o,s)=>{let c=e.cloneRef?.current;c&&(c.style.visibility=`hidden`),V.current&&=(V.current.style.opacity=``,V.current.style.pointerEvents=``,V.current.style.zIndex=``,V.current.style.cursor=``,null),H.current.forEach(e=>{e.style.opacity=``}),H.current=[];let l=e.tableRef?.current;l&&(l.style.touchAction=``),(0,d.flushSync)(()=>{a&&t!==null&&r!==null&&(i===`row`||i===`column`)&&a({sourceIndex:t,targetIndex:r,dragType:i}),n({type:`dragEnd`,value:{targetIndex:r,sourceIndex:t}})}),b();let u=e.bodyRef?.current;u&&(u.scrollTop=o,u.scrollLeft=s,requestAnimationFrame(()=>{u.scrollTop=o,u.scrollLeft=s}))},[n,e.bodyRef,e.cloneRef,e.tableRef,b,a]),G=(0,l.useCallback)(()=>{if(R.current)return;R.current=!0,J(),setTimeout(()=>{Y.current=!1},400);let t=P.current,n=N.current,r=k.current,i=e.bodyRef?.current,a=i?.scrollTop??0,o=i?.scrollLeft??0;E.current=null,D.current=null,s(),k.current=null,N.current=null,P.current=null;let c=e.cloneRef?.current,l=e.placeholderRef?.current;if(c&&l&&l.style.display!==`none`){let e=parseFloat(l.style.left)||0,i=parseFloat(l.style.top)||0;c.style.transition=`transform ${F}ms cubic-bezier(0.2, 0, 0, 1)`,c.style.transform=`translate(${e}px, ${i}px)`,setTimeout(()=>W(n,t,r,a,o),F)}else W(n,t,r,a,o)},[s,e.bodyRef,e.placeholderRef,e.cloneRef,W]),K=(0,l.useRef)(()=>{}),{touchStart:q,cancelLongPress:J,isTouchActiveRef:Y}=O(e,U,G,(e,t)=>K.current(e,t)),X=(0,l.useCallback)(e=>{e.button===0&&e.target!==e.currentTarget&&(Y.current||ee(e.clientX,e.clientY,e.target)||U(e,e.clientX,e.clientY))},[U,Y]),Z=(0,l.useCallback)((t,n)=>{if(R.current)return;let i=M.current;u.current.x=t,u.current.y=n;let a=e.bodyRef?.current;if(!a)return;let c=D.current;(!c||v.current)&&(c=a.getBoundingClientRect(),D.current=c);let l=a.scrollLeft,d=a.scrollTop,h=e.cloneRef?.current;h&&(h.style.transform=`translate(${t-i.x}px, ${n-i.y}px)`,k.current===`row`?h.scrollLeft=l:B.current&&(B.current.scrollTop=d));let g=k.current||r;if(z.current&&m.checkStaleness(),v.current&&(E.current=null,P.current=null,x.current=null,z.current?g===`row`?m.rebuildRowMap(a):m.rebuildColumnMaps(a,e.headerRef?.current??null):v.current=!1),g===`row`)if(n<c.top+I)o(-L,a,`vertical`),v.current=!0;else if(n>c.bottom-I)o(L,a,`vertical`),v.current=!0;else{let t=f.current;s(),t&&requestAnimationFrame(()=>{let t=e.bodyRef?.current;if(!t)return;z.current&&m.rebuildRowMap(t),E.current=null;let n=t.getBoundingClientRect();D.current=n;let r=T(u.current.x,u.current.y,`row`,n,t.scrollTop,M.current,S.current);P.current=r,x.current=null,y(N.current,r,`row`)})}else if(t<c.left+I)o(-L,a,`horizontal`),v.current=!0;else if(t>c.right-I)o(L,a,`horizontal`),v.current=!0;else{let t=p.current;s(),t&&requestAnimationFrame(()=>{let t=e.bodyRef?.current;if(!t)return;z.current&&m.rebuildColumnMaps(t,e.headerRef?.current??null),E.current=null;let n=t.getBoundingClientRect();D.current=n;let r=T(u.current.x,u.current.y,`column`,n,t.scrollTop,M.current,S.current);P.current=r,x.current=null,y(N.current,r,`column`)})}let _=T(t,n,g,c,d,i,S.current);_!==P.current&&(P.current=_,requestAnimationFrame(()=>y(N.current,_,g)))},[u,e.bodyRef,e.cloneRef,e.headerRef,r,o,s,f,p,m,T,y,E,D,v,x,S]);K.current=Z;let Q=(0,l.useCallback)(()=>{J(),E.current=null,D.current=null;let t=e.cloneRef?.current;t&&(t.style.visibility=`hidden`);let r=e.tableRef?.current;r&&(r.style.touchAction=``),n({type:`dragEnd`,value:{targetIndex:null,sourceIndex:null}}),s(),b(),k.current=null,N.current=null,P.current=null},[J,E,D,e.cloneRef,e.tableRef,n,s,b]);return(0,l.useLayoutEffect)(()=>{if(!t.isDragging){b();let t=e.cloneRef?.current;t&&(t.style.transition=``,t.style.transform=`translate(0px, 0px)`,t.style.visibility=``,t.scrollLeft=0,t.innerHTML=``)}},[t.isDragging,b,e.cloneRef]),(0,l.useEffect)(()=>{if(!t.isDragging)return;let e=0,n=0,r=!1,i=t=>{e=t.clientX,n=t.clientY,r||(r=!0,requestAnimationFrame(()=>{r=!1,Z(e,n)}))},a=()=>G(),o=e=>{e.key===`Escape`&&Q()};return window.addEventListener(`pointermove`,i),window.addEventListener(`pointerup`,a),window.addEventListener(`pointercancel`,a),window.addEventListener(`keydown`,o),()=>{window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,a),window.removeEventListener(`pointercancel`,a),window.removeEventListener(`keydown`,o)}},[t.isDragging,Z,G,Q]),{dragStart:X,touchStart:q}},z={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function B(e,t){switch(t.type){case`setDragged`:return{...e,dragged:{...e.dragged,...t.value}};case`setDragType`:return{...e,dragType:t.value};case`setTableDimensions`:return{...e,tableDimensions:t.value};case`setRef`:return{...e,refs:{...e.refs,[t.refName]:t.value}};case`setBodyScrollBarWidth`:return{...e,bodyScrollBarWidth:t.value};case`setWidths`:return{...e,widths:t.value};case`setColumnIds`:return{...e,columnIds:t.value};case`setOptions`:return{...e,options:{...e.options,...t.value}};case`dragStart`:return{...e,rect:t.value.rect,dragged:{...e.dragged,...t.value.dragged},dragType:t.value.dragType,tableDimensions:t.value.tableDimensions};case`dragEnd`:return{...e,dragged:{initial:{x:0,y:0},translate:{x:0,y:0},isDragging:!1,draggedID:null,targetIndex:t.value?.targetIndex??null,sourceIndex:t.value?.sourceIndex??null},dragType:null,rect:{draggedItemWidth:0,draggedItemHeight:0}};default:throw Error(`Unhandled action`)}}var V={dragged:{initial:{x:0,y:0},translate:{x:0,y:0},isDragging:!1,draggedID:null,targetIndex:null,sourceIndex:null},dragType:null,rect:{draggedItemWidth:0,draggedItemHeight:0},tableDimensions:{height:0,width:0},refs:{tableRef:{current:null},bodyRef:{current:null},headerRef:{current:null},cloneRef:{current:null},placeholderRef:{current:null}},bodyScrollBarWidth:0,options:z,widths:[],columnIds:[]},H={position:`relative`,display:`flex`,flexFlow:`column`},U={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},W=(0,l.forwardRef)(({children:e,className:t,style:n,options:r,onDragEnd:i,renderPlaceholder:a},o)=>{let s=(0,l.useRef)(null),c=(0,l.useRef)(null),d=(0,l.useRef)(null);(0,l.useImperativeHandle)(o,()=>s.current,[]);let[f]=(0,l.useState)(()=>x(B,V)),m=(0,g.useSyncExternalStore)(f.subscribe,f.getState),h=f.dispatch;(0,l.useEffect)(()=>{h({type:`setRef`,refName:`tableRef`,value:s}),h({type:`setRef`,refName:`cloneRef`,value:c}),h({type:`setRef`,refName:`placeholderRef`,value:d})},[s,h]),(0,l.useEffect)(()=>{let e=()=>{s.current&&h({type:`setTableDimensions`,value:{height:s.current.offsetHeight,width:s.current.offsetWidth}})};return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[s,h]),(0,l.useEffect)(()=>{r&&h({type:`setOptions`,value:r})},[r,h]);let{dragStart:v,touchStart:y}=R(m.refs,m.dragged,h,m.dragType,m.options,i),b=(0,l.useMemo)(()=>({position:`fixed`,zIndex:`5`,pointerEvents:`none`,top:0,left:0,display:`flex`,flexDirection:`column`,height:m.dragType===`row`?m.rect.draggedItemHeight:`${m.tableDimensions.height}px`,width:m.dragType===`column`?`${m.rect.draggedItemWidth}px`:`${m.tableDimensions.width}px`,overflow:`scroll`,scrollbarWidth:`none`,boxShadow:m.dragged.isDragging?`0 0 10px 0 rgba(0, 0, 0, 0.1)`:`none`}),[m.dragType,m.dragged.isDragging,m.rect.draggedItemHeight,m.rect.draggedItemWidth,m.tableDimensions.height,m.tableDimensions.width]);return(0,u.jsx)(_.Provider,{value:f,children:(0,u.jsxs)(p,{className:m.dragged.isDragging?`is-dragging`:``,children:[(0,u.jsx)(`div`,{id:`portalroot`,style:{...b,visibility:m.dragged.isDragging?`visible`:`hidden`},ref:c}),(0,u.jsx)(`div`,{ref:d,style:U,children:a?a():(0,u.jsx)(`div`,{style:{width:`100%`,height:`100%`}})}),(0,u.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:v,onTouchStart:y,style:{...H,...n},className:`table ${t??``}`,children:e})]})})});W.displayName=`TableProvider`;var G=(0,l.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,l.useRef)(null),a=r||i,o=v(e=>e.bodyScrollBarWidth),s=v(e=>e.dragged.isDragging),c=v(e=>e.refs),d=y(),f=(0,l.useCallback)(e=>`current`in e?e.current:null,[]);(0,l.useEffect)(()=>{i.current&&d({type:`setRef`,refName:`headerRef`,value:i})},[d]);let{HeaderScrollHandle:p}=C(c),m={display:`flex`,flex:`1 0 auto`},h=(0,l.useMemo)(()=>({overflowX:`scroll`,overflowY:`clip`,scrollbarWidth:`none`,display:`flex`,paddingRight:`${o}px`,userSelect:s?`none`:`auto`,...t}),[o,s,t]);return(0,l.useLayoutEffect)(()=>{let e=f(a);e&&d({type:`setWidths`,value:Array.from(e.querySelectorAll(`.th`)).map(e=>{let t=e.getAttribute(`data-width`);return t?parseInt(t,10):0})})},[e,d,f,a]),(0,l.useLayoutEffect)(()=>{let e=f(a);e&&d({type:`setColumnIds`,value:Array.from(e.querySelectorAll(`.draggable`)).map(e=>e.getAttribute(`data-id`)||``)})},[e,d,f,a]),(0,u.jsx)(`div`,{className:`header ${n??``}`,children:(0,u.jsx)(`div`,{className:`thead`,style:h,"data-droppableid":`header`,onScroll:p,ref:a,children:(0,u.jsx)(`div`,{style:m,className:`tr`,children:e})})})});G.displayName=`TableHeader`;var K=(0,l.memo)(({children:e,id:t,index:n,type:r,styles:i={}})=>{let a=v(e=>e.options.rowDragRange),o=v(e=>e.options.columnDragRange),s=(0,l.useMemo)(()=>r===`row`?P(n,a.start,a.end):P(n,o.start,o.end),[n,o.end,o.start,a.end,a.start,r]),c=(0,l.useRef)(null),d=(0,l.useMemo)(()=>({cursor:s?`auto`:`-webkit-grab`,display:`flex`}),[s]);return(0,l.useEffect)(()=>{c.current&&c.current.querySelector(`[data-drag-handle]`)&&(c.current.style.cursor=`auto`)},[e,s]),(0,u.jsx)(`div`,{className:`draggable`,"data-id":t,"data-index":n,"data-type":r,"data-disabled":s?`true`:`false`,style:i,children:(0,u.jsx)(`div`,{ref:c,style:d,children:e})})});K.displayName=`Draggable`;var q=(0,l.memo)(({children:e,style:t,className:n,...r})=>{let i=v(e=>e.options.defaultSizing),{width:a,flex:o,...s}=t??{},c=(0,l.useMemo)(()=>a===void 0?i:typeof a==`number`?a:parseFloat(String(a))||i,[a,i]),d=(0,l.useMemo)(()=>({width:`${c}px`,flex:o===void 0?`${c} 0 auto`:o}),[c,o]);return(0,u.jsx)(K,{...r,styles:d,type:`column`,children:(0,u.jsx)(`div`,{className:`th ${n??``}`,"data-width":c,style:{width:`100%`,...s},children:e})})});q.displayName=`ColumnCell`;var J={display:`flex`,overflow:`hidden`,flex:1},Y=(0,l.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,l.useRef)(null);(0,l.useImperativeHandle)(r,()=>i.current,[]);let a=v(e=>e.dragged.isDragging),o=v(e=>e.refs),s=y();(0,l.useEffect)(()=>{s({type:`setRef`,refName:`bodyRef`,value:i})},[s,i]);let{BodyScrollHandle:c}=C(o),d=(0,l.useMemo)(()=>({overflowX:`auto`,overflowY:`auto`,flex:1,userSelect:a?`none`:`auto`,...t}),[a,t]);return(0,l.useEffect)(()=>{if(i.current){let e=i.current.clientWidth;s({type:`setBodyScrollBarWidth`,value:i.current.offsetWidth-e})}},[s,i]),(0,u.jsx)(`div`,{className:`body ${n??``}`,style:J,children:(0,u.jsx)(`div`,{className:`ibody`,style:d,"data-droppableid":`body`,onScroll:c,ref:i,children:e})})}),X={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},Z=(0,l.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,l.useMemo)(()=>t?{...X,...t}:X,[t]),a=(0,f.default)(`tr`,n);return(0,u.jsx)(K,{...r,type:`row`,children:(0,u.jsx)(`div`,{className:a,style:i,children:e})})});Z.displayName=`BodyRow`;var Q=(0,l.memo)(({children:e,style:t,className:n,...r})=>{let{index:i}=r,a=v(e=>e.widths),o=v(e=>e.options.defaultSizing),s=(0,l.useMemo)(()=>a[i]??o,[a,i,o]),c=(0,l.useMemo)(()=>({display:`inline-flex`,width:`${s}px`,flex:`${s} 0 auto`,...t}),[s,t]);return(0,u.jsx)(`div`,{className:`td ${n??``}`,style:c,"data-col-index":i,children:e})});Q.displayName=`RowCell`;var $=(0,l.memo)(({children:e,className:t,style:n})=>(0,u.jsx)(`div`,{"data-drag-handle":`true`,className:t,style:{cursor:`-webkit-grab`,display:`inline-flex`,alignItems:`center`,...n},children:e}));$.displayName=`DragHandle`,exports.BodyRow=Z,exports.ColumnCell=q,exports.DragHandle=$,exports.RowCell=Q,exports.TableBody=Y,exports.TableContainer=W,exports.TableHeader=G,exports.useTable=b,exports.useTableDispatch=y,exports.useTableStore=v;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Components/index'
+export {}