react-table-dnd 2.0.7 → 2.0.12

package/README.md

@@ -51,14 +51,14 @@
 npm install react-table-dnd
 ```
 
-Then import the required CSS once in your app (e.g. `main.tsx` / `index.js`):
+> Requires `react` and `react-dom` >= 18.0.0
+
+Then import the styles once in your app entry (e.g. `main.tsx`):
 
 ```js
-import 'react-table-dnd/dist/react-table-dnd.css'
+import 'react-table-dnd/styles'
 ```
 
-> Requires `react` and `react-dom` >= 18.0.0
-
 ## Quick Start
 
 ```jsx

package/dist/index.cjs.js

@@ -1 +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,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},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=require(`react/jsx-runtime`),u=require(`react-dom`),d=require(`classnames`);d=s(d);var f=({children:e,className:t})=>(0,l.jsx)(`div`,{"data-flexitable-root":``,className:t??``,children:e}),p=(0,c.createContext)(null),m=e=>{let t=(0,c.useContext)(p);if(!t)throw Error(`useTableStore must be used within TableProvider`);return(0,c.useSyncExternalStore)(t.subscribe,()=>e(t.getState()))},h=()=>{let e=(0,c.useContext)(p);if(!e)throw Error(`useTableDispatch must be used within TableProvider`);return e.dispatch},g=()=>{let e=(0,c.useContext)(p);if(!e)throw Error(`useTable must be used within a TableProvider`);return{state:(0,c.useSyncExternalStore)(e.subscribe,e.getState),dispatch:e.dispatch}};function _(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 v=30,y=e=>{let{headerRef:t,bodyRef:n}=e,r=(0,c.useRef)(null),i=(0,c.useRef)(t),a=(0,c.useRef)(!1),o=(0,c.useRef)(!1),s=(0,c.useRef)(0),l=(0,c.useRef)(null),u=(0,c.useRef)({x:0,y:0}),d=(0,c.useRef)(null),f=(0,c.useCallback)(e=>{d.current=e},[]),p=(0,c.useCallback)(()=>{o.current=!1,a.current=!1,l.current!==null&&(cancelAnimationFrame(l.current),l.current=null)},[]),m=(0,c.useCallback)((e,t,n)=>{let c=n===`vertical`,f=c?o:a;if(!f.current)return;let p=d.current;if(p){let e=u.current;if(c){let t=e.y<p.top+v,n=e.y>p.bottom-v;if(!t&&!n){f.current=!1;return}}else{let t=e.x<p.left+v,n=e.x>p.right-v;if(!t&&!n){f.current=!1;return}}}let m=c?t.scrollHeight-t.clientHeight:t.scrollWidth-t.clientWidth;if(c)t.scrollTop+=e;else{t.scrollLeft+=e;let n=i.current;n?.current&&(n.current.scrollLeft=t.scrollLeft)}let h=c?t.scrollTop:t.scrollLeft;if(h>=m||h<=0){f.current=!1;return}s.current+=e/1e3,l.current=requestAnimationFrame(()=>r.current?.(e+s.current,t,n))},[]);return(0,c.useEffect)(()=>{r.current=m},[m]),{startAutoScroll:(0,c.useCallback)((e,t,n)=>{let r=n===`vertical`?o:a;r.current||(r.current=!0,s.current=0,l.current=requestAnimationFrame(()=>m(e,t,n)))},[m]),stopAutoScroll:p,setContainerRect:f,isAutoScrollingVertical:o,isAutoScrollingHorizontal:a,pointerRef:u,BodyScrollHandle:(0,c.useCallback)(e=>{t?.current&&e.currentTarget&&(t.current.scrollLeft=e.currentTarget.scrollLeft)},[t]),HeaderScrollHandle:(0,c.useCallback)(e=>{n?.current&&e.currentTarget&&(n.current.scrollLeft=e.currentTarget.scrollLeft)},[n])}},b=300,x=8,S=.92,C=.5;function w(e,t,n,r){let i=(0,c.useRef)(null),a=(0,c.useRef)({x:0,y:0}),o=(0,c.useRef)(null),s=(0,c.useRef)(!1),l=(0,c.useRef)(null),u=(0,c.useRef)(null),d=(0,c.useCallback)(()=>{u.current!==null&&(cancelAnimationFrame(u.current),u.current=null)},[]),f=(0,c.useCallback)(()=>{i.current&&=(clearTimeout(i.current),null),o.current=null,l.current&&=(l.current(),null)},[]);return{touchStart:(0,c.useCallback)(c=>{if(c.target===c.currentTarget)return;let p=c.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=c.touches[0];a.current={x:h.clientX,y:h.clientY},o.current=c;let g=e.tableRef?.current;if(!g)return;let _=!1,v=!1,y=h.clientY,w=h.clientX,T=0,E=0,D=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})(c.target),A=t=>{t.preventDefault();let n=t.touches[0],s=Date.now(),c=Math.max(s-D,1);if(D=s,v){let t=n.clientY-y,r=n.clientX-w;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)))}T=-t/c*16,E=-r/c*16,y=n.clientY,w=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)>x||Math.abs(t)>x)&&(i.current&&=(clearTimeout(i.current),null),o.current=null,v=!0,y=n.clientY,w=n.clientX,T=0,E=0,D=Date.now())}},j=()=>{if(_)M(),n();else{if(f(),v&&k&&(Math.abs(T)>C||Math.abs(E)>C)){let e=k,t=()=>{T*=S,E*=S,e.scrollTop+=T,e.scrollLeft+=E,Math.abs(T)>C||Math.abs(E)>C?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),l.current=null};g.addEventListener(`touchmove`,A,{passive:!1}),g.addEventListener(`touchend`,j,!1),g.addEventListener(`touchcancel`,j,!1),l.current=M,i.current=setTimeout(()=>{i.current=null,_=!0;let e=o.current;o.current=null,e&&t(e,h.clientX,h.clientY)},b)},[t,n,r,f,d,e.tableRef?.current,e.bodyRef?.current]),cancelLongPress:f,isTouchActiveRef:s}}var T=`transform 450ms cubic-bezier(0.2, 0, 0, 1)`,E=`transform 150ms cubic-bezier(0.2, 0, 0, 1)`,D=()=>typeof window<`u`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,O=(e,t,n,r)=>{let i=(0,c.useRef)({width:0,height:0}),a=(0,c.useRef)(null),o=(0,c.useRef)(new Set),s=(0,c.useRef)(new Set),l=(0,c.useRef)(new Map),u=(0,c.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=e.bodyRef?.current,d=u?u.offsetWidth-u.clientWidth:0,f=u?u.offsetHeight-u.clientHeight:0,p=(n??0)<(r??0),m=o.style.display===`none`,h=parseFloat(o.style.top)||0,g=parseFloat(o.style.left)||0;if(o.style.transition=``,o.style.transform=``,o.style.display=`block`,a===`row`?(o.style.top=`${p?c.top+c.height-s.height:c.top}px`,o.style.left=`${l?.left??c.left}px`,o.style.width=`${(l?.width??c.width)-d}px`,o.style.height=`${s.height}px`):(o.style.top=`${l?.top??c.top}px`,o.style.left=`${p?c.left+c.width-s.width:c.left}px`,o.style.width=`${s.width}px`,o.style.height=`${(l?.height??c.height)-f}px`),!m&&!D()){let e=g-(parseFloat(o.style.left)||0),t=h-(parseFloat(o.style.top)||0);(e!==0||t!==0)&&(o.style.transform=`translate(${e}px, ${t}px)`,o.offsetHeight,o.style.transition=E,o.style.transform=`translate(0, 0)`)}},[e.placeholderRef,e.tableRef,e.bodyRef]);return{applyShiftTransforms:(0,c.useCallback)((e,c,d)=>{if(e===null||c===null)return;let f=i.current,p=a.current,m=p===null,h=m?-1/0:Math.min(p,c,e)-1,g=m?1/0:Math.max(p,c,e)+1,_=null,v=(d===`row`?t.current:n.current).get(c);v&&(_=v.outer),u(_,e,c,d);let y=(t,n,r)=>{let i=(t,i,a)=>{let s=``;t>e&&t<=c?s=`translate${n}(-${r}px)`:t<e&&t>=c&&(s=`translate${n}(${r}px)`),a.style.transform=s,a.style.transition=t===e||D()?`none`:T,s&&o.current.add(a),t===c?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=l.current,a=(t,n,r)=>{let a=``;t>e&&t<=c?a=`translateX(-${f.width}px)`:t<e&&t>=c&&(a=`translateX(${f.width}px)`);for(let e of n)i.get(e)!==a&&(e.style.transform=a,r&&(e.style.transition=D()?`none`:T),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=c},[u,t,n,r]),clearShiftTransforms:(0,c.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(),l.current.clear(),a.current=null},[e.placeholderRef]),prevTargetIndexRef:a,draggedSizeRef:i}},k=e=>{let t=(0,c.useRef)(new Map),n=(0,c.useRef)(new Map),r=(0,c.useRef)(new Map),i=(0,c.useRef)(!1),a=(0,c.useCallback)(()=>{t.current.clear(),n.current.clear(),r.current.clear()},[]),o=(0,c.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,c.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})}},[]),l=(0,c.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,c.useCallback)((t,n)=>{if(a(),n){if(t===`row`)o(n);else if(t===`column`){let t=e.headerRef?.current;t&&s(t),l(n)}}},[e.headerRef,a,o,s,l]),rebuildRowMap:(0,c.useCallback)(e=>{i.current=!1,o(e)},[o]),rebuildColumnMaps:(0,c.useCallback)((e,t)=>{i.current=!1,t&&s(t),l(e)},[s,l]),checkStaleness:(0,c.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}},A=(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},j=(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 M(e,t,n){let r=n.getBoundingClientRect();return e>r.left+n.clientWidth||t>r.top+n.clientHeight}var N=(e,t,n)=>{let r=Number(e);return t!==void 0&&r<t||n!==void 0&&r>n},ee=(e,t)=>{let n=(0,c.useRef)(null),r=(0,c.useRef)(null),i=(0,c.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,c.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,c.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 A(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 j(e-c.x+l.width/2,u);return 0},[i,a]),cachedItemsRef:n,cachedContainerRef:r}},P=200,F=30,I=5;function te(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 L=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,setContainerRect:l,pointerRef:d,isAutoScrollingVertical:f,isAutoScrollingHorizontal:p}=y(e),m=k(e),{rowIndexMapRef:h,colIndexMapRef:g,cellIndexMapRef:_,mapStaleRef:v}=m,{applyShiftTransforms:b,clearShiftTransforms:x,prevTargetIndexRef:S,draggedSizeRef:C}=O(e,h,g,_),T=ee(e,i),{resolveDropIndex:E,cachedItemsRef:D,cachedContainerRef:A}=T,j=(0,c.useRef)(null),N=(0,c.useRef)({x:0,y:0}),L=(0,c.useRef)(null),R=(0,c.useRef)(null),z=(0,c.useRef)(!1),B=(0,c.useRef)(!1),V=(0,c.useRef)(null),H=(0,c.useRef)(null),U=(0,c.useRef)([]),W=(0,c.useCallback)((t,r,i)=>{let a=te(t.target);if(!a)return;let{element:o,foundHandle:s}=a;if(!s&&o.querySelector(`[data-drag-handle]`))return;let c=o.dataset.id,u=+o.dataset.index,f=o.dataset.type;j.current=f??null,L.current=u,R.current=null,V.current=null,U.current=[],S.current=null,z.current=!1;let p=f===`row`?e.bodyRef?.current?.scrollLeft??0:0,h=o.getBoundingClientRect();C.current={width:h.width,height:h.height};let g={x:r-h.left-p,y:i-h.top};N.current=g,d.current={x:r,y:i};let _={x:h.left+p,y:h.top};D.current=f===`row`?T.computeRowItems():T.computeColumnItems();let v=e.bodyRef?.current;v&&(A.current=v.getBoundingClientRect(),l(A.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`),H.current=b;let x=e.cloneRef?.current;if(x){if(x.innerHTML=``,x.style.transform=`translate(${_.x}px, ${_.y}px)`,B.current=(v?.querySelector(`[data-type="row"]`))?.style.position===`absolute`,f===`row`){let e=o.firstElementChild?.firstElementChild;e&&x.appendChild(e.cloneNode(!0))}else if(f===`column`&&v){let e=String(u),t=o.querySelector(`.th`);if(t){let e=document.createElement(`div`);e.style.flexShrink=`0`,e.style.order=`-1`,e.appendChild(t.cloneNode(!0)),x.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(B.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),B.current?(n.style.overflow=`auto`,n.style.scrollbarWidth=`none`,n.className=`clone-body-strip`):n.style.overflow=`hidden`,x.appendChild(n),V.current=n,U.current=[],v.querySelectorAll(`[data-col-index="${e}"]`).forEach(e=>{e.style.opacity=`0`,U.current.push(e)})}}n({type:`dragStart`,value:{rect:{draggedItemHeight:h.height,draggedItemWidth:h.width},dragged:{initial:g,translate:_,draggedID:c??null,isDragging:!0,sourceIndex:u},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 w=v?.scrollLeft??0,E=v?.scrollTop??0;requestAnimationFrame(()=>{let t=e.cloneRef?.current;t&&(f===`row`?t.scrollLeft=w:V.current&&(V.current.scrollTop=E))})},[n,e,d,l,T,m,D,A,C,S]),G=(0,c.useCallback)((t,r,i,o,s)=>{let c=e.cloneRef?.current;c&&(c.style.visibility=`hidden`),H.current&&=(H.current.style.opacity=``,H.current.style.pointerEvents=``,H.current.style.zIndex=``,H.current.style.cursor=``,null),U.current.forEach(e=>{e.style.opacity=``}),U.current=[];let l=e.tableRef?.current;l&&(l.style.touchAction=``),(0,u.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}})}),x();let d=e.bodyRef?.current;d&&(d.scrollTop=o,d.scrollLeft=s,requestAnimationFrame(()=>{d.scrollTop=o,d.scrollLeft=s}))},[n,e.bodyRef,e.cloneRef,e.tableRef,x,a]),K=(0,c.useCallback)(()=>{if(z.current)return;z.current=!0,Y(),setTimeout(()=>{X.current=!1},400);let t=R.current,n=L.current,r=j.current,i=e.bodyRef?.current,a=i?.scrollTop??0,o=i?.scrollLeft??0;D.current=null,A.current=null,s(),j.current=null,L.current=null,R.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 ${P}ms cubic-bezier(0.2, 0, 0, 1)`,c.style.transform=`translate(${e}px, ${i}px)`,setTimeout(()=>G(n,t,r,a,o),P)}else G(n,t,r,a,o)},[s,e.bodyRef,e.placeholderRef,e.cloneRef,G]),q=(0,c.useRef)(()=>{}),{touchStart:J,cancelLongPress:Y,isTouchActiveRef:X}=w(e,W,K,(e,t)=>q.current(e,t)),Z=(0,c.useCallback)(e=>{e.button===0&&e.target!==e.currentTarget&&(X.current||M(e.clientX,e.clientY,e.target)||W(e,e.clientX,e.clientY))},[W,X]),Q=(0,c.useCallback)((t,n)=>{if(z.current)return;let i=N.current;d.current.x=t,d.current.y=n;let a=e.bodyRef?.current;if(!a)return;let c=A.current;(!c||v.current)&&(c=a.getBoundingClientRect(),A.current=c);let l=a.scrollLeft,u=a.scrollTop,h=e.cloneRef?.current;h&&(h.style.transform=`translate(${t-i.x}px, ${n-i.y}px)`,j.current===`row`?h.scrollLeft=l:V.current&&(V.current.scrollTop=u));let g=j.current||r;if(B.current&&m.checkStaleness(),v.current&&(D.current=null,R.current=null,S.current=null,B.current?g===`row`?m.rebuildRowMap(a):m.rebuildColumnMaps(a,e.headerRef?.current??null):v.current=!1),g===`row`)if(n<c.top+F)o(-I,a,`vertical`),v.current=!0;else if(n>c.bottom-F)o(I,a,`vertical`),v.current=!0;else{let t=f.current;s(),t&&requestAnimationFrame(()=>{let t=e.bodyRef?.current;if(!t)return;B.current&&m.rebuildRowMap(t),D.current=null;let n=t.getBoundingClientRect();A.current=n;let r=E(d.current.x,d.current.y,`row`,n,t.scrollTop,N.current,C.current);R.current=r,S.current=null,b(L.current,r,`row`)})}else if(t<c.left+F)o(-I,a,`horizontal`),v.current=!0;else if(t>c.right-F)o(I,a,`horizontal`),v.current=!0;else{let t=p.current;s(),t&&requestAnimationFrame(()=>{let t=e.bodyRef?.current;if(!t)return;B.current&&m.rebuildColumnMaps(t,e.headerRef?.current??null),D.current=null;let n=t.getBoundingClientRect();A.current=n;let r=E(d.current.x,d.current.y,`column`,n,t.scrollTop,N.current,C.current);R.current=r,S.current=null,b(L.current,r,`column`)})}let _=E(t,n,g,c,u,i,C.current);_!==R.current&&(R.current=_,requestAnimationFrame(()=>b(L.current,_,g)))},[d,e.bodyRef,e.cloneRef,e.headerRef,r,o,s,f,p,m,E,b,D,A,v,S,C]);q.current=Q;let $=(0,c.useCallback)(()=>{Y(),D.current=null,A.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(),x(),j.current=null,L.current=null,R.current=null},[Y,D,A,e.cloneRef,e.tableRef,n,s,x]);return(0,c.useLayoutEffect)(()=>{if(!t.isDragging){x();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,x,e.cloneRef]),(0,c.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,Q(e,n)}))},a=()=>K(),o=e=>{e.key===`Escape`&&$()};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,Q,K,$]),{dragStart:Z,touchStart:J}},R={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function z(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 B={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:R,widths:[],columnIds:[]},V={position:`relative`,display:`flex`,flexFlow:`column`},H={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},U=(0,c.forwardRef)(({children:e,className:t,style:n,options:r,onDragEnd:i,renderPlaceholder:a},o)=>{let s=(0,c.useRef)(null),u=(0,c.useRef)(null),d=(0,c.useRef)(null);(0,c.useImperativeHandle)(o,()=>s.current,[]);let[m]=(0,c.useState)(()=>_(z,B)),h=(0,c.useSyncExternalStore)(m.subscribe,m.getState),g=m.dispatch;(0,c.useEffect)(()=>{g({type:`setRef`,refName:`tableRef`,value:s}),g({type:`setRef`,refName:`cloneRef`,value:u}),g({type:`setRef`,refName:`placeholderRef`,value:d})},[s,g]),(0,c.useEffect)(()=>{let e=()=>{s.current&&g({type:`setTableDimensions`,value:{height:s.current.offsetHeight,width:s.current.offsetWidth}})};return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[s,g]),(0,c.useEffect)(()=>{r&&g({type:`setOptions`,value:r})},[r,g]);let{dragStart:v,touchStart:y}=L(h.refs,h.dragged,g,h.dragType,h.options,i),b=(0,c.useMemo)(()=>({position:`fixed`,zIndex:`5`,pointerEvents:`none`,top:0,left:0,display:`flex`,flexDirection:`column`,height:h.dragType===`row`?h.rect.draggedItemHeight:`${h.tableDimensions.height}px`,width:h.dragType===`column`?`${h.rect.draggedItemWidth}px`:`${h.tableDimensions.width}px`,overflow:`scroll`,scrollbarWidth:`none`,boxShadow:h.dragged.isDragging?`0 0 10px 0 rgba(0, 0, 0, 0.1)`:`none`}),[h.dragType,h.dragged.isDragging,h.rect.draggedItemHeight,h.rect.draggedItemWidth,h.tableDimensions.height,h.tableDimensions.width]);return(0,l.jsx)(p.Provider,{value:m,children:(0,l.jsxs)(f,{className:h.dragged.isDragging?`is-dragging`:``,children:[(0,l.jsx)(`div`,{id:`portalroot`,style:{...b,visibility:h.dragged.isDragging?`visible`:`hidden`},ref:u}),(0,l.jsx)(`div`,{ref:d,style:H,children:a?a():(0,l.jsx)(`div`,{style:{width:`100%`,height:`100%`}})}),(0,l.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:v,onTouchStart:y,style:{...V,...n},className:`table ${t??``}`,children:e})]})})});U.displayName=`TableProvider`;var W=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null),a=r||i,o=m(e=>e.bodyScrollBarWidth),s=m(e=>e.dragged.isDragging),u=m(e=>e.refs),d=h(),f=(0,c.useCallback)(e=>`current`in e?e.current:null,[]);(0,c.useEffect)(()=>{i.current&&d({type:`setRef`,refName:`headerRef`,value:i})},[d]);let{HeaderScrollHandle:p}=y(u),g={display:`flex`,flex:`1 0 auto`},_=(0,c.useMemo)(()=>({overflowX:`scroll`,overflowY:`clip`,scrollbarWidth:`none`,display:`flex`,paddingRight:`${o}px`,userSelect:s?`none`:`auto`,...t}),[o,s,t]);return(0,c.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,c.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,l.jsx)(`div`,{className:`header ${n??``}`,children:(0,l.jsx)(`div`,{className:`thead`,style:_,"data-droppableid":`header`,onScroll:p,ref:a,children:(0,l.jsx)(`div`,{style:g,className:`tr`,children:e})})})});W.displayName=`TableHeader`;var G=(0,c.memo)(({children:e,id:t,index:n,type:r,styles:i={}})=>{let a=m(e=>e.options.rowDragRange),o=m(e=>e.options.columnDragRange),s=(0,c.useMemo)(()=>r===`row`?N(n,a.start,a.end):N(n,o.start,o.end),[n,o.end,o.start,a.end,a.start,r]),u=(0,c.useRef)(null),d=(0,c.useRef)(null),f=(0,c.useMemo)(()=>({cursor:s?`auto`:`-webkit-grab`,display:`flex`}),[s]);return(0,c.useEffect)(()=>{!d.current||!u.current||(d.current.querySelector(`[data-drag-handle]`)?d.current.style.cursor=`auto`:s||(u.current.style.touchAction=`none`))},[e,s]),(0,l.jsx)(`div`,{ref:u,className:`draggable`,"data-id":t,"data-index":n,"data-type":r,"data-disabled":s?`true`:`false`,style:i,children:(0,l.jsx)(`div`,{ref:d,style:f,children:e})})});G.displayName=`Draggable`;var K=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=m(e=>e.options.defaultSizing),{width:a,flex:o,...s}=t??{},u=(0,c.useMemo)(()=>a===void 0?i:typeof a==`number`?a:parseFloat(String(a))||i,[a,i]),d=(0,c.useMemo)(()=>({width:`${u}px`,flex:o===void 0?`${u} 0 auto`:o,boxSizing:`border-box`}),[u,o]);return(0,l.jsx)(G,{...r,styles:d,type:`column`,children:(0,l.jsx)(`div`,{className:`th ${n??``}`,"data-width":u,style:{width:`100%`,...s,boxSizing:`border-box`},children:e})})});K.displayName=`ColumnCell`;var q={display:`flex`,overflow:`hidden`,flex:1},J=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null);(0,c.useImperativeHandle)(r,()=>i.current,[]);let a=m(e=>e.dragged.isDragging),o=m(e=>e.refs),s=h();(0,c.useEffect)(()=>{s({type:`setRef`,refName:`bodyRef`,value:i})},[s,i]);let{BodyScrollHandle:u}=y(o),d=(0,c.useMemo)(()=>({overflowX:`auto`,overflowY:`auto`,flex:1,userSelect:a?`none`:`auto`,...t}),[a,t]);return(0,c.useLayoutEffect)(()=>{if(i.current){let e=i.current.clientWidth;s({type:`setBodyScrollBarWidth`,value:i.current.offsetWidth-e})}},[s,i]),(0,l.jsx)(`div`,{className:`body ${n??``}`,style:q,children:(0,l.jsx)(`div`,{className:`ibody`,style:d,"data-droppableid":`body`,onScroll:u,ref:i,children:e})})}),Y={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},X=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,c.useMemo)(()=>t?{...Y,...t}:Y,[t]),a=(0,d.default)(`tr`,n);return(0,l.jsx)(G,{...r,type:`row`,children:(0,l.jsx)(`div`,{className:a,style:i,children:e})})});X.displayName=`BodyRow`;var Z=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let{index:i}=r,a=m(e=>e.widths),o=m(e=>e.options.defaultSizing),s=(0,c.useMemo)(()=>a[i]??o,[a,i,o]),u=(0,c.useMemo)(()=>({display:`inline-flex`,width:`${s}px`,flex:`${s} 0 auto`,...t,boxSizing:`border-box`}),[s,t]);return(0,l.jsx)(`div`,{className:`td ${n??``}`,style:u,"data-col-index":i,children:e})});Z.displayName=`RowCell`;var Q=(0,c.memo)(({children:e,className:t,style:n})=>(0,l.jsx)(`div`,{"data-drag-handle":`true`,className:t,style:{cursor:`-webkit-grab`,touchAction:`none`,display:`inline-flex`,alignItems:`center`,...n},children:e}));Q.displayName=`DragHandle`,exports.BodyRow=X,exports.ColumnCell=K,exports.DragHandle=Q,exports.RowCell=Z,exports.TableBody=J,exports.TableContainer=U,exports.TableHeader=W,exports.useTable=g,exports.useTableDispatch=h,exports.useTableStore=m;
+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,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},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=require(`react/jsx-runtime`),u=require(`react-dom`);var d=({children:e,className:t})=>(0,l.jsx)(`div`,{"data-flexitable-root":``,className:t??``,children:e}),f=(0,c.createContext)(null),p=e=>{let t=(0,c.useContext)(f);if(!t)throw Error(`useTableStore must be used within TableProvider`);return(0,c.useSyncExternalStore)(t.subscribe,()=>e(t.getState()))},m=()=>{let e=(0,c.useContext)(f);if(!e)throw Error(`useTableDispatch must be used within TableProvider`);return e.dispatch},h=()=>{let e=(0,c.useContext)(f);if(!e)throw Error(`useTable must be used within a TableProvider`);return{state:(0,c.useSyncExternalStore)(e.subscribe,e.getState),dispatch:e.dispatch}};function g(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 _=30,v=e=>{let{headerRef:t,bodyRef:n}=e,r=(0,c.useRef)(null),i=(0,c.useRef)(t),a=(0,c.useRef)(!1),o=(0,c.useRef)(!1),s=(0,c.useRef)(0),l=(0,c.useRef)(null),u=(0,c.useRef)({x:0,y:0}),d=(0,c.useRef)(null),f=(0,c.useCallback)(e=>{d.current=e},[]),p=(0,c.useCallback)(()=>{o.current=!1,a.current=!1,l.current!==null&&(cancelAnimationFrame(l.current),l.current=null)},[]),m=(0,c.useCallback)((e,t,n)=>{let c=n===`vertical`,f=c?o:a;if(!f.current)return;let p=d.current;if(p){let e=u.current;if(c){let t=e.y<p.top+_,n=e.y>p.bottom-_;if(!t&&!n){f.current=!1;return}}else{let t=e.x<p.left+_,n=e.x>p.right-_;if(!t&&!n){f.current=!1;return}}}let m=c?t.scrollHeight-t.clientHeight:t.scrollWidth-t.clientWidth;if(c)t.scrollTop+=e;else{t.scrollLeft+=e;let n=i.current;n?.current&&(n.current.scrollLeft=t.scrollLeft)}let h=c?t.scrollTop:t.scrollLeft;if(h>=m||h<=0){f.current=!1;return}s.current+=e/1e3,l.current=requestAnimationFrame(()=>r.current?.(e+s.current,t,n))},[]);return(0,c.useEffect)(()=>{r.current=m},[m]),{startAutoScroll:(0,c.useCallback)((e,t,n)=>{let r=n===`vertical`?o:a;r.current||(r.current=!0,s.current=0,l.current=requestAnimationFrame(()=>m(e,t,n)))},[m]),stopAutoScroll:p,setContainerRect:f,isAutoScrollingVertical:o,isAutoScrollingHorizontal:a,pointerRef:u,BodyScrollHandle:(0,c.useCallback)(e=>{t?.current&&e.currentTarget&&(t.current.scrollLeft=e.currentTarget.scrollLeft)},[t]),HeaderScrollHandle:(0,c.useCallback)(e=>{n?.current&&e.currentTarget&&(n.current.scrollLeft=e.currentTarget.scrollLeft)},[n])}},y=300,b=8,x=.92,S=.5;function C(e,t,n,r){let i=(0,c.useRef)(null),a=(0,c.useRef)({x:0,y:0}),o=(0,c.useRef)(null),s=(0,c.useRef)(!1),l=(0,c.useRef)(null),u=(0,c.useRef)(null),d=(0,c.useCallback)(()=>{u.current!==null&&(cancelAnimationFrame(u.current),u.current=null)},[]),f=(0,c.useCallback)(()=>{i.current&&=(clearTimeout(i.current),null),o.current=null,l.current&&=(l.current(),null)},[]);return{touchStart:(0,c.useCallback)(c=>{if(c.target===c.currentTarget)return;let p=c.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=c.touches[0];a.current={x:h.clientX,y:h.clientY},o.current=c;let g=e.tableRef?.current;if(!g)return;let _=!1,v=!1,C=h.clientY,w=h.clientX,T=0,E=0,D=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})(c.target),A=t=>{t.preventDefault();let n=t.touches[0],s=Date.now(),c=Math.max(s-D,1);if(D=s,v){let t=n.clientY-C,r=n.clientX-w;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)))}T=-t/c*16,E=-r/c*16,C=n.clientY,w=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)>b||Math.abs(t)>b)&&(i.current&&=(clearTimeout(i.current),null),o.current=null,v=!0,C=n.clientY,w=n.clientX,T=0,E=0,D=Date.now())}},j=()=>{if(_)M(),n();else{if(f(),v&&k&&(Math.abs(T)>S||Math.abs(E)>S)){let e=k,t=()=>{T*=x,E*=x,e.scrollTop+=T,e.scrollLeft+=E,Math.abs(T)>S||Math.abs(E)>S?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),l.current=null};g.addEventListener(`touchmove`,A,{passive:!1}),g.addEventListener(`touchend`,j,!1),g.addEventListener(`touchcancel`,j,!1),l.current=M,i.current=setTimeout(()=>{i.current=null,_=!0;let e=o.current;o.current=null,e&&t(e,h.clientX,h.clientY)},y)},[t,n,r,f,d,e.tableRef?.current,e.bodyRef?.current]),cancelLongPress:f,isTouchActiveRef:s}}var w=`transform 450ms cubic-bezier(0.2, 0, 0, 1)`,T=`transform 150ms cubic-bezier(0.2, 0, 0, 1)`,E=()=>typeof window<`u`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,D=(e,t,n,r)=>{let i=(0,c.useRef)({width:0,height:0}),a=(0,c.useRef)(null),o=(0,c.useRef)(new Set),s=(0,c.useRef)(new Set),l=(0,c.useRef)(new Map),u=(0,c.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=e.bodyRef?.current,d=u?u.offsetWidth-u.clientWidth:0,f=u?u.offsetHeight-u.clientHeight:0,p=(n??0)<(r??0),m=o.style.display===`none`,h=parseFloat(o.style.top)||0,g=parseFloat(o.style.left)||0;if(o.style.transition=``,o.style.transform=``,o.style.display=`block`,a===`row`?(o.style.top=`${p?c.top+c.height-s.height:c.top}px`,o.style.left=`${l?.left??c.left}px`,o.style.width=`${(l?.width??c.width)-d}px`,o.style.height=`${s.height}px`):(o.style.top=`${l?.top??c.top}px`,o.style.left=`${p?c.left+c.width-s.width:c.left}px`,o.style.width=`${s.width}px`,o.style.height=`${(l?.height??c.height)-f}px`),!m&&!E()){let e=g-(parseFloat(o.style.left)||0),t=h-(parseFloat(o.style.top)||0);(e!==0||t!==0)&&(o.style.transform=`translate(${e}px, ${t}px)`,o.offsetHeight,o.style.transition=T,o.style.transform=`translate(0, 0)`)}},[e.placeholderRef,e.tableRef,e.bodyRef]);return{applyShiftTransforms:(0,c.useCallback)((e,c,d)=>{if(e===null||c===null)return;let f=i.current,p=a.current,m=p===null,h=m?-1/0:Math.min(p,c,e)-1,g=m?1/0:Math.max(p,c,e)+1,_=null,v=(d===`row`?t.current:n.current).get(c);v&&(_=v.outer),u(_,e,c,d);let y=(t,n,r)=>{let i=(t,i,a)=>{let s=``;t>e&&t<=c?s=`translate${n}(-${r}px)`:t<e&&t>=c&&(s=`translate${n}(${r}px)`),a.style.transform=s,a.style.transition=t===e||E()?`none`:w,s&&o.current.add(a),t===c?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=l.current,a=(t,n,r)=>{let a=``;t>e&&t<=c?a=`translateX(-${f.width}px)`:t<e&&t>=c&&(a=`translateX(${f.width}px)`);for(let e of n)i.get(e)!==a&&(e.style.transform=a,r&&(e.style.transition=E()?`none`:w),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=c},[u,t,n,r]),clearShiftTransforms:(0,c.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(),l.current.clear(),a.current=null},[e.placeholderRef]),prevTargetIndexRef:a,draggedSizeRef:i}},O=e=>{let t=(0,c.useRef)(new Map),n=(0,c.useRef)(new Map),r=(0,c.useRef)(new Map),i=(0,c.useRef)(!1),a=(0,c.useCallback)(()=>{t.current.clear(),n.current.clear(),r.current.clear()},[]),o=(0,c.useCallback)(e=>{t.current.clear();let n=e.querySelectorAll(`[data-rtdnd="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,c.useCallback)(e=>{n.current.clear();let t=e.querySelectorAll(`[data-rtdnd="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})}},[]),l=(0,c.useCallback)(e=>{r.current.clear();let t=e.querySelectorAll(`[data-rtdnd="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,c.useCallback)((t,n)=>{if(a(),n){if(t===`row`)o(n);else if(t===`column`){let t=e.headerRef?.current;t&&s(t),l(n)}}},[e.headerRef,a,o,s,l]),rebuildRowMap:(0,c.useCallback)(e=>{i.current=!1,o(e)},[o]),rebuildColumnMaps:(0,c.useCallback)((e,t)=>{i.current=!1,t&&s(t),l(e)},[s,l]),checkStaleness:(0,c.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}},k=(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},A=(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 j(e,t,n){let r=n.getBoundingClientRect();return e>r.left+n.clientWidth||t>r.top+n.clientHeight}var M=(e,t,n)=>{let r=Number(e);return t!==void 0&&r<t||n!==void 0&&r>n},ee=(e,t)=>{let n=(0,c.useRef)(null),r=(0,c.useRef)(null),i=(0,c.useCallback)(()=>{let n=e.bodyRef?.current;if(!n)return null;let r=n.scrollTop,i=n.getBoundingClientRect().top,a=n.querySelectorAll(`[data-rtdnd="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,c.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,c.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 k(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 A(e-c.x+l.width/2,u);return 0},[i,a]),cachedItemsRef:n,cachedContainerRef:r}},N=200,P=30,F=5;function te(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 I=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,setContainerRect:l,pointerRef:d,isAutoScrollingVertical:f,isAutoScrollingHorizontal:p}=v(e),m=O(e),{rowIndexMapRef:h,colIndexMapRef:g,cellIndexMapRef:_,mapStaleRef:y}=m,{applyShiftTransforms:b,clearShiftTransforms:x,prevTargetIndexRef:S,draggedSizeRef:w}=D(e,h,g,_),T=ee(e,i),{resolveDropIndex:E,cachedItemsRef:k,cachedContainerRef:A}=T,M=(0,c.useRef)(null),I=(0,c.useRef)({x:0,y:0}),L=(0,c.useRef)(null),R=(0,c.useRef)(null),z=(0,c.useRef)(!1),B=(0,c.useRef)(!1),V=(0,c.useRef)(null),H=(0,c.useRef)(null),U=(0,c.useRef)([]),W=(0,c.useCallback)((t,r,i)=>{let a=te(t.target);if(!a)return;let{element:o,foundHandle:s}=a;if(!s&&o.querySelector(`[data-drag-handle]`))return;let c=o.dataset.id,u=+o.dataset.index,f=o.dataset.type;M.current=f??null,L.current=u,R.current=null,V.current=null,U.current=[],S.current=null,z.current=!1;let p=f===`row`?e.bodyRef?.current?.scrollLeft??0:0,h=o.getBoundingClientRect();w.current={width:h.width,height:h.height};let g={x:r-h.left-p,y:i-h.top};I.current=g,d.current={x:r,y:i};let _={x:h.left+p,y:h.top};k.current=f===`row`?T.computeRowItems():T.computeColumnItems();let v=e.bodyRef?.current;v&&(A.current=v.getBoundingClientRect(),l(A.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`),H.current=b;let x=e.cloneRef?.current;if(x){if(x.innerHTML=``,x.style.transform=`translate(${_.x}px, ${_.y}px)`,B.current=(v?.querySelector(`[data-type="row"]`))?.style.position===`absolute`,f===`row`){let e=o.firstElementChild?.firstElementChild;e&&x.appendChild(e.cloneNode(!0))}else if(f===`column`&&v){let e=String(u),t=o.querySelector(`[data-rtdnd="th"]`);if(t){let e=document.createElement(`div`);e.style.flexShrink=`0`,e.style.order=`-1`,e.appendChild(t.cloneNode(!0)),x.appendChild(e)}let n=document.createElement(`div`);n.style.flex=`1`;let r=document.createElement(`div`);r.dataset.rtdnd=`rbody`,r.style.height=`${v.scrollHeight}px`,r.style.position=`relative`,v.querySelectorAll(`[data-type="row"]`).forEach(t=>{let n=t.cloneNode(!0);if(B.current){let t=n.querySelector(`[data-rtdnd="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),B.current?(n.style.overflow=`auto`,n.style.scrollbarWidth=`none`,n.dataset.rtdnd=`clone-body-strip`):n.style.overflow=`hidden`,x.appendChild(n),V.current=n,U.current=[],v.querySelectorAll(`[data-col-index="${e}"]`).forEach(e=>{e.style.opacity=`0`,U.current.push(e)})}}n({type:`dragStart`,value:{rect:{draggedItemHeight:h.height,draggedItemWidth:h.width},dragged:{initial:g,translate:_,draggedID:c??null,isDragging:!0,sourceIndex:u},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 C=v?.scrollLeft??0,E=v?.scrollTop??0;requestAnimationFrame(()=>{let t=e.cloneRef?.current;t&&(f===`row`?t.scrollLeft=C:V.current&&(V.current.scrollTop=E))})},[n,e,d,l,T,m,k,A,w,S]),G=(0,c.useCallback)((t,r,i,o,s)=>{let c=e.cloneRef?.current;c&&(c.style.visibility=`hidden`),H.current&&=(H.current.style.opacity=``,H.current.style.pointerEvents=``,H.current.style.zIndex=``,H.current.style.cursor=``,null),U.current.forEach(e=>{e.style.opacity=``}),U.current=[];let l=e.tableRef?.current;l&&(l.style.touchAction=``),(0,u.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}})}),x();let d=e.bodyRef?.current;d&&(d.scrollTop=o,d.scrollLeft=s,requestAnimationFrame(()=>{d.scrollTop=o,d.scrollLeft=s}))},[n,e.bodyRef,e.cloneRef,e.tableRef,x,a]),K=(0,c.useCallback)(()=>{if(z.current)return;z.current=!0,Y(),setTimeout(()=>{X.current=!1},400);let t=R.current,n=L.current,r=M.current,i=e.bodyRef?.current,a=i?.scrollTop??0,o=i?.scrollLeft??0;k.current=null,A.current=null,s(),M.current=null,L.current=null,R.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 ${N}ms cubic-bezier(0.2, 0, 0, 1)`,c.style.transform=`translate(${e}px, ${i}px)`,setTimeout(()=>G(n,t,r,a,o),N)}else G(n,t,r,a,o)},[s,e.bodyRef,e.placeholderRef,e.cloneRef,G]),q=(0,c.useRef)(()=>{}),{touchStart:J,cancelLongPress:Y,isTouchActiveRef:X}=C(e,W,K,(e,t)=>q.current(e,t)),Z=(0,c.useCallback)(e=>{e.button===0&&e.target!==e.currentTarget&&(X.current||j(e.clientX,e.clientY,e.target)||W(e,e.clientX,e.clientY))},[W,X]),Q=(0,c.useCallback)((t,n)=>{if(z.current)return;let i=I.current;d.current.x=t,d.current.y=n;let a=e.bodyRef?.current;if(!a)return;let c=A.current;(!c||y.current)&&(c=a.getBoundingClientRect(),A.current=c);let l=a.scrollLeft,u=a.scrollTop,h=e.cloneRef?.current;h&&(h.style.transform=`translate(${t-i.x}px, ${n-i.y}px)`,M.current===`row`?h.scrollLeft=l:V.current&&(V.current.scrollTop=u));let g=M.current||r;if(B.current&&m.checkStaleness(),y.current&&(k.current=null,R.current=null,S.current=null,B.current?g===`row`?m.rebuildRowMap(a):m.rebuildColumnMaps(a,e.headerRef?.current??null):y.current=!1),g===`row`)if(n<c.top+P)o(-F,a,`vertical`),y.current=!0;else if(n>c.bottom-P)o(F,a,`vertical`),y.current=!0;else{let t=f.current;s(),t&&requestAnimationFrame(()=>{let t=e.bodyRef?.current;if(!t)return;B.current&&m.rebuildRowMap(t),k.current=null;let n=t.getBoundingClientRect();A.current=n;let r=E(d.current.x,d.current.y,`row`,n,t.scrollTop,I.current,w.current);R.current=r,S.current=null,b(L.current,r,`row`)})}else if(t<c.left+P)o(-F,a,`horizontal`),y.current=!0;else if(t>c.right-P)o(F,a,`horizontal`),y.current=!0;else{let t=p.current;s(),t&&requestAnimationFrame(()=>{let t=e.bodyRef?.current;if(!t)return;B.current&&m.rebuildColumnMaps(t,e.headerRef?.current??null),k.current=null;let n=t.getBoundingClientRect();A.current=n;let r=E(d.current.x,d.current.y,`column`,n,t.scrollTop,I.current,w.current);R.current=r,S.current=null,b(L.current,r,`column`)})}let _=E(t,n,g,c,u,i,w.current);_!==R.current&&(R.current=_,requestAnimationFrame(()=>b(L.current,_,g)))},[d,e.bodyRef,e.cloneRef,e.headerRef,r,o,s,f,p,m,E,b,k,A,y,S,w]);q.current=Q;let $=(0,c.useCallback)(()=>{Y(),k.current=null,A.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(),x(),M.current=null,L.current=null,R.current=null},[Y,k,A,e.cloneRef,e.tableRef,n,s,x]);return(0,c.useLayoutEffect)(()=>{if(!t.isDragging){x();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,x,e.cloneRef]),(0,c.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,Q(e,n)}))},a=()=>K(),o=e=>{e.key===`Escape`&&$()};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,Q,K,$]),{dragStart:Z,touchStart:J}},L={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function R(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 z={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:L,widths:[],columnIds:[]},B={position:`relative`,display:`flex`,flexFlow:`column`},V={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},H=(0,c.forwardRef)(({children:e,className:t,style:n,options:r,onDragEnd:i,renderPlaceholder:a},o)=>{let s=(0,c.useRef)(null),u=(0,c.useRef)(null),p=(0,c.useRef)(null);(0,c.useImperativeHandle)(o,()=>s.current,[]);let[m]=(0,c.useState)(()=>g(R,z)),h=(0,c.useSyncExternalStore)(m.subscribe,m.getState),_=m.dispatch;(0,c.useEffect)(()=>{_({type:`setRef`,refName:`tableRef`,value:s}),_({type:`setRef`,refName:`cloneRef`,value:u}),_({type:`setRef`,refName:`placeholderRef`,value:p})},[s,_]),(0,c.useEffect)(()=>{let e=()=>{s.current&&_({type:`setTableDimensions`,value:{height:s.current.offsetHeight,width:s.current.offsetWidth}})};return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[s,_]),(0,c.useEffect)(()=>{r&&_({type:`setOptions`,value:r})},[r,_]);let{dragStart:v,touchStart:y}=I(h.refs,h.dragged,_,h.dragType,h.options,i),b=(0,c.useMemo)(()=>({position:`fixed`,zIndex:`5`,pointerEvents:`none`,top:0,left:0,display:`flex`,flexDirection:`column`,height:h.dragType===`row`?h.rect.draggedItemHeight:`${h.tableDimensions.height}px`,width:h.dragType===`column`?`${h.rect.draggedItemWidth}px`:`${h.tableDimensions.width}px`,overflow:`scroll`,scrollbarWidth:`none`,boxShadow:h.dragged.isDragging?`0 0 10px 0 rgba(0, 0, 0, 0.1)`:`none`}),[h.dragType,h.dragged.isDragging,h.rect.draggedItemHeight,h.rect.draggedItemWidth,h.tableDimensions.height,h.tableDimensions.width]);return(0,l.jsx)(f.Provider,{value:m,children:(0,l.jsxs)(d,{className:h.dragged.isDragging?`is-dragging`:``,children:[(0,l.jsx)(`div`,{id:`portalroot`,style:{...b,visibility:h.dragged.isDragging?`visible`:`hidden`},ref:u}),(0,l.jsx)(`div`,{ref:p,style:V,children:a?a():(0,l.jsx)(`div`,{style:{width:`100%`,height:`100%`}})}),(0,l.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:v,onTouchStart:y,style:{...B,...n},"data-rtdnd":`table`,className:t,children:e})]})})});H.displayName=`TableProvider`;var U=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null),a=r||i,o=p(e=>e.bodyScrollBarWidth),s=p(e=>e.dragged.isDragging),u=p(e=>e.refs),d=m(),f=(0,c.useCallback)(e=>`current`in e?e.current:null,[]);(0,c.useEffect)(()=>{i.current&&d({type:`setRef`,refName:`headerRef`,value:i})},[d]);let{HeaderScrollHandle:h}=v(u),g={display:`flex`,flex:`1 0 auto`},_=(0,c.useMemo)(()=>({overflowX:`scroll`,overflowY:`clip`,scrollbarWidth:`none`,display:`flex`,paddingRight:`${o}px`,userSelect:s?`none`:`auto`,...t}),[o,s,t]);return(0,c.useLayoutEffect)(()=>{let e=f(a);e&&d({type:`setWidths`,value:Array.from(e.querySelectorAll(`[data-rtdnd="th"]`)).map(e=>{let t=e.getAttribute(`data-width`);return t?parseInt(t,10):0})})},[e,d,f,a]),(0,c.useLayoutEffect)(()=>{let e=f(a);e&&d({type:`setColumnIds`,value:Array.from(e.querySelectorAll(`[data-rtdnd="draggable"]`)).map(e=>e.getAttribute(`data-id`)||``)})},[e,d,f,a]),(0,l.jsx)(`div`,{"data-rtdnd":`header`,className:n,children:(0,l.jsx)(`div`,{"data-rtdnd":`thead`,style:_,"data-droppableid":`header`,onScroll:h,ref:a,children:(0,l.jsx)(`div`,{style:g,"data-rtdnd":`tr`,children:e})})})});U.displayName=`TableHeader`;var W=(0,c.memo)(({children:e,id:t,index:n,type:r,styles:i={}})=>{let a=p(e=>e.options.rowDragRange),o=p(e=>e.options.columnDragRange),s=(0,c.useMemo)(()=>r===`row`?M(n,a.start,a.end):M(n,o.start,o.end),[n,o.end,o.start,a.end,a.start,r]),u=(0,c.useRef)(null),d=(0,c.useRef)(null),f=(0,c.useMemo)(()=>({cursor:s?`auto`:`-webkit-grab`,display:`flex`}),[s]);return(0,c.useEffect)(()=>{!d.current||!u.current||(d.current.querySelector(`[data-drag-handle]`)?d.current.style.cursor=`auto`:s||(u.current.style.touchAction=`none`))},[e,s]),(0,l.jsx)(`div`,{ref:u,"data-rtdnd":`draggable`,"data-id":t,"data-index":n,"data-type":r,"data-disabled":s?`true`:`false`,style:i,children:(0,l.jsx)(`div`,{ref:d,style:f,children:e})})});W.displayName=`Draggable`;var G=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=p(e=>e.options.defaultSizing),{width:a,flex:o,...s}=t??{},u=(0,c.useMemo)(()=>a===void 0?i:typeof a==`number`?a:parseFloat(String(a))||i,[a,i]),d=(0,c.useMemo)(()=>({width:`${u}px`,flex:o===void 0?`${u} 0 auto`:o,boxSizing:`border-box`}),[u,o]);return(0,l.jsx)(W,{...r,styles:d,type:`column`,children:(0,l.jsx)(`div`,{"data-rtdnd":`th`,className:n,"data-width":u,style:{width:`100%`,...s,boxSizing:`border-box`},children:e})})});G.displayName=`ColumnCell`;var K={display:`flex`,overflow:`hidden`,flex:1},q=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null);(0,c.useImperativeHandle)(r,()=>i.current,[]);let a=p(e=>e.dragged.isDragging),o=p(e=>e.refs),s=m();(0,c.useEffect)(()=>{s({type:`setRef`,refName:`bodyRef`,value:i})},[s,i]);let{BodyScrollHandle:u}=v(o),d=(0,c.useMemo)(()=>({overflowX:`auto`,overflowY:`auto`,flex:1,userSelect:a?`none`:`auto`,...t}),[a,t]);return(0,c.useLayoutEffect)(()=>{if(i.current){let e=i.current.clientWidth;s({type:`setBodyScrollBarWidth`,value:i.current.offsetWidth-e})}},[s,i]),(0,l.jsx)(`div`,{"data-rtdnd":`body`,className:n,style:K,children:(0,l.jsx)(`div`,{"data-rtdnd":`ibody`,style:d,"data-droppableid":`body`,onScroll:u,ref:i,children:e})})}),J={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},Y=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,c.useMemo)(()=>t?{...J,...t}:J,[t]);return(0,l.jsx)(W,{...r,type:`row`,children:(0,l.jsx)(`div`,{"data-rtdnd":`tr`,className:n,style:i,children:e})})});Y.displayName=`BodyRow`;var X=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let{index:i}=r,a=p(e=>e.widths),o=p(e=>e.options.defaultSizing),s=(0,c.useMemo)(()=>a[i]??o,[a,i,o]),u=(0,c.useMemo)(()=>({display:`inline-flex`,width:`${s}px`,flex:`${s} 0 auto`,...t,boxSizing:`border-box`}),[s,t]);return(0,l.jsx)(`div`,{"data-rtdnd":`td`,className:n,style:u,"data-col-index":i,children:e})});X.displayName=`RowCell`;var Z=(0,c.memo)(({children:e,className:t,style:n})=>(0,l.jsx)(`div`,{"data-drag-handle":`true`,className:t,style:{cursor:`-webkit-grab`,touchAction:`none`,display:`inline-flex`,alignItems:`center`,...n},children:e}));Z.displayName=`DragHandle`,exports.BodyRow=Y,exports.ColumnCell=G,exports.DragHandle=Z,exports.RowCell=X,exports.TableBody=q,exports.TableContainer=H,exports.TableHeader=U,exports.useTable=h,exports.useTableDispatch=m,exports.useTableStore=p;

package/dist/index.es.js

@@ -1,22 +1,21 @@
 import { createContext as e, forwardRef as t, memo as n, useCallback as r, useContext as i, useEffect as a, useImperativeHandle as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u, useSyncExternalStore as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { flushSync as m } from "react-dom";
-import h from "classnames";
 //#region src/Components/TableContainer/styles.tsx
-var g = ({ children: e, className: t }) => /* @__PURE__ */ f("div", {
+var h = ({ children: e, className: t }) => /* @__PURE__ */ f("div", {
 	"data-flexitable-root": "",
 	className: t ?? "",
 	children: e
-}), _ = e(null), v = (e) => {
-	let t = i(_);
+}), g = e(null), _ = (e) => {
+	let t = i(g);
 	if (!t) throw Error("useTableStore must be used within TableProvider");
 	return d(t.subscribe, () => e(t.getState()));
-}, y = () => {
-	let e = i(_);
+}, v = () => {
+	let e = i(g);
 	if (!e) throw Error("useTableDispatch must be used within TableProvider");
 	return e.dispatch;
-}, b = () => {
-	let e = i(_);
+}, y = () => {
+	let e = i(g);
 	if (!e) throw Error("useTable must be used within a TableProvider");
 	return {
 		state: d(e.subscribe, e.getState),
@@ -25,7 +24,7 @@ var g = ({ children: e, className: t }) => /* @__PURE__ */ f("div", {
 };
 //#endregion
 //#region src/Components/TableContainer/store.ts
-function x(e, t) {
+function b(e, t) {
 	let n = t, r = /* @__PURE__ */ new Set();
 	return {
 		getState: () => n,
@@ -41,7 +40,7 @@ function x(e, t) {
 }
 //#endregion
 //#region src/hooks/useAutoScroll.ts
-var S = 30, C = (e) => {
+var x = 30, S = (e) => {
 	let { headerRef: t, bodyRef: n } = e, i = l(null), o = l(t), s = l(!1), c = l(!1), u = l(0), d = l(null), f = l({
 		x: 0,
 		y: 0
@@ -56,13 +55,13 @@ var S = 30, C = (e) => {
 		if (l) {
 			let e = f.current;
 			if (r) {
-				let t = e.y < l.top + S, n = e.y > l.bottom - S;
+				let t = e.y < l.top + x, n = e.y > l.bottom - x;
 				if (!t && !n) {
 					a.current = !1;
 					return;
 				}
 			} else {
-				let t = e.x < l.left + S, n = e.x > l.right - S;
+				let t = e.x < l.left + x, n = e.x > l.right - x;
 				if (!t && !n) {
 					a.current = !1;
 					return;
@@ -102,8 +101,8 @@ var S = 30, C = (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, i) {
+}, C = 300, w = 8, T = .92, E = .5;
+function D(e, t, n, i) {
 	let a = l(null), o = l({
 		x: 0,
 		y: 0
@@ -132,7 +131,7 @@ function O(e, t, n, i) {
 			}, s.current = r;
 			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();
+			let _ = !1, v = !1, y = h.clientY, b = h.clientX, x = 0, S = 0, D = Date.now(), O = (e) => e.preventDefault();
 			document.addEventListener("selectstart", O);
 			let k = ((t) => {
 				let n = e.bodyRef?.current, r = t;
@@ -144,8 +143,8 @@ function O(e, t, n, i) {
 				return n ?? document.body;
 			})(r.target), A = (t) => {
 				t.preventDefault();
-				let n = t.touches[0], r = Date.now(), c = Math.max(r - C, 1);
-				if (C = r, v) {
+				let n = t.touches[0], r = Date.now(), c = Math.max(r - D, 1);
+				if (D = r, 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;
@@ -155,14 +154,14 @@ function O(e, t, n, i) {
 				} else if (_) i(n.clientX, n.clientY);
 				else {
 					let e = n.clientX - o.current.x, t = n.clientY - o.current.y;
-					(Math.abs(e) > T || Math.abs(t) > T) && (a.current &&= (clearTimeout(a.current), null), s.current = null, v = !0, y = n.clientY, b = n.clientX, x = 0, S = 0, C = Date.now());
+					(Math.abs(e) > w || Math.abs(t) > w) && (a.current &&= (clearTimeout(a.current), null), s.current = null, v = !0, y = n.clientY, b = n.clientX, x = 0, S = 0, D = Date.now());
 				}
 			}, j = () => {
 				if (_) M(), n();
 				else {
-					if (p(), v && k && (Math.abs(x) > D || Math.abs(S) > D)) {
+					if (p(), v && k && (Math.abs(x) > E || Math.abs(S) > E)) {
 						let e = k, t = () => {
-							x *= E, S *= E, e.scrollTop += x, e.scrollLeft += S, Math.abs(x) > D || Math.abs(S) > D ? d.current = requestAnimationFrame(t) : d.current = null;
+							x *= T, S *= T, e.scrollTop += x, e.scrollLeft += S, Math.abs(x) > E || Math.abs(S) > E ? d.current = requestAnimationFrame(t) : d.current = null;
 						};
 						d.current = requestAnimationFrame(t);
 					}
@@ -177,7 +176,7 @@ function O(e, t, n, i) {
 				a.current = null, _ = !0;
 				let e = s.current;
 				s.current = null, e && t(e, h.clientX, h.clientY);
-			}, w);
+			}, C);
 		}, [
 			t,
 			n,
@@ -193,7 +192,7 @@ function O(e, t, n, i) {
 }
 //#endregion
 //#region src/hooks/useShiftTransforms.ts
-var k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = "transform 150ms cubic-bezier(0.2, 0, 0, 1)", j = () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, M = (e, t, n, i) => {
+var O = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", k = "transform 150ms cubic-bezier(0.2, 0, 0, 1)", A = () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, j = (e, t, n, i) => {
 	let a = l({
 		width: 0,
 		height: 0
@@ -204,9 +203,9 @@ var k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = "transform 150ms cubic
 			return;
 		}
 		let s = a.current, c = t.getBoundingClientRect(), l = e.tableRef?.current?.getBoundingClientRect(), u = e.bodyRef?.current, d = u ? u.offsetWidth - u.clientWidth : 0, f = u ? u.offsetHeight - u.clientHeight : 0, p = (n ?? 0) < (r ?? 0), m = o.style.display === "none", h = parseFloat(o.style.top) || 0, g = parseFloat(o.style.left) || 0;
-		if (o.style.transition = "", o.style.transform = "", o.style.display = "block", i === "row" ? (o.style.top = `${p ? c.top + c.height - s.height : c.top}px`, o.style.left = `${l?.left ?? c.left}px`, o.style.width = `${(l?.width ?? c.width) - d}px`, o.style.height = `${s.height}px`) : (o.style.top = `${l?.top ?? c.top}px`, o.style.left = `${p ? c.left + c.width - s.width : c.left}px`, o.style.width = `${s.width}px`, o.style.height = `${(l?.height ?? c.height) - f}px`), !m && !j()) {
+		if (o.style.transition = "", o.style.transform = "", o.style.display = "block", i === "row" ? (o.style.top = `${p ? c.top + c.height - s.height : c.top}px`, o.style.left = `${l?.left ?? c.left}px`, o.style.width = `${(l?.width ?? c.width) - d}px`, o.style.height = `${s.height}px`) : (o.style.top = `${l?.top ?? c.top}px`, o.style.left = `${p ? c.left + c.width - s.width : c.left}px`, o.style.width = `${s.width}px`, o.style.height = `${(l?.height ?? c.height) - f}px`), !m && !A()) {
 			let e = g - (parseFloat(o.style.left) || 0), t = h - (parseFloat(o.style.top) || 0);
-			(e !== 0 || t !== 0) && (o.style.transform = `translate(${e}px, ${t}px)`, o.offsetHeight, o.style.transition = A, o.style.transform = "translate(0, 0)");
+			(e !== 0 || t !== 0) && (o.style.transform = `translate(${e}px, ${t}px)`, o.offsetHeight, o.style.transition = k, o.style.transform = "translate(0, 0)");
 		}
 	}, [
 		e.placeholderRef,
@@ -221,7 +220,7 @@ var k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = "transform 150ms cubic
 			let y = (t, n, i) => {
 				let a = (t, a, o) => {
 					let c = "";
-					t > e && t <= r ? c = `translate${n}(-${i}px)` : t < e && t >= r && (c = `translate${n}(${i}px)`), o.style.transform = c, o.style.transition = t === e || j() ? "none" : k, c && s.current.add(o), t === r ? a.setAttribute("data-drop-target", "true") : a.removeAttribute("data-drop-target");
+					t > e && t <= r ? c = `translate${n}(-${i}px)` : t < e && t >= r && (c = `translate${n}(${i}px)`), o.style.transform = c, o.style.transition = t === e || A() ? "none" : O, c && s.current.add(o), t === r ? a.setAttribute("data-drop-target", "true") : a.removeAttribute("data-drop-target");
 				};
 				if (m) for (let [e, { outer: n, inner: r }] of t) a(e, n, r);
 				else for (let e = h; e <= g; e++) {
@@ -235,7 +234,7 @@ var k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = "transform 150ms cubic
 				let t = i.current, a = u.current, o = (t, n, i) => {
 					let o = "";
 					t > e && t <= r ? o = `translateX(-${f.width}px)` : t < e && t >= r && (o = `translateX(${f.width}px)`);
-					for (let e of n) a.get(e) !== o && (e.style.transform = o, i && (e.style.transition = j() ? "none" : k), a.set(e, o), o && c.current.add(e));
+					for (let e of n) a.get(e) !== o && (e.style.transform = o, i && (e.style.transition = A() ? "none" : O), a.set(e, o), o && c.current.add(e));
 				};
 				if (m) for (let [e, n] of t) o(e, n, !0);
 				else for (let e = h; e <= g; e++) {
@@ -265,12 +264,12 @@ var k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = "transform 150ms cubic
 		prevTargetIndexRef: o,
 		draggedSizeRef: a
 	};
-}, ee = (e) => {
+}, M = (e) => {
 	let t = l(/* @__PURE__ */ new Map()), n = l(/* @__PURE__ */ new Map()), i = l(/* @__PURE__ */ new Map()), a = l(!1), o = r(() => {
 		t.current.clear(), n.current.clear(), i.current.clear();
 	}, []), s = r((e) => {
 		t.current.clear();
-		let n = e.querySelectorAll(".draggable[data-type=\"row\"]");
+		let n = e.querySelectorAll("[data-rtdnd=\"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;
@@ -282,7 +281,7 @@ var k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = "transform 150ms cubic
 		}
 	}, []), c = r((e) => {
 		n.current.clear();
-		let t = e.querySelectorAll(".draggable[data-type=\"column\"]");
+		let t = e.querySelectorAll("[data-rtdnd=\"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;
@@ -294,7 +293,7 @@ var k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = "transform 150ms cubic
 		}
 	}, []), u = r((e) => {
 		i.current.clear();
-		let t = e.querySelectorAll(".td[data-col-index]");
+		let t = e.querySelectorAll("[data-rtdnd=\"td\"][data-col-index]");
 		for (let e = 0; e < t.length; e++) {
 			let n = t[e], r = +n.dataset.colIndex;
 			i.current.has(r) || i.current.set(r, []), i.current.get(r).push(n);
@@ -360,18 +359,18 @@ var k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = "transform 150ms cubic
 	}
 	return +t[r].index;
 };
-function te(e, t, n) {
+function ee(e, t, n) {
 	let r = n.getBoundingClientRect();
 	return e > r.left + n.clientWidth || t > r.top + n.clientHeight;
 }
 var F = (e, t, n) => {
 	let r = Number(e);
 	return t !== void 0 && r < t || n !== void 0 && r > n;
-}, ne = (e, t) => {
+}, te = (e, t) => {
 	let n = l(null), i = l(null), a = r(() => {
 		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 = [];
+		let r = n.scrollTop, i = n.getBoundingClientRect().top, a = n.querySelectorAll("[data-rtdnd=\"draggable\"][data-type=\"row\"]"), o = [];
 		for (let e = 0; e < a.length; e++) {
 			let t = a[e];
 			if (t.dataset.index === void 0) continue;
@@ -417,7 +416,7 @@ var F = (e, t, n) => {
 		cachedContainerRef: i
 	};
 }, I = 200, L = 30, R = 5;
-function re(e) {
+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;
@@ -430,16 +429,16 @@ function re(e) {
 	return null;
 }
 var z = (e, t, n, i, o, c) => {
-	let { startAutoScroll: u, stopAutoScroll: d, setContainerRect: f, pointerRef: p, isAutoScrollingVertical: h, isAutoScrollingHorizontal: g } = C(e), _ = ee(e), { rowIndexMapRef: v, colIndexMapRef: y, cellIndexMapRef: b, mapStaleRef: x } = _, { applyShiftTransforms: S, clearShiftTransforms: w, prevTargetIndexRef: T, draggedSizeRef: E } = M(e, v, y, b), D = ne(e, o), { resolveDropIndex: k, cachedItemsRef: A, cachedContainerRef: j } = D, N = l(null), P = l({
+	let { startAutoScroll: u, stopAutoScroll: d, setContainerRect: f, pointerRef: p, isAutoScrollingVertical: h, isAutoScrollingHorizontal: g } = S(e), _ = M(e), { rowIndexMapRef: v, colIndexMapRef: y, cellIndexMapRef: b, mapStaleRef: x } = _, { applyShiftTransforms: C, clearShiftTransforms: w, prevTargetIndexRef: T, draggedSizeRef: E } = j(e, v, y, b), O = te(e, o), { resolveDropIndex: k, cachedItemsRef: A, cachedContainerRef: N } = O, P = l(null), F = l({
 		x: 0,
 		y: 0
-	}), F = l(null), z = l(null), B = l(!1), V = l(!1), H = l(null), U = l(null), W = l([]), G = r((t, r, i) => {
-		let a = re(t.target);
+	}), z = l(null), B = l(null), V = l(!1), H = l(!1), U = l(null), W = l(null), G = l([]), K = r((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 c = o.dataset.id, l = +o.dataset.index, u = o.dataset.type;
-		N.current = u ?? null, F.current = l, z.current = null, H.current = null, W.current = [], T.current = null, B.current = !1;
+		P.current = u ?? null, z.current = l, B.current = null, U.current = null, G.current = [], T.current = null, V.current = !1;
 		let d = u === "row" ? e.bodyRef?.current?.scrollLeft ?? 0 : 0, m = o.getBoundingClientRect();
 		E.current = {
 			width: m.width,
@@ -449,7 +448,7 @@ var z = (e, t, n, i, o, c) => {
 			x: r - m.left - d,
 			y: i - m.top
 		};
-		P.current = h, p.current = {
+		F.current = h, p.current = {
 			x: r,
 			y: i
 		};
@@ -457,20 +456,20 @@ var z = (e, t, n, i, o, c) => {
 			x: m.left + d,
 			y: m.top
 		};
-		A.current = u === "row" ? D.computeRowItems() : D.computeColumnItems();
+		A.current = u === "row" ? O.computeRowItems() : O.computeColumnItems();
 		let v = e.bodyRef?.current;
-		v && (j.current = v.getBoundingClientRect(), f(j.current)), _.buildMaps(u, v ?? null);
+		v && (N.current = v.getBoundingClientRect(), f(N.current)), _.buildMaps(u, 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"), U.current = b;
+		b && (b.style.opacity = "0", b.style.pointerEvents = "none", b.style.zIndex = "2", b.style.cursor = "-webkit-grabbing"), W.current = b;
 		let x = e.cloneRef?.current;
 		if (x) {
-			if (x.innerHTML = "", x.style.transform = `translate(${g.x}px, ${g.y}px)`, V.current = (v?.querySelector("[data-type=\"row\"]"))?.style.position === "absolute", u === "row") {
+			if (x.innerHTML = "", x.style.transform = `translate(${g.x}px, ${g.y}px)`, H.current = (v?.querySelector("[data-type=\"row\"]"))?.style.position === "absolute", u === "row") {
 				let e = o.firstElementChild?.firstElementChild;
 				e && x.appendChild(e.cloneNode(!0));
 			} else if (u === "column" && v) {
-				let e = String(l), t = o.querySelector(".th");
+				let e = String(l), t = o.querySelector("[data-rtdnd=\"th\"]");
 				if (t) {
 					let e = document.createElement("div");
 					e.style.flexShrink = "0", e.style.order = "-1", e.appendChild(t.cloneNode(!0)), x.appendChild(e);
@@ -478,10 +477,10 @@ var z = (e, t, n, i, o, c) => {
 				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) => {
+				r.dataset.rtdnd = "rbody", r.style.height = `${v.scrollHeight}px`, r.style.position = "relative", v.querySelectorAll("[data-type=\"row\"]").forEach((t) => {
 					let n = t.cloneNode(!0);
-					if (V.current) {
-						let t = n.querySelector(".tr");
+					if (H.current) {
+						let t = n.querySelector("[data-rtdnd=\"tr\"]");
 						if (t) {
 							let n = t.querySelector(`[data-col-index="${e}"]`);
 							for (; t.firstChild;) t.removeChild(t.firstChild);
@@ -491,8 +490,8 @@ var z = (e, t, n, i, o, c) => {
 						t.getAttribute("data-col-index") !== e && t.remove();
 					});
 					r.appendChild(n);
-				}), n.appendChild(r), V.current ? (n.style.overflow = "auto", n.style.scrollbarWidth = "none", n.className = "clone-body-strip") : n.style.overflow = "hidden", x.appendChild(n), H.current = n, W.current = [], v.querySelectorAll(`[data-col-index="${e}"]`).forEach((e) => {
-					e.style.opacity = "0", W.current.push(e);
+				}), n.appendChild(r), H.current ? (n.style.overflow = "auto", n.style.scrollbarWidth = "none", n.dataset.rtdnd = "clone-body-strip") : n.style.overflow = "hidden", x.appendChild(n), U.current = n, G.current = [], v.querySelectorAll(`[data-col-index="${e}"]`).forEach((e) => {
+					e.style.opacity = "0", G.current.push(e);
 				});
 			}
 		}
@@ -520,24 +519,24 @@ var z = (e, t, n, i, o, c) => {
 		let S = v?.scrollLeft ?? 0, C = v?.scrollTop ?? 0;
 		requestAnimationFrame(() => {
 			let t = e.cloneRef?.current;
-			t && (u === "row" ? t.scrollLeft = S : H.current && (H.current.scrollTop = C));
+			t && (u === "row" ? t.scrollLeft = S : U.current && (U.current.scrollTop = C));
 		});
 	}, [
 		n,
 		e,
 		p,
 		f,
-		D,
+		O,
 		_,
 		A,
-		j,
+		N,
 		E,
 		T
-	]), K = r((t, r, i, a, o) => {
+	]), q = r((t, r, i, a, o) => {
 		let s = e.cloneRef?.current;
-		s && (s.style.visibility = "hidden"), U.current &&= (U.current.style.opacity = "", U.current.style.pointerEvents = "", U.current.style.zIndex = "", U.current.style.cursor = "", null), W.current.forEach((e) => {
+		s && (s.style.visibility = "hidden"), W.current &&= (W.current.style.opacity = "", W.current.style.pointerEvents = "", W.current.style.zIndex = "", W.current.style.cursor = "", null), G.current.forEach((e) => {
 			e.style.opacity = "";
-		}), W.current = [];
+		}), G.current = [];
 		let l = e.tableRef?.current;
 		l && (l.style.touchAction = ""), m(() => {
 			c && t !== null && r !== null && (i === "row" || i === "column") && c({
@@ -563,49 +562,49 @@ var z = (e, t, n, i, o, c) => {
 		e.tableRef,
 		w,
 		c
-	]), q = r(() => {
-		if (B.current) return;
-		B.current = !0, Y(), setTimeout(() => {
-			X.current = !1;
+	]), J = r(() => {
+		if (V.current) return;
+		V.current = !0, X(), setTimeout(() => {
+			Z.current = !1;
 		}, 400);
-		let t = z.current, n = F.current, r = N.current, i = e.bodyRef?.current, a = i?.scrollTop ?? 0, o = i?.scrollLeft ?? 0;
-		A.current = null, j.current = null, d(), N.current = null, F.current = null, z.current = null;
+		let t = B.current, n = z.current, r = P.current, i = e.bodyRef?.current, a = i?.scrollTop ?? 0, o = i?.scrollLeft ?? 0;
+		A.current = null, N.current = null, d(), P.current = null, z.current = null, B.current = null;
 		let s = e.cloneRef?.current, c = e.placeholderRef?.current;
 		if (s && c && c.style.display !== "none") {
 			let e = parseFloat(c.style.left) || 0, i = parseFloat(c.style.top) || 0;
-			s.style.transition = `transform ${I}ms cubic-bezier(0.2, 0, 0, 1)`, s.style.transform = `translate(${e}px, ${i}px)`, setTimeout(() => K(n, t, r, a, o), I);
-		} else K(n, t, r, a, o);
+			s.style.transition = `transform ${I}ms cubic-bezier(0.2, 0, 0, 1)`, s.style.transform = `translate(${e}px, ${i}px)`, setTimeout(() => q(n, t, r, a, o), I);
+		} else q(n, t, r, a, o);
 	}, [
 		d,
 		e.bodyRef,
 		e.placeholderRef,
 		e.cloneRef,
-		K
-	]), J = l(() => {}), { touchStart: ie, cancelLongPress: Y, isTouchActiveRef: X } = O(e, G, q, (e, t) => J.current(e, t)), Z = r((e) => {
-		e.button === 0 && e.target !== e.currentTarget && (X.current || te(e.clientX, e.clientY, e.target) || G(e, e.clientX, e.clientY));
-	}, [G, X]), Q = r((t, n) => {
-		if (B.current) return;
-		let r = P.current;
+		q
+	]), Y = l(() => {}), { touchStart: re, cancelLongPress: X, isTouchActiveRef: Z } = D(e, K, J, (e, t) => Y.current(e, t)), Q = r((e) => {
+		e.button === 0 && e.target !== e.currentTarget && (Z.current || ee(e.clientX, e.clientY, e.target) || K(e, e.clientX, e.clientY));
+	}, [K, Z]), $ = r((t, n) => {
+		if (V.current) return;
+		let r = F.current;
 		p.current.x = t, p.current.y = n;
 		let a = e.bodyRef?.current;
 		if (!a) return;
-		let o = j.current;
-		(!o || x.current) && (o = a.getBoundingClientRect(), j.current = o);
+		let o = N.current;
+		(!o || x.current) && (o = a.getBoundingClientRect(), N.current = o);
 		let s = a.scrollLeft, c = a.scrollTop, l = e.cloneRef?.current;
-		l && (l.style.transform = `translate(${t - r.x}px, ${n - r.y}px)`, N.current === "row" ? l.scrollLeft = s : H.current && (H.current.scrollTop = c));
-		let f = N.current || i;
-		if (V.current && _.checkStaleness(), x.current && (A.current = null, z.current = null, T.current = null, V.current ? f === "row" ? _.rebuildRowMap(a) : _.rebuildColumnMaps(a, e.headerRef?.current ?? null) : x.current = !1), f === "row") if (n < o.top + L) u(-R, a, "vertical"), x.current = !0;
+		l && (l.style.transform = `translate(${t - r.x}px, ${n - r.y}px)`, P.current === "row" ? l.scrollLeft = s : U.current && (U.current.scrollTop = c));
+		let f = P.current || i;
+		if (H.current && _.checkStaleness(), x.current && (A.current = null, B.current = null, T.current = null, H.current ? f === "row" ? _.rebuildRowMap(a) : _.rebuildColumnMaps(a, e.headerRef?.current ?? null) : x.current = !1), f === "row") if (n < o.top + L) u(-R, a, "vertical"), x.current = !0;
 		else if (n > o.bottom - L) u(R, a, "vertical"), x.current = !0;
 		else {
 			let t = h.current;
 			d(), t && requestAnimationFrame(() => {
 				let t = e.bodyRef?.current;
 				if (!t) return;
-				V.current && _.rebuildRowMap(t), A.current = null;
+				H.current && _.rebuildRowMap(t), A.current = null;
 				let n = t.getBoundingClientRect();
-				j.current = n;
-				let r = k(p.current.x, p.current.y, "row", n, t.scrollTop, P.current, E.current);
-				z.current = r, T.current = null, S(F.current, r, "row");
+				N.current = n;
+				let r = k(p.current.x, p.current.y, "row", n, t.scrollTop, F.current, E.current);
+				B.current = r, T.current = null, C(z.current, r, "row");
 			});
 		}
 		else if (t < o.left + L) u(-R, a, "horizontal"), x.current = !0;
@@ -615,15 +614,15 @@ var z = (e, t, n, i, o, c) => {
 			d(), t && requestAnimationFrame(() => {
 				let t = e.bodyRef?.current;
 				if (!t) return;
-				V.current && _.rebuildColumnMaps(t, e.headerRef?.current ?? null), A.current = null;
+				H.current && _.rebuildColumnMaps(t, e.headerRef?.current ?? null), A.current = null;
 				let n = t.getBoundingClientRect();
-				j.current = n;
-				let r = k(p.current.x, p.current.y, "column", n, t.scrollTop, P.current, E.current);
-				z.current = r, T.current = null, S(F.current, r, "column");
+				N.current = n;
+				let r = k(p.current.x, p.current.y, "column", n, t.scrollTop, F.current, E.current);
+				B.current = r, T.current = null, C(z.current, r, "column");
 			});
 		}
 		let m = k(t, n, f, o, c, r, E.current);
-		m !== z.current && (z.current = m, requestAnimationFrame(() => S(F.current, m, f)));
+		m !== B.current && (B.current = m, requestAnimationFrame(() => C(z.current, m, f)));
 	}, [
 		p,
 		e.bodyRef,
@@ -636,16 +635,16 @@ var z = (e, t, n, i, o, c) => {
 		g,
 		_,
 		k,
-		S,
+		C,
 		A,
-		j,
+		N,
 		x,
 		T,
 		E
 	]);
-	J.current = Q;
-	let $ = r(() => {
-		Y(), A.current = null, j.current = null;
+	Y.current = $;
+	let ie = r(() => {
+		X(), A.current = null, N.current = null;
 		let t = e.cloneRef?.current;
 		t && (t.style.visibility = "hidden");
 		let r = e.tableRef?.current;
@@ -655,11 +654,11 @@ var z = (e, t, n, i, o, c) => {
 				targetIndex: null,
 				sourceIndex: null
 			}
-		}), d(), w(), N.current = null, F.current = null, z.current = null;
+		}), d(), w(), P.current = null, z.current = null, B.current = null;
 	}, [
-		Y,
+		X,
 		A,
-		j,
+		N,
 		e.cloneRef,
 		e.tableRef,
 		n,
@@ -680,22 +679,22 @@ var z = (e, t, n, i, o, c) => {
 		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, Q(e, n);
+				r = !1, $(e, n);
 			}));
-		}, a = () => q(), o = (e) => {
-			e.key === "Escape" && $();
+		}, a = () => J(), o = (e) => {
+			e.key === "Escape" && ie();
 		};
 		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,
-		Q,
-		q,
-		$
+		$,
+		J,
+		ie
 	]), {
-		dragStart: Z,
-		touchStart: ie
+		dragStart: Q,
+		touchStart: re
 	};
 }, B = {
 	columnDragRange: {
@@ -833,14 +832,14 @@ var H = {
 	left: 0,
 	display: "none"
 }, G = t(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: s }, m) => {
-	let h = l(null), v = l(null), y = l(null);
-	o(m, () => h.current, []);
-	let [b] = u(() => x(V, H)), S = d(b.subscribe, b.getState), C = b.dispatch;
+	let _ = l(null), v = l(null), y = l(null);
+	o(m, () => _.current, []);
+	let [x] = u(() => b(V, H)), S = d(x.subscribe, x.getState), C = x.dispatch;
 	a(() => {
 		C({
 			type: "setRef",
 			refName: "tableRef",
-			value: h
+			value: _
 		}), C({
 			type: "setRef",
 			refName: "cloneRef",
@@ -850,20 +849,20 @@ var H = {
 			refName: "placeholderRef",
 			value: y
 		});
-	}, [h, C]), a(() => {
+	}, [_, C]), a(() => {
 		let e = () => {
-			h.current && C({
+			_.current && C({
 				type: "setTableDimensions",
 				value: {
-					height: h.current.offsetHeight,
-					width: h.current.offsetWidth
+					height: _.current.offsetHeight,
+					width: _.current.offsetWidth
 				}
 			});
 		};
 		return e(), window.addEventListener("resize", e), () => {
 			window.removeEventListener("resize", e);
 		};
-	}, [h, C]), a(() => {
+	}, [_, C]), a(() => {
 		r && C({
 			type: "setOptions",
 			value: r
@@ -890,9 +889,9 @@ var H = {
 		S.tableDimensions.height,
 		S.tableDimensions.width
 	]);
-	return /* @__PURE__ */ f(_.Provider, {
-		value: b,
-		children: /* @__PURE__ */ p(g, {
+	return /* @__PURE__ */ f(g.Provider, {
+		value: x,
+		children: /* @__PURE__ */ p(h, {
 			className: S.dragged.isDragging ? "is-dragging" : "",
 			children: [
 				/* @__PURE__ */ f("div", {
@@ -913,14 +912,15 @@ var H = {
 				}),
 				/* @__PURE__ */ f("div", {
 					"data-contextid": "context",
-					ref: h,
+					ref: _,
 					onMouseDown: w,
 					onTouchStart: T,
 					style: {
 						...U,
 						...n
 					},
-					className: `table ${t ?? ""}`,
+					"data-rtdnd": "table",
+					className: t,
 					children: e
 				})
 			]
@@ -931,7 +931,7 @@ G.displayName = "TableProvider";
 //#endregion
 //#region src/Components/TableHeader.tsx
 var K = t(({ children: e, style: t, className: n }, i) => {
-	let o = l(null), u = i || o, d = v((e) => e.bodyScrollBarWidth), p = v((e) => e.dragged.isDragging), m = v((e) => e.refs), h = y(), g = r((e) => "current" in e ? e.current : null, []);
+	let o = l(null), u = i || o, d = _((e) => e.bodyScrollBarWidth), p = _((e) => e.dragged.isDragging), m = _((e) => e.refs), h = v(), g = r((e) => "current" in e ? e.current : null, []);
 	a(() => {
 		o.current && h({
 			type: "setRef",
@@ -939,7 +939,7 @@ var K = t(({ children: e, style: t, className: n }, i) => {
 			value: o
 		});
 	}, [h]);
-	let { HeaderScrollHandle: _ } = C(m), b = {
+	let { HeaderScrollHandle: y } = S(m), b = {
 		display: "flex",
 		flex: "1 0 auto"
 	}, x = c(() => ({
@@ -959,7 +959,7 @@ var K = t(({ children: e, style: t, className: n }, i) => {
 		let e = g(u);
 		e && h({
 			type: "setWidths",
-			value: Array.from(e.querySelectorAll(".th")).map((e) => {
+			value: Array.from(e.querySelectorAll("[data-rtdnd=\"th\"]")).map((e) => {
 				let t = e.getAttribute("data-width");
 				return t ? parseInt(t, 10) : 0;
 			})
@@ -973,7 +973,7 @@ var K = t(({ children: e, style: t, className: n }, i) => {
 		let e = g(u);
 		e && h({
 			type: "setColumnIds",
-			value: Array.from(e.querySelectorAll(".draggable")).map((e) => e.getAttribute("data-id") || "")
+			value: Array.from(e.querySelectorAll("[data-rtdnd=\"draggable\"]")).map((e) => e.getAttribute("data-id") || "")
 		});
 	}, [
 		e,
@@ -981,16 +981,17 @@ var K = t(({ children: e, style: t, className: n }, i) => {
 		g,
 		u
 	]), /* @__PURE__ */ f("div", {
-		className: `header ${n ?? ""}`,
+		"data-rtdnd": "header",
+		className: n,
 		children: /* @__PURE__ */ f("div", {
-			className: "thead",
+			"data-rtdnd": "thead",
 			style: x,
 			"data-droppableid": "header",
-			onScroll: _,
+			onScroll: y,
 			ref: u,
 			children: /* @__PURE__ */ f("div", {
 				style: b,
-				className: "tr",
+				"data-rtdnd": "tr",
 				children: e
 			})
 		})
@@ -1000,7 +1001,7 @@ K.displayName = "TableHeader";
 //#endregion
 //#region src/Components/Draggable.tsx
 var q = n(({ children: e, id: t, index: n, type: r, styles: i = {} }) => {
-	let o = v((e) => e.options.rowDragRange), s = v((e) => e.options.columnDragRange), u = c(() => r === "row" ? F(n, o.start, o.end) : F(n, s.start, s.end), [
+	let o = _((e) => e.options.rowDragRange), s = _((e) => e.options.columnDragRange), u = c(() => r === "row" ? F(n, o.start, o.end) : F(n, s.start, s.end), [
 		n,
 		s.end,
 		s.start,
@@ -1015,7 +1016,7 @@ var q = n(({ children: e, id: t, index: n, type: r, styles: i = {} }) => {
 		!p.current || !d.current || (p.current.querySelector("[data-drag-handle]") ? p.current.style.cursor = "auto" : u || (d.current.style.touchAction = "none"));
 	}, [e, u]), /* @__PURE__ */ f("div", {
 		ref: d,
-		className: "draggable",
+		"data-rtdnd": "draggable",
 		"data-id": t,
 		"data-index": n,
 		"data-type": r,
@@ -1032,7 +1033,7 @@ q.displayName = "Draggable";
 //#endregion
 //#region src/Components/ColumnCell.tsx
 var J = n(({ children: e, style: t, className: n, ...r }) => {
-	let i = v((e) => e.options.defaultSizing), { width: a, flex: o, ...s } = t ?? {}, l = c(() => a === void 0 ? i : typeof a == "number" ? a : parseFloat(String(a)) || i, [a, i]), u = c(() => ({
+	let i = _((e) => e.options.defaultSizing), { width: a, flex: o, ...s } = t ?? {}, l = c(() => a === void 0 ? i : typeof a == "number" ? a : parseFloat(String(a)) || i, [a, i]), u = c(() => ({
 		width: `${l}px`,
 		flex: o === void 0 ? `${l} 0 auto` : o,
 		boxSizing: "border-box"
@@ -1042,7 +1043,8 @@ var J = n(({ children: e, style: t, className: n, ...r }) => {
 		styles: u,
 		type: "column",
 		children: /* @__PURE__ */ f("div", {
-			className: `th ${n ?? ""}`,
+			"data-rtdnd": "th",
+			className: n,
 			"data-width": l,
 			style: {
 				width: "100%",
@@ -1056,14 +1058,14 @@ var J = n(({ children: e, style: t, className: n, ...r }) => {
 J.displayName = "ColumnCell";
 //#endregion
 //#region src/Components/TableBody.tsx
-var ie = {
+var Y = {
 	display: "flex",
 	overflow: "hidden",
 	flex: 1
-}, Y = t(({ children: e, style: t, className: n }, r) => {
+}, re = t(({ children: e, style: t, className: n }, r) => {
 	let i = l(null);
 	o(r, () => i.current, []);
-	let u = v((e) => e.dragged.isDragging), d = v((e) => e.refs), p = y();
+	let u = _((e) => e.dragged.isDragging), d = _((e) => e.refs), p = v();
 	a(() => {
 		p({
 			type: "setRef",
@@ -1071,7 +1073,7 @@ var ie = {
 			value: i
 		});
 	}, [p, i]);
-	let { BodyScrollHandle: m } = C(d), h = c(() => ({
+	let { BodyScrollHandle: m } = S(d), h = c(() => ({
 		overflowX: "auto",
 		overflowY: "auto",
 		flex: 1,
@@ -1087,10 +1089,11 @@ var ie = {
 			});
 		}
 	}, [p, i]), /* @__PURE__ */ f("div", {
-		className: `body ${n ?? ""}`,
-		style: ie,
+		"data-rtdnd": "body",
+		className: n,
+		style: Y,
 		children: /* @__PURE__ */ f("div", {
-			className: "ibody",
+			"data-rtdnd": "ibody",
 			style: h,
 			"data-droppableid": "body",
 			onScroll: m,
@@ -1106,12 +1109,13 @@ var ie = {
 	let i = c(() => t ? {
 		...X,
 		...t
-	} : X, [t]), a = h("tr", n);
+	} : X, [t]);
 	return /* @__PURE__ */ f(q, {
 		...r,
 		type: "row",
 		children: /* @__PURE__ */ f("div", {
-			className: a,
+			"data-rtdnd": "tr",
+			className: n,
 			style: i,
 			children: e
 		})
@@ -1121,7 +1125,7 @@ Z.displayName = "BodyRow";
 //#endregion
 //#region src/Components/RowCell.tsx
 var Q = n(({ children: e, style: t, className: n, ...r }) => {
-	let { index: i } = r, a = v((e) => e.widths), o = v((e) => e.options.defaultSizing), s = c(() => a[i] ?? o, [
+	let { index: i } = r, a = _((e) => e.widths), o = _((e) => e.options.defaultSizing), s = c(() => a[i] ?? o, [
 		a,
 		i,
 		o
@@ -1133,7 +1137,8 @@ var Q = n(({ children: e, style: t, className: n, ...r }) => {
 		boxSizing: "border-box"
 	}), [s, t]);
 	return /* @__PURE__ */ f("div", {
-		className: `td ${n ?? ""}`,
+		"data-rtdnd": "td",
+		className: n,
 		style: l,
 		"data-col-index": i,
 		children: e
@@ -1156,4 +1161,4 @@ var $ = n(({ children: e, className: t, style: n }) => /* @__PURE__ */ f("div",
 }));
 $.displayName = "DragHandle";
 //#endregion
-export { Z as BodyRow, J as ColumnCell, $ as DragHandle, Q as RowCell, Y as TableBody, G as TableContainer, K as TableHeader, b as useTable, y as useTableDispatch, v as useTableStore };
+export { Z as BodyRow, J as ColumnCell, $ as DragHandle, Q as RowCell, re as TableBody, G as TableContainer, K as TableHeader, y as useTable, v as useTableDispatch, _ as useTableStore };

package/dist/react-table-dnd.css

@@ -1,2 +1,2 @@
-[data-flexitable-root] [data-id]:not(:has([data-drag-handle])){touch-action:none}[data-flexitable-root] [data-drag-handle]{touch-action:none}[data-flexitable-root],[data-flexitable-root] .table,[data-flexitable-root] .header,[data-flexitable-root] .thead,[data-flexitable-root] .body,[data-flexitable-root] .ibody,[data-flexitable-root] .draggable,[data-flexitable-root] .tr{box-sizing:border-box;margin:0;padding:0}[data-flexitable-root]{height:100%}[data-flexitable-root] .th,[data-flexitable-root] .td{box-sizing:border-box}[data-flexitable-root].is-dragging,[data-flexitable-root].is-dragging *{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}[data-flexitable-root] .thead::-webkit-scrollbar{display:none}[data-flexitable-root] .clone-body-strip::-webkit-scrollbar{display:none}[data-flexitable-root]:not(.is-dragging) .draggable:has([data-drag-handle])>div{cursor:default!important}[data-flexitable-root]:not(.is-dragging) [data-drag-handle]{cursor:-webkit-grab;cursor:grab}
+[data-flexitable-root] [data-id]:not(:has([data-drag-handle])){touch-action:none}[data-flexitable-root] [data-drag-handle]{touch-action:none}[data-flexitable-root] [data-id]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}[data-flexitable-root],[data-flexitable-root] [data-rtdnd=table],[data-flexitable-root] [data-rtdnd=header],[data-flexitable-root] [data-rtdnd=thead],[data-flexitable-root] [data-rtdnd=body],[data-flexitable-root] [data-rtdnd=ibody],[data-flexitable-root] [data-rtdnd=draggable],[data-flexitable-root] [data-rtdnd=tr]{box-sizing:border-box;margin:0;padding:0}[data-flexitable-root]{height:100%}[data-flexitable-root] [data-rtdnd=th],[data-flexitable-root] [data-rtdnd=td]{box-sizing:border-box}[data-flexitable-root].is-dragging,[data-flexitable-root].is-dragging *{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}[data-flexitable-root] [data-rtdnd=thead]::-webkit-scrollbar{display:none}[data-flexitable-root] [data-rtdnd=clone-body-strip]::-webkit-scrollbar{display:none}[data-flexitable-root]:not(.is-dragging) [data-rtdnd=draggable]:has([data-drag-handle])>div{cursor:default!important}[data-flexitable-root]:not(.is-dragging) [data-drag-handle]{cursor:-webkit-grab;cursor:grab}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table-dnd",
-  "version": "2.0.7",
+  "version": "2.0.12",
   "type": "module",
   "description": "Sortable table with draggable rows and columns",
   "main": "dist/index.cjs.js",
@@ -13,7 +13,8 @@
       "require": "./dist/index.cjs.js",
       "types": "./dist/index.d.ts"
     },
-    "./styles": "./dist/react-table-dnd.css"
+    "./styles": "./dist/react-table-dnd.css",
+    "./dist/react-table-dnd.css": "./dist/react-table-dnd.css"
   },
   "sideEffects": [
     "**/*.css"