flexitablesort 1.1.7 → 1.1.9

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-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(`styled-components`);l=s(l);let u=require(`react/jsx-runtime`),d=require(`react-dom`),f=require(`classnames`);f=s(f);var p=l.default.div`
+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(`styled-components`);l=s(l);let u=require(`react-dom`),d=require(`react/jsx-runtime`),f=require(`classnames`);f=s(f);var p=l.default.div`
   height: 100%;
 
   /* Structural elements: full reset */
@@ -16,7 +16,19 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
   }
 
   &.is-dragging, &.is-dragging * {
+    cursor: -webkit-grabbing !important;
+    cursor: grabbing !important;
     user-select: none !important;
     -webkit-user-select: none !important;
+    -webkit-touch-callout: none !important;
   }
-`,m=(0,c.createContext)(void 0),h=()=>{let e=(0,c.useContext)(m);if(e===void 0)throw Error(`useTable must be used within a TableProvider`);return e},g=30,_=e=>{let t=(0,c.useRef)(!1),n=(0,c.useRef)(!1),r=(0,c.useRef)(0),i=(0,c.useRef)(null),a=(0,c.useRef)({x:0,y:0}),o=(0,c.useRef)(null),s=(0,c.useCallback)(e=>{o.current=e},[]),l=(0,c.useCallback)(()=>{n.current=!1,t.current=!1,i.current!==null&&(cancelAnimationFrame(i.current),i.current=null)},[]),u=(0,c.useCallback)((e,s,c)=>{let l=c===`vertical`,d=l?n:t;if(!d.current)return;let f=o.current;if(f){let e=a.current;if(l){let t=e.y<f.top+g,n=e.y>f.bottom-g;if(!t&&!n){d.current=!1;return}}else{let t=e.x<f.left+g,n=e.x>f.right-g;if(!t&&!n){d.current=!1;return}}}let p=l?s.scrollHeight-s.clientHeight:s.scrollWidth-s.clientWidth;l?s.scrollTop+=e:s.scrollLeft+=e;let m=l?s.scrollTop:s.scrollLeft;if(m>=p||m<=0){d.current=!1;return}r.current+=e/1e3,i.current=requestAnimationFrame(()=>u(e+r.current,s,c))},[]);return{startAutoScroll:(0,c.useCallback)((e,a,o)=>{let s=o===`vertical`?n:t;s.current||(s.current=!0,r.current=0,i.current=requestAnimationFrame(()=>u(e,a,o)))},[u]),stopAutoScroll:l,setContainerRect:s,isAutoScrollingVertical:n,isAutoScrollingHorizontal:t,pointerRef:a,BodyScrollHandle:(0,c.useCallback)(t=>{e.headerRef?.current&&t.currentTarget&&(e.headerRef.current.scrollLeft=t.currentTarget.scrollLeft)},[e]),HeaderScrollHandle:(0,c.useCallback)(t=>{e.bodyRef?.current&&t.currentTarget&&(e.bodyRef.current.scrollLeft=t.currentTarget.scrollLeft)},[e])}},v=300,y=8;function b(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.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 d=c.target,f=!1;for(;d&&!(d.dataset?.contextid||d.dataset?.disabled===`true`);){if(d.dataset?.id){f=!0;break}d=d.parentNode}if(!f)return;u(),s.current=!0;let p=c.touches[0];a.current={x:p.clientX,y:p.clientY},o.current=c;let m=e.tableRef?.current;if(!m)return;let h=!1,g=!1,_=p.clientY,b=p.clientX,x=t=>{t.preventDefault();let n=t.touches[0];if(g){let t=e.bodyRef?.current;t&&(t.scrollTop-=n.clientY-_,t.scrollLeft-=n.clientX-b),_=n.clientY,b=n.clientX}else if(h)r(n.clientX,n.clientY);else{let e=n.clientX-a.current.x,t=n.clientY-a.current.y;(Math.abs(e)>y||Math.abs(t)>y)&&(i.current&&=(clearTimeout(i.current),null),o.current=null,g=!0,_=n.clientY,b=n.clientX)}},S=()=>{h?(C(),n()):(u(),setTimeout(()=>{s.current=!1},400))},C=()=>{m.removeEventListener(`touchmove`,x),m.removeEventListener(`touchend`,S),m.removeEventListener(`touchcancel`,S),l.current=null};m.addEventListener(`touchmove`,x,{passive:!1}),m.addEventListener(`touchend`,S,!1),m.addEventListener(`touchcancel`,S,!1),l.current=C,i.current=setTimeout(()=>{i.current=null,h=!0;let e=o.current;o.current=null,e&&t(e,p.clientX,p.clientY)},v)},[t,n,r,u,e.tableRef?.current,e.bodyRef?.current]),cancelLongPress:u,isTouchActiveRef:s}}var x=(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},S=(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},C=(e,t,n)=>t!==void 0&&e<t||n!==void 0&&e>n,w=`all 450ms cubic-bezier(0.2, 0, 0, 1)`,T=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,setContainerRect:l,pointerRef:u}=_(e),d=(0,c.useRef)(null),f=(0,c.useRef)(null),p=(0,c.useRef)(null),m=(0,c.useRef)({x:0,y:0}),h=(0,c.useRef)(null),g=(0,c.useRef)(null),v=(0,c.useRef)({width:0,height:0}),y=(0,c.useRef)({x:0,y:0}),C=(0,c.useCallback)(()=>{let t=e.bodyRef?.current;if(!t)return null;let n=t.scrollTop,r=t.getBoundingClientRect().top,a=t.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 i=t.getBoundingClientRect(),s=i.top-r+n;o.push({height:i.height,itemTop:s,itemBottom:s+i.height,index:t.dataset.index})}let{start:s,end:c}=i.rowDragRange;return(s||c)&&(o=o.filter(e=>(!s||+e.index>=s)&&(!c||+e.index<c))),o},[e.bodyRef,i.rowDragRange]),T=(0,c.useCallback)(()=>{let t=e.headerRef?.current;if(!t||!t.children[0])return null;let n=Array.from(t.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:r,end:a}=i.columnDragRange??{};return(r!==void 0||a!==void 0)&&(n=n.filter(e=>{let t=+e.index;return(r===void 0||t>=r)&&(a===void 0||t<a)})),n},[e.headerRef,i.columnDragRange]),E=(0,c.useCallback)((t,n,r,i)=>{let a=e.placeholderRef?.current;if(!a||!t){a&&(a.style.display=`none`);return}let o=v.current,s=t.getBoundingClientRect(),c=e.tableRef?.current?.getBoundingClientRect(),l=(n??0)<(r??0);a.style.display=`block`,i===`row`?(a.style.top=`${l?s.top+s.height-o.height:s.top}px`,a.style.left=`${c?.left??s.left}px`,a.style.width=`${c?.width??s.width}px`,a.style.height=`${o.height}px`):(a.style.top=`${c?.top??s.top}px`,a.style.left=`${l?s.left+s.width-o.width:s.left}px`,a.style.width=`${o.width}px`,a.style.height=`${c?.height??s.height}px`)},[e.placeholderRef,e.tableRef]),D=(0,c.useCallback)((t,n,r)=>{if(t===null||n===null)return;let i=v.current,a=null,o=(e,r,i,o)=>{if(!e)return;let s=e.querySelectorAll(r);for(let e=0;e<s.length;e++){let r=s[e],c=+r.dataset.index,l=r.firstElementChild;if(!l)continue;let u=``;c>t&&c<=n?u=`translate${i}(-${o}px)`:c<t&&c>=n&&(u=`translate${i}(${o}px)`),l.style.transform=u,l.style.transition=c===t?`none`:w,c===n?(r.setAttribute(`data-drop-target`,`true`),a=r):r.removeAttribute(`data-drop-target`)}};if(r===`row`)o(e.bodyRef?.current??null,`.draggable[data-type="row"]`,`Y`,i.height);else if(r===`column`){o(e.headerRef?.current??null,`.draggable[data-type="column"]`,`X`,i.width);let r=e.bodyRef?.current;if(r){let e=r.querySelectorAll(`.td[data-col-index]`);for(let r=0;r<e.length;r++){let a=e[r],o=+a.dataset.colIndex,s=``;o>t&&o<=n?s=`translateX(-${i.width}px)`:o<t&&o>=n&&(s=`translateX(${i.width}px)`),a.style.transform=s,a.style.transition=w}}}E(a,t,n,r)},[e.bodyRef,e.headerRef,E]),O=(0,c.useCallback)(()=>{let t=e.placeholderRef?.current;t&&(t.style.display=`none`);for(let t of[e.bodyRef?.current,e.headerRef?.current]){if(!t)continue;let e=t.querySelectorAll(`.draggable`);for(let t=0;t<e.length;t++){e[t].removeAttribute(`data-drop-target`);let n=e[t].firstElementChild;n&&(n.style.transform=``,n.style.transition=``)}}let n=e.bodyRef?.current;if(n){let e=n.querySelectorAll(`.td[data-col-index]`);for(let t=0;t<e.length;t++)e[t].style.transform=``,e[t].style.transition=``}},[e.bodyRef,e.headerRef,e.placeholderRef]),k=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},A=(0,c.useCallback)((t,r,i)=>{let a=k(t.target);if(!a)return;let{element:o,foundHandle:s}=a;if(!s&&o.querySelector(`[data-drag-handle]`))return;let c=o.dataset.id,_=+o.dataset.index,b=o.dataset.type,x=t.type===`touchstart`;p.current=b,h.current=_,g.current=null,x&&o.dispatchEvent(new PointerEvent(`pointerdown`,{bubbles:!0,pointerType:`mouse`}));let S=b===`row`?e.bodyRef?.current?.scrollLeft??0:0,w=o.getBoundingClientRect();v.current={width:w.width,height:w.height};let E={x:r-w.left-S,y:i-w.top};m.current=E,y.current={x:r,y:i},u.current={x:r,y:i};let D={x:w.left+S,y:w.top};d.current=b===`row`?C():T();let O=e.bodyRef?.current;if(O){let e=O.getBoundingClientRect();f.current=e,l(e)}let A=e.tableRef?.current;A&&(A.style.touchAction=`none`);let j=e.cloneRef?.current;j&&(j.style.transform=`translate(${D.x}px, ${D.y}px)`);let M=e.tableRef?.current;M&&n({type:`setTableDimensions`,value:{height:M.offsetHeight,width:M.offsetWidth}}),n({type:`dragStart`,value:{rect:{draggedItemHeight:w.height,draggedItemWidth:w.width},dragged:{initial:E,translate:D,draggedID:c,isDragging:!0,sourceIndex:_},dragType:b}});let N=()=>{let t=e.cloneRef?.current,n=e.bodyRef?.current;if(!(!t||!n))if(b===`row`)t.scrollLeft=n.scrollLeft;else{let e=t.querySelector(`.clone-body`);e&&(e.scrollTop=n.scrollTop)}};N(),requestAnimationFrame(()=>{N(),requestAnimationFrame(N)})},[n,e,C,T,u,l]),j=(0,c.useCallback)(()=>{P(),setTimeout(()=>{F.current=!1},400);let t=g.current,r=h.current,i=p.current,o=e.bodyRef?.current,c=o?.scrollTop??0,l=o?.scrollLeft??0;d.current=null,f.current=null;let u=e.cloneRef?.current;u&&(u.style.transform=`translate(0px, 0px)`,u.scrollLeft=0);let m=e.tableRef?.current;m&&(m.style.touchAction=``),O(),a&&r!==null&&t!==null&&(i===`row`||i===`column`)&&a({sourceIndex:r,targetIndex:t,dragType:i}),n({type:`dragEnd`,value:{targetIndex:t,sourceIndex:r}}),s(),o&&(o.scrollTop=c,o.scrollLeft=l,requestAnimationFrame(()=>{o.scrollTop=c,o.scrollLeft=l})),p.current=null,h.current=null,g.current=null},[n,s,e.bodyRef,e.cloneRef,e.tableRef,O,a]),M=(0,c.useRef)(()=>{}),{touchStart:N,cancelLongPress:P,isTouchActiveRef:F}=b(e,A,j,(e,t)=>M.current(e,t)),I=(0,c.useCallback)(e=>{e.target!==e.currentTarget&&(F.current||A(e,e.clientX,e.clientY))},[A,F]),L=(0,c.useCallback)((t,n)=>{let i=m.current;y.current={x:t,y:n},u.current={x:t,y:n};let a=e.cloneRef?.current;if(a){a.style.transform=`translate(${t-i.x}px, ${n-i.y}px)`;let r=e.bodyRef?.current;if(r)if(p.current===`row`)a.scrollLeft=r.scrollLeft;else{let e=a.querySelector(`.clone-body`);e&&(e.scrollTop=r.scrollTop)}}let c=e.bodyRef?.current;if(!c)return;let l=f.current;l||(l=c.getBoundingClientRect(),f.current=l);let _=0,v=p.current||r;v===`row`?n<l.top+30?(o(-5,c,`vertical`),d.current=null):n>l.bottom-30?(o(5,c,`vertical`),d.current=null):s():t<l.left+30?(o(-5,c,`horizontal`),d.current=null):t>l.right-30?(o(5,c,`horizontal`),d.current=null):s();let b;v===`row`?(b=C(),d.current=b,b&&b.length>0&&(_=x(n-l.top+c.scrollTop,b))):(b=T(),d.current=b,b&&b.length>0&&(_=S(t,b))),_!==g.current&&(g.current=_,requestAnimationFrame(()=>D(h.current,_,v)))},[r,e.bodyRef,e.cloneRef,C,T,o,s,D,u]);M.current=L;let R=(0,c.useCallback)(()=>{P(),d.current=null,f.current=null;let t=e.cloneRef?.current;t&&(t.style.transform=`translate(0px, 0px)`,t.scrollLeft=0);let r=e.tableRef?.current;r&&(r.style.touchAction=``),O(),n({type:`dragEnd`,value:{targetIndex:null,sourceIndex:null}}),s(),p.current=null,h.current=null,g.current=null},[n,s,e.cloneRef,e.tableRef,O,P]),z=(0,c.useCallback)(e=>{e.key===`Escape`&&R()},[R]);return(0,c.useEffect)(()=>{let t=e.bodyRef?.current;return t&&(t.style.touchAction=`none`),()=>{t&&(t.style.touchAction=``)}},[e.bodyRef]),(0,c.useEffect)(()=>{if(!t.isDragging)return;let e=e=>{L(e.clientX,e.clientY)},n=()=>{j()};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,n),window.addEventListener(`pointercancel`,n),window.addEventListener(`keydown`,z),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,n),window.removeEventListener(`pointercancel`,n),window.removeEventListener(`keydown`,z)}},[t.isDragging,L,j,z]),{dragStart:I,touchStart:N}},E={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function D(e,t){switch(t.type){case`setClone`:return{...e,clone:t.value};case`setDragged`:return{...e,dragged:{...e.dragged,...t.value}};case`setDragType`:return{...e,dragType:t.value};case`setRect`:return{...e,rect:t.value};case`setTableDimensions`:return{...e,tableDimensions:t.value};case`setTableRef`:return{...e,refs:{...e.refs,tableRef:t.value}};case`setBodyRef`:return{...e,refs:{...e.refs,bodyRef:t.value}};case`setHeaderRef`:return{...e,refs:{...e.refs,headerRef:t.value}};case`setCloneRef`:return{...e,refs:{...e.refs,cloneRef:t.value}};case`setPlaceholderRef`:return{...e,refs:{...e.refs,placeholderRef: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:t.value??E};case`dragStart`:return{...e,rect:t.value.rect,dragged:{...e.dragged,...t.value.dragged},dragType:t.value.dragType};case`dragEnd`:return{...e,clone:null,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 type: ${t.type}`)}}var O={clone:null,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:null,bodyRef:null,headerRef:null,cloneRef:null,placeholderRef:null},bodyScrollBarWidth:0,options:E,widths:[],columnIds:[]},k={position:`relative`,display:`flex`,flexFlow:`column`},A={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},j=(0,c.forwardRef)(({children:e,className:t,style:n,options:r,onDragEnd:i,renderPlaceholder:a},o)=>{let s=(0,c.useRef)(null),l=(0,c.useRef)(null),d=(0,c.useRef)(null);(0,c.useImperativeHandle)(o,()=>s.current,[]);let[f,h]=(0,c.useReducer)(D,O),g=(0,c.useMemo)(()=>({state:f,dispatch:h}),[f]);(0,c.useEffect)(()=>{h({type:`setTableRef`,value:s}),h({type:`setCloneRef`,value:l}),h({type:`setPlaceholderRef`,value:d})},[s]),(0,c.useEffect)(()=>{let e=()=>{s.current&&h({type:`setTableDimensions`,value:{height:s.current.offsetHeight,width:s.current.offsetWidth}})};return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[s]),(0,c.useEffect)(()=>{h({type:`setOptions`,value:r})},[r]);let{dragStart:_,touchStart:v}=T(f.refs,f.dragged,h,f.dragType,f.options,i),y=(0,c.useMemo)(()=>({position:`fixed`,zIndex:`5`,pointerEvents:`none`,top:0,left:0,display:`flex`,flexDirection:`column`,height:f.dragType===`row`?f.rect.draggedItemHeight:`${f.tableDimensions.height}px`,width:f.dragType===`column`?`${f.rect.draggedItemWidth}px`:`${f.tableDimensions.width}px`,overflow:`hidden`,boxShadow:f.dragged.isDragging?`0 0 10px 0 rgba(0, 0, 0, 0.1)`:`none`}),[f.dragType,f.dragged.isDragging,f.rect.draggedItemHeight,f.rect.draggedItemWidth,f.tableDimensions.height,f.tableDimensions.width]);return(0,u.jsx)(m.Provider,{value:g,children:(0,u.jsxs)(p,{className:f.dragged.isDragging?`is-dragging`:``,children:[(0,u.jsx)(`div`,{id:`portalroot`,style:{...y,visibility:f.dragged.isDragging?`visible`:`hidden`},ref:l,children:(0,u.jsx)(`div`,{style:{flexShrink:0,order:-1},children:f.clone})}),a&&(0,u.jsx)(`div`,{ref:d,style:A,children:a()}),(0,u.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:_,onTouchStart:v,style:{...k,...n},className:`table ${t??``}`,children:e})]})})});j.displayName=`TableProvider`;var M=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null),a=r||i,{state:o,dispatch:s}=h();(0,c.useEffect)(()=>{s({type:`setHeaderRef`,value:a})},[s,a]);let{HeaderScrollHandle:l}=_(o.refs),d={display:`flex`,flex:`1 0 auto`},f=(0,c.useMemo)(()=>({overflow:`hidden`,display:`flex`,paddingRight:`${o.bodyScrollBarWidth}px`,userSelect:o.dragged.isDragging?`none`:`auto`,...t}),[o.bodyScrollBarWidth,o.dragged.isDragging,t]);return(0,c.useEffect)(()=>{a.current&&s({type:`setWidths`,value:Array.from(a.current.querySelectorAll(`.th`)).map(e=>{let t=e.getAttribute(`data-width`);return t?parseInt(t,10):null})})},[e,s,a]),(0,c.useEffect)(()=>{a.current&&s({type:`setColumnIds`,value:Array.from(a.current.querySelectorAll(`.draggable`)).map(e=>e.getAttribute(`data-id`))})},[e,s,a]),(0,u.jsx)(`div`,{className:`header ${n??``}`,children:(0,u.jsx)(`div`,{className:`thead`,style:f,"data-droppableid":`header`,onScroll:l,ref:a,children:(0,u.jsx)(`div`,{style:d,className:`tr`,children:e})})})});M.displayName=`TableHeader`;var N=(0,c.memo)(({children:e,id:t,index:n,type:r,styles:i={}})=>{let{state:a,dispatch:o}=h(),s=(0,c.useMemo)(()=>String(t)===String(a.dragged.draggedID)&&a.dragged.isDragging,[t,a.dragged.draggedID,a.dragged.isDragging]),l=(0,c.useMemo)(()=>r===`row`?C(n,a.options.rowDragRange.start,a.options.rowDragRange.end):C(n,a.options.columnDragRange.start,a.options.columnDragRange.end),[n,a.options.columnDragRange.end,a.options.columnDragRange.start,a.options.rowDragRange.end,a.options.rowDragRange.start,r]),d=(0,c.useRef)(null),f=(0,c.useRef)(!1);(0,c.useEffect)(()=>{d.current&&(f.current=!!d.current.querySelector(`[data-drag-handle]`))});let p=(0,c.useMemo)(()=>({cursor:s?`-webkit-grabbing`:l||f.current?`auto`:`-webkit-grab`,zIndex:s?2:1,opacity:s?0:1,pointerEvents:s?`none`:`auto`,display:`flex`}),[l,s]),m=t=>{t.pointerType!==`touch`&&(l||requestAnimationFrame(()=>{o({type:`setClone`,value:c.default.cloneElement(e)})}))};return(0,u.jsx)(`div`,{className:`draggable`,"data-id":t,"data-index":n,"data-type":r,onPointerDown:m,"data-disabled":l?`true`:`false`,style:i,children:(0,u.jsx)(`div`,{ref:d,style:p,children:e})})});N.displayName=`Draggable`;var P=(0,c.memo)(({children:e,width:t,style:n,className:r,...i})=>{let{state:a}=h(),o=(0,c.useMemo)(()=>t??a.options.defaultSizing,[t,a.options.defaultSizing]),s=(0,c.useMemo)(()=>({width:`${o}px`,flex:`${o} 0 auto`}),[o]);return(0,u.jsx)(N,{...i,styles:s,type:`column`,children:(0,u.jsx)(`div`,{className:`th ${r??``}`,"data-width":t,style:{width:`100%`,...n},children:e})})});P.displayName=`ColumnCell`;var F=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null);(0,c.useImperativeHandle)(r,()=>i.current,[]);let{state:a,dispatch:o}=h(),s=(0,c.useMemo)(()=>{if(a.dragged.sourceIndex===null)return null;let t=e=>{let n=[];return c.default.Children.forEach(e,e=>{c.default.isValidElement(e)&&(e.props.id!==void 0&&e.props.index!==void 0&&e.props.children?n.push(e):e.props.children&&n.push(...t(e.props.children)))}),n};return t(e).map(e=>{let t=c.default.Children.toArray(e.props.children).filter(e=>c.default.isValidElement(e)&&String(e.props.index)===String(a.dragged.sourceIndex)).map(e=>c.default.cloneElement(e,{isClone:!0}));return c.default.cloneElement(e,{...e.props,children:t})})},[e,a.dragged.sourceIndex]);(0,c.useEffect)(()=>{o({type:`setBodyRef`,value:i})},[o,i]);let{BodyScrollHandle:l}=_(a.refs),f=(0,c.useMemo)(()=>({overflowX:`auto`,overflowY:`auto`,flex:1,userSelect:a.dragged.isDragging?`none`:`auto`,...t}),[a.dragged.isDragging,t]);(0,c.useEffect)(()=>{if(i.current){let e=i.current.clientWidth;o({type:`setBodyScrollBarWidth`,value:i.current.offsetWidth-e})}},[o,i]);let p=i.current?.scrollHeight??0;return(0,u.jsxs)(c.default.Fragment,{children:[a.dragType===`column`&&a.refs.cloneRef?.current&&(0,d.createPortal)((0,u.jsx)(`div`,{className:`body clone-body`,"data-droppableid":`body`,style:{overflow:`hidden`,flex:1},children:(0,u.jsx)(`div`,{className:`rbody`,style:{height:p,position:`relative`},children:s})}),a.refs.cloneRef.current),(0,u.jsx)(`div`,{className:`body ${n??``}`,style:I,children:(0,u.jsx)(`div`,{className:`ibody`,style:f,"data-droppableid":`body`,onScroll:l,ref:i,children:e})})]})}),I={display:`flex`,overflow:`hidden`,flex:1};F.displayName=`TableBody`;var L={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},R=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,c.useMemo)(()=>t?{...L,...t}:L,[t]),a=(0,f.default)(`tr`,n);return(0,u.jsx)(N,{...r,type:`row`,children:(0,u.jsx)(`div`,{className:a,style:i,children:e})})});R.displayName=`BodyRow`;var z=(0,c.memo)(({children:e,style:t,className:n,isClone:r,...i})=>{let{index:a}=i,{state:o}=h(),s=(0,c.useMemo)(()=>o.columnIds[a]??``,[o.columnIds,a]),l=(0,c.useMemo)(()=>o.widths[a]??o.options.defaultSizing,[o.widths,a,o.options.defaultSizing]),d=(0,c.useMemo)(()=>r?!1:s===o.dragged.draggedID,[r,s,o.dragged.draggedID]),f=(0,c.useMemo)(()=>({display:`inline-flex`,opacity:d?0:1,width:`${l}px`,flex:`${l} 0 auto`,...t}),[d,l,t]);return(0,u.jsx)(`div`,{className:`td ${n??``}`,style:f,"data-col-index":a,children:e})});z.displayName=`RowCell`;var B=(0,c.memo)(({children:e,className:t,style:n})=>(0,u.jsx)(`div`,{"data-drag-handle":`true`,className:t,style:{cursor:`-webkit-grab`,display:`inline-flex`,alignItems:`center`,...n},children:e}));B.displayName=`DragHandle`,exports.BodyRow=R,exports.ColumnCell=P,exports.DragHandle=B,exports.RowCell=z,exports.TableBody=F,exports.TableContainer=j,exports.TableHeader=M,exports.useTable=h;
+
+  /* When a DragHandle exists, only the handle shows grab cursor */
+  &:not(.is-dragging) .draggable:has([data-drag-handle]) > div {
+    cursor: default !important;
+  }
+  &:not(.is-dragging) [data-drag-handle] {
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+`,m=(0,c.createContext)(void 0),h=()=>{let e=(0,c.useContext)(m);if(e===void 0)throw Error(`useTable must be used within a TableProvider`);return e},g=30,_=e=>{let t=(0,c.useRef)(!1),n=(0,c.useRef)(!1),r=(0,c.useRef)(0),i=(0,c.useRef)(null),a=(0,c.useRef)({x:0,y:0}),o=(0,c.useRef)(null),s=(0,c.useCallback)(e=>{o.current=e},[]),l=(0,c.useCallback)(()=>{n.current=!1,t.current=!1,i.current!==null&&(cancelAnimationFrame(i.current),i.current=null)},[]),u=(0,c.useCallback)((e,s,c)=>{let l=c===`vertical`,d=l?n:t;if(!d.current)return;let f=o.current;if(f){let e=a.current;if(l){let t=e.y<f.top+g,n=e.y>f.bottom-g;if(!t&&!n){d.current=!1;return}}else{let t=e.x<f.left+g,n=e.x>f.right-g;if(!t&&!n){d.current=!1;return}}}let p=l?s.scrollHeight-s.clientHeight:s.scrollWidth-s.clientWidth;l?s.scrollTop+=e:s.scrollLeft+=e;let m=l?s.scrollTop:s.scrollLeft;if(m>=p||m<=0){d.current=!1;return}r.current+=e/1e3,i.current=requestAnimationFrame(()=>u(e+r.current,s,c))},[]);return{startAutoScroll:(0,c.useCallback)((e,a,o)=>{let s=o===`vertical`?n:t;s.current||(s.current=!0,r.current=0,i.current=requestAnimationFrame(()=>u(e,a,o)))},[u]),stopAutoScroll:l,setContainerRect:s,isAutoScrollingVertical:n,isAutoScrollingHorizontal:t,pointerRef:a,BodyScrollHandle:(0,c.useCallback)(t=>{e.headerRef?.current&&t.currentTarget&&(e.headerRef.current.scrollLeft=t.currentTarget.scrollLeft)},[e]),HeaderScrollHandle:(0,c.useCallback)(t=>{e.bodyRef?.current&&t.currentTarget&&(e.bodyRef.current.scrollLeft=t.currentTarget.scrollLeft)},[e])}},v=300,y=8;function b(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.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 d=c.target,f=!1;for(;d&&!(d.dataset?.contextid||d.dataset?.disabled===`true`);){if(d.dataset?.id){f=!0;break}d=d.parentNode}if(!f)return;u(),s.current=!0,window.getSelection()?.removeAllRanges();let p=c.touches[0];a.current={x:p.clientX,y:p.clientY},o.current=c;let m=e.tableRef?.current;if(!m)return;let h=!1,g=!1,_=p.clientY,b=p.clientX,x=e=>e.preventDefault();document.addEventListener(`selectstart`,x);let S=t=>{t.preventDefault();let n=t.touches[0];if(g){let t=e.bodyRef?.current;t&&(t.scrollTop-=n.clientY-_,t.scrollLeft-=n.clientX-b),_=n.clientY,b=n.clientX}else if(h)r(n.clientX,n.clientY);else{let e=n.clientX-a.current.x,t=n.clientY-a.current.y;(Math.abs(e)>y||Math.abs(t)>y)&&(i.current&&=(clearTimeout(i.current),null),o.current=null,g=!0,_=n.clientY,b=n.clientX)}},C=()=>{h?(w(),n()):(u(),setTimeout(()=>{s.current=!1},400))},w=()=>{m.removeEventListener(`touchmove`,S),m.removeEventListener(`touchend`,C),m.removeEventListener(`touchcancel`,C),document.removeEventListener(`selectstart`,x),l.current=null};m.addEventListener(`touchmove`,S,{passive:!1}),m.addEventListener(`touchend`,C,!1),m.addEventListener(`touchcancel`,C,!1),l.current=w,i.current=setTimeout(()=>{i.current=null,h=!0;let e=o.current;o.current=null,e&&t(e,p.clientX,p.clientY)},v)},[t,n,r,u,e.tableRef?.current,e.bodyRef?.current]),cancelLongPress:u,isTouchActiveRef:s}}var x=(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},S=(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},C=(e,t,n)=>t!==void 0&&e<t||n!==void 0&&e>n,w=`transform 450ms cubic-bezier(0.2, 0, 0, 1)`,T=200,E=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,setContainerRect:l,pointerRef:d}=_(e),f=(0,c.useRef)(null),p=(0,c.useRef)(null),m=(0,c.useRef)(null),h=(0,c.useRef)({x:0,y:0}),g=(0,c.useRef)(null),v=(0,c.useRef)(null),y=(0,c.useRef)({width:0,height:0}),C=(0,c.useRef)({x:0,y:0}),E=(0,c.useRef)(!1),D=(0,c.useCallback)(()=>{let t=e.bodyRef?.current;if(!t)return null;let n=t.scrollTop,r=t.getBoundingClientRect().top,a=t.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 i=t.getBoundingClientRect(),s=i.top-r+n;o.push({height:i.height,itemTop:s,itemBottom:s+i.height,index:t.dataset.index})}let{start:s,end:c}=i.rowDragRange;return(s||c)&&(o=o.filter(e=>(!s||+e.index>=s)&&(!c||+e.index<c))),o},[e.bodyRef,i.rowDragRange]),O=(0,c.useCallback)(()=>{let t=e.headerRef?.current;if(!t||!t.children[0])return null;let n=Array.from(t.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:r,end:a}=i.columnDragRange??{};return(r!==void 0||a!==void 0)&&(n=n.filter(e=>{let t=+e.index;return(r===void 0||t>=r)&&(a===void 0||t<a)})),n},[e.headerRef,i.columnDragRange]),k=(0,c.useCallback)((t,n,r,i)=>{let a=e.placeholderRef?.current;if(!a||!t){a&&(a.style.display=`none`);return}let o=y.current,s=t.getBoundingClientRect(),c=e.tableRef?.current?.getBoundingClientRect(),l=(n??0)<(r??0);a.style.display=`block`,i===`row`?(a.style.top=`${l?s.top+s.height-o.height:s.top}px`,a.style.left=`${c?.left??s.left}px`,a.style.width=`${c?.width??s.width}px`,a.style.height=`${o.height}px`):(a.style.top=`${c?.top??s.top}px`,a.style.left=`${l?s.left+s.width-o.width:s.left}px`,a.style.width=`${o.width}px`,a.style.height=`${c?.height??s.height}px`)},[e.placeholderRef,e.tableRef]),A=(0,c.useCallback)((t,n,r)=>{if(t===null||n===null)return;let i=y.current,a=null,o=(e,r,i,o)=>{if(!e)return;let s=e.querySelectorAll(r);for(let e=0;e<s.length;e++){let r=s[e],c=+r.dataset.index,l=r.firstElementChild;if(!l)continue;let u=``;c>t&&c<=n?u=`translate${i}(-${o}px)`:c<t&&c>=n&&(u=`translate${i}(${o}px)`),l.style.transform=u,l.style.transition=c===t?`none`:w,c===n?(r.setAttribute(`data-drop-target`,`true`),a=r):r.removeAttribute(`data-drop-target`)}};if(r===`row`)o(e.bodyRef?.current??null,`.draggable[data-type="row"]`,`Y`,i.height);else if(r===`column`){o(e.headerRef?.current??null,`.draggable[data-type="column"]`,`X`,i.width);let r=e.bodyRef?.current;if(r){let e=r.querySelectorAll(`.td[data-col-index]`);for(let r=0;r<e.length;r++){let a=e[r],o=+a.dataset.colIndex,s=``;o>t&&o<=n?s=`translateX(-${i.width}px)`:o<t&&o>=n&&(s=`translateX(${i.width}px)`),a.style.transform=s,a.style.transition=w}}}k(a,t,n,r)},[e.bodyRef,e.headerRef,k]),j=(0,c.useCallback)(()=>{let t=e.placeholderRef?.current;t&&(t.style.display=`none`);for(let t of[e.bodyRef?.current,e.headerRef?.current]){if(!t)continue;let e=t.querySelectorAll(`.draggable`);for(let t=0;t<e.length;t++){e[t].removeAttribute(`data-drop-target`);let n=e[t].firstElementChild;n&&(n.style.transition=`none`,n.style.transform=``)}}let n=e.bodyRef?.current;if(n){let e=n.querySelectorAll(`.td[data-col-index]`);for(let t=0;t<e.length;t++)e[t].style.transition=`none`,e[t].style.transform=``}},[e.bodyRef,e.headerRef,e.placeholderRef]),M=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},N=(0,c.useCallback)((t,r,i)=>{let a=M(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,_=o.dataset.type,b=t.type===`touchstart`;m.current=_,g.current=u,v.current=null,E.current=!1,b&&o.dispatchEvent(new PointerEvent(`pointerdown`,{bubbles:!0,pointerType:`mouse`}));let x=_===`row`?e.bodyRef?.current?.scrollLeft??0:0,S=o.getBoundingClientRect();y.current={width:S.width,height:S.height};let w={x:r-S.left-x,y:i-S.top};h.current=w,C.current={x:r,y:i},d.current={x:r,y:i};let T={x:S.left+x,y:S.top};f.current=_===`row`?D():O();let k=e.bodyRef?.current;if(k){let e=k.getBoundingClientRect();p.current=e,l(e)}let A=e.tableRef?.current;A&&(A.style.touchAction=`none`);let j=e.cloneRef?.current;j&&(j.style.transform=`translate(${T.x}px, ${T.y}px)`);let N=e.tableRef?.current;N&&n({type:`setTableDimensions`,value:{height:N.offsetHeight,width:N.offsetWidth}}),n({type:`dragStart`,value:{rect:{draggedItemHeight:S.height,draggedItemWidth:S.width},dragged:{initial:w,translate:T,draggedID:c,isDragging:!0,sourceIndex:u},dragType:_}});let P=()=>{let t=e.cloneRef?.current,n=e.bodyRef?.current;if(!(!t||!n))if(_===`row`)t.scrollLeft=n.scrollLeft;else{let e=t.querySelector(`.clone-body`);e&&(e.scrollTop=n.scrollTop)}};P(),requestAnimationFrame(()=>{P(),requestAnimationFrame(P)})},[n,e,D,O,d,l]),P=(0,c.useCallback)((t,r,i,o,s)=>{let c=e.cloneRef?.current;c&&(c.style.visibility=`hidden`);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}})}),j();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,j,a]),F=(0,c.useCallback)(()=>{if(E.current)return;E.current=!0,R(),setTimeout(()=>{z.current=!1},400);let t=v.current,n=g.current,r=m.current,i=e.bodyRef?.current,a=i?.scrollTop??0,o=i?.scrollLeft??0;f.current=null,p.current=null,s(),m.current=null,g.current=null,v.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 ${T}ms cubic-bezier(0.2, 0, 0, 1)`,c.style.transform=`translate(${e}px, ${i}px)`,setTimeout(()=>P(n,t,r,a,o),T)}else P(n,t,r,a,o)},[s,e.bodyRef,e.placeholderRef,e.cloneRef,P]),I=(0,c.useRef)(()=>{}),{touchStart:L,cancelLongPress:R,isTouchActiveRef:z}=b(e,N,F,(e,t)=>I.current(e,t)),B=(0,c.useCallback)(e=>{e.target!==e.currentTarget&&(z.current||N(e,e.clientX,e.clientY))},[N,z]),V=(0,c.useCallback)((t,n)=>{if(E.current)return;let i=h.current;C.current={x:t,y:n},d.current={x:t,y:n};let a=e.cloneRef?.current;if(a){a.style.transform=`translate(${t-i.x}px, ${n-i.y}px)`;let r=e.bodyRef?.current;if(r)if(m.current===`row`)a.scrollLeft=r.scrollLeft;else{let e=a.querySelector(`.clone-body`);e&&(e.scrollTop=r.scrollTop)}}let c=e.bodyRef?.current;if(!c)return;let l=p.current;l||(l=c.getBoundingClientRect(),p.current=l);let u=0,_=m.current||r;_===`row`?n<l.top+30?(o(-5,c,`vertical`),f.current=null):n>l.bottom-30?(o(5,c,`vertical`),f.current=null):s():t<l.left+30?(o(-5,c,`horizontal`),f.current=null):t>l.right-30?(o(5,c,`horizontal`),f.current=null):s();let y;_===`row`?(y=D(),f.current=y,y&&y.length>0&&(u=x(n-l.top+c.scrollTop,y))):(y=O(),f.current=y,y&&y.length>0&&(u=S(t,y))),u!==v.current&&(v.current=u,requestAnimationFrame(()=>A(g.current,u,_)))},[r,e.bodyRef,e.cloneRef,D,O,o,s,A,d]);I.current=V;let H=(0,c.useCallback)(()=>{R(),f.current=null,p.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(),m.current=null,g.current=null,v.current=null},[n,s,e.cloneRef,e.tableRef,R]),U=(0,c.useCallback)(e=>{e.key===`Escape`&&H()},[H]);return(0,c.useLayoutEffect)(()=>{if(!t.isDragging){j();let t=e.cloneRef?.current;t&&(t.style.transition=``,t.style.transform=`translate(0px, 0px)`,t.style.visibility=``,t.scrollLeft=0)}},[t.isDragging,j,e.cloneRef]),(0,c.useEffect)(()=>{let t=e.bodyRef?.current;return t&&(t.style.touchAction=`none`),()=>{t&&(t.style.touchAction=``)}},[e.bodyRef]),(0,c.useEffect)(()=>{if(!t.isDragging)return;let e=e=>{V(e.clientX,e.clientY)},n=()=>{F()};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,n),window.addEventListener(`pointercancel`,n),window.addEventListener(`keydown`,U),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,n),window.removeEventListener(`pointercancel`,n),window.removeEventListener(`keydown`,U)}},[t.isDragging,V,F,U]),{dragStart:B,touchStart:L}},D={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function O(e,t){switch(t.type){case`setClone`:return{...e,clone:t.value};case`setDragged`:return{...e,dragged:{...e.dragged,...t.value}};case`setDragType`:return{...e,dragType:t.value};case`setRect`:return{...e,rect:t.value};case`setTableDimensions`:return{...e,tableDimensions:t.value};case`setTableRef`:return{...e,refs:{...e.refs,tableRef:t.value}};case`setBodyRef`:return{...e,refs:{...e.refs,bodyRef:t.value}};case`setHeaderRef`:return{...e,refs:{...e.refs,headerRef:t.value}};case`setCloneRef`:return{...e,refs:{...e.refs,cloneRef:t.value}};case`setPlaceholderRef`:return{...e,refs:{...e.refs,placeholderRef: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:t.value??D};case`dragStart`:return{...e,rect:t.value.rect,dragged:{...e.dragged,...t.value.dragged},dragType:t.value.dragType};case`dragEnd`:return{...e,clone:null,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 type: ${t.type}`)}}var k={clone:null,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:null,bodyRef:null,headerRef:null,cloneRef:null,placeholderRef:null},bodyScrollBarWidth:0,options:D,widths:[],columnIds:[]},A={position:`relative`,display:`flex`,flexFlow:`column`},j={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},M=(0,c.forwardRef)(({children:e,className:t,style:n,options:r,onDragEnd:i,renderPlaceholder:a},o)=>{let s=(0,c.useRef)(null),l=(0,c.useRef)(null),u=(0,c.useRef)(null);(0,c.useImperativeHandle)(o,()=>s.current,[]);let[f,h]=(0,c.useReducer)(O,k),g=(0,c.useMemo)(()=>({state:f,dispatch:h}),[f]);(0,c.useEffect)(()=>{h({type:`setTableRef`,value:s}),h({type:`setCloneRef`,value:l}),h({type:`setPlaceholderRef`,value:u})},[s]),(0,c.useEffect)(()=>{let e=()=>{s.current&&h({type:`setTableDimensions`,value:{height:s.current.offsetHeight,width:s.current.offsetWidth}})};return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[s]),(0,c.useEffect)(()=>{h({type:`setOptions`,value:r})},[r]);let{dragStart:_,touchStart:v}=E(f.refs,f.dragged,h,f.dragType,f.options,i),y=(0,c.useMemo)(()=>({position:`fixed`,zIndex:`5`,pointerEvents:`none`,top:0,left:0,display:`flex`,flexDirection:`column`,height:f.dragType===`row`?f.rect.draggedItemHeight:`${f.tableDimensions.height}px`,width:f.dragType===`column`?`${f.rect.draggedItemWidth}px`:`${f.tableDimensions.width}px`,overflow:`hidden`,boxShadow:f.dragged.isDragging?`0 0 10px 0 rgba(0, 0, 0, 0.1)`:`none`}),[f.dragType,f.dragged.isDragging,f.rect.draggedItemHeight,f.rect.draggedItemWidth,f.tableDimensions.height,f.tableDimensions.width]);return(0,d.jsx)(m.Provider,{value:g,children:(0,d.jsxs)(p,{className:f.dragged.isDragging?`is-dragging`:``,children:[(0,d.jsx)(`div`,{id:`portalroot`,style:{...y,visibility:f.dragged.isDragging?`visible`:`hidden`},ref:l,children:(0,d.jsx)(`div`,{style:{flexShrink:0,order:-1},children:f.clone})}),a&&(0,d.jsx)(`div`,{ref:u,style:j,children:a()}),(0,d.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:_,onTouchStart:v,style:{...A,...n},className:`table ${t??``}`,children:e})]})})});M.displayName=`TableProvider`;var N=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null),a=r||i,{state:o,dispatch:s}=h();(0,c.useEffect)(()=>{s({type:`setHeaderRef`,value:a})},[s,a]);let{HeaderScrollHandle:l}=_(o.refs),u={display:`flex`,flex:`1 0 auto`},f=(0,c.useMemo)(()=>({overflow:`hidden`,display:`flex`,paddingRight:`${o.bodyScrollBarWidth}px`,userSelect:o.dragged.isDragging?`none`:`auto`,...t}),[o.bodyScrollBarWidth,o.dragged.isDragging,t]);return(0,c.useLayoutEffect)(()=>{a.current&&s({type:`setWidths`,value:Array.from(a.current.querySelectorAll(`.th`)).map(e=>{let t=e.getAttribute(`data-width`);return t?parseInt(t,10):null})})},[e,s,a]),(0,c.useLayoutEffect)(()=>{a.current&&s({type:`setColumnIds`,value:Array.from(a.current.querySelectorAll(`.draggable`)).map(e=>e.getAttribute(`data-id`))})},[e,s,a]),(0,d.jsx)(`div`,{className:`header ${n??``}`,children:(0,d.jsx)(`div`,{className:`thead`,style:f,"data-droppableid":`header`,onScroll:l,ref:a,children:(0,d.jsx)(`div`,{style:u,className:`tr`,children:e})})})});N.displayName=`TableHeader`;var P=(0,c.memo)(({children:e,id:t,index:n,type:r,styles:i={}})=>{let{state:a,dispatch:o}=h(),s=(0,c.useMemo)(()=>String(t)===String(a.dragged.draggedID)&&a.dragged.isDragging,[t,a.dragged.draggedID,a.dragged.isDragging]),l=(0,c.useMemo)(()=>r===`row`?C(n,a.options.rowDragRange.start,a.options.rowDragRange.end):C(n,a.options.columnDragRange.start,a.options.columnDragRange.end),[n,a.options.columnDragRange.end,a.options.columnDragRange.start,a.options.rowDragRange.end,a.options.rowDragRange.start,r]),u=(0,c.useRef)(null),f=(0,c.useRef)(!1);(0,c.useEffect)(()=>{u.current&&(f.current=!!u.current.querySelector(`[data-drag-handle]`))});let p=(0,c.useMemo)(()=>({cursor:s?`-webkit-grabbing`:l||f.current?`auto`:`-webkit-grab`,zIndex:s?2:1,opacity:s?0:1,pointerEvents:s?`none`:`auto`,display:`flex`}),[l,s]),m=t=>{t.pointerType!==`touch`&&(l||requestAnimationFrame(()=>{o({type:`setClone`,value:c.default.cloneElement(e)})}))};return(0,d.jsx)(`div`,{className:`draggable`,"data-id":t,"data-index":n,"data-type":r,onPointerDown:m,"data-disabled":l?`true`:`false`,style:i,children:(0,d.jsx)(`div`,{ref:u,style:p,children:e})})});P.displayName=`Draggable`;var F=(0,c.memo)(({children:e,width:t,style:n,className:r,...i})=>{let{state:a}=h(),o=(0,c.useMemo)(()=>t??a.options.defaultSizing,[t,a.options.defaultSizing]),s=(0,c.useMemo)(()=>({width:`${o}px`,flex:`${o} 0 auto`}),[o]);return(0,d.jsx)(P,{...i,styles:s,type:`column`,children:(0,d.jsx)(`div`,{className:`th ${r??``}`,"data-width":t,style:{width:`100%`,...n},children:e})})});F.displayName=`ColumnCell`;var I=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null);(0,c.useImperativeHandle)(r,()=>i.current,[]);let{state:a,dispatch:o}=h(),s=(0,c.useMemo)(()=>{if(a.dragged.sourceIndex===null)return null;let t=e=>{let n=[];return c.default.Children.forEach(e,e=>{c.default.isValidElement(e)&&(e.props.id!==void 0&&e.props.index!==void 0&&e.props.children?n.push(e):e.props.children&&n.push(...t(e.props.children)))}),n};return t(e).map(e=>{let t=c.default.Children.toArray(e.props.children).filter(e=>c.default.isValidElement(e)&&String(e.props.index)===String(a.dragged.sourceIndex)).map(e=>c.default.cloneElement(e,{isClone:!0}));return c.default.cloneElement(e,{...e.props,children:t})})},[e,a.dragged.sourceIndex]);(0,c.useEffect)(()=>{o({type:`setBodyRef`,value:i})},[o,i]);let{BodyScrollHandle:l}=_(a.refs),f=(0,c.useMemo)(()=>({overflowX:`auto`,overflowY:`auto`,flex:1,userSelect:a.dragged.isDragging?`none`:`auto`,...t}),[a.dragged.isDragging,t]);(0,c.useEffect)(()=>{if(i.current){let e=i.current.clientWidth;o({type:`setBodyScrollBarWidth`,value:i.current.offsetWidth-e})}},[o,i]);let p=i.current?.scrollHeight??0;return(0,d.jsxs)(c.default.Fragment,{children:[a.dragType===`column`&&a.refs.cloneRef?.current&&(0,u.createPortal)((0,d.jsx)(`div`,{className:`body clone-body`,"data-droppableid":`body`,style:{overflow:`hidden`,flex:1},children:(0,d.jsx)(`div`,{className:`rbody`,style:{height:p,position:`relative`},children:s})}),a.refs.cloneRef.current),(0,d.jsx)(`div`,{className:`body ${n??``}`,style:L,children:(0,d.jsx)(`div`,{className:`ibody`,style:f,"data-droppableid":`body`,onScroll:l,ref:i,children:e})})]})}),L={display:`flex`,overflow:`hidden`,flex:1};I.displayName=`TableBody`;var R={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},z=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,c.useMemo)(()=>t?{...R,...t}:R,[t]),a=(0,f.default)(`tr`,n);return(0,d.jsx)(P,{...r,type:`row`,children:(0,d.jsx)(`div`,{className:a,style:i,children:e})})});z.displayName=`BodyRow`;var B=(0,c.memo)(({children:e,style:t,className:n,isClone:r,...i})=>{let{index:a}=i,{state:o}=h(),s=(0,c.useMemo)(()=>o.columnIds[a]??``,[o.columnIds,a]),l=(0,c.useMemo)(()=>o.widths[a]??o.options.defaultSizing,[o.widths,a,o.options.defaultSizing]),u=(0,c.useMemo)(()=>r?!1:s===o.dragged.draggedID,[r,s,o.dragged.draggedID]),f=(0,c.useMemo)(()=>({display:`inline-flex`,opacity:u?0:1,width:`${l}px`,flex:`${l} 0 auto`,...t}),[u,l,t]);return(0,d.jsx)(`div`,{className:`td ${n??``}`,style:f,"data-col-index":a,children:e})});B.displayName=`RowCell`;var V=(0,c.memo)(({children:e,className:t,style:n})=>(0,d.jsx)(`div`,{"data-drag-handle":`true`,className:t,style:{cursor:`-webkit-grab`,display:`inline-flex`,alignItems:`center`,...n},children:e}));V.displayName=`DragHandle`,exports.BodyRow=z,exports.ColumnCell=F,exports.DragHandle=V,exports.RowCell=B,exports.TableBody=I,exports.TableContainer=M,exports.TableHeader=N,exports.useTable=h;

package/dist/index.es.js

@@ -1,10 +1,10 @@
-import e, { createContext as t, forwardRef as n, memo as r, useCallback as i, useContext as a, useEffect as o, useImperativeHandle as s, useMemo as c, useReducer as l, useRef as u } from "react";
-import d from "styled-components";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { createPortal as m } from "react-dom";
-import h from "classnames";
+import e, { createContext as t, forwardRef as n, memo as r, useCallback as i, useContext as a, useEffect as o, useImperativeHandle as s, useLayoutEffect as c, useMemo as l, useReducer as u, useRef as d } from "react";
+import f from "styled-components";
+import { createPortal as p, flushSync as m } from "react-dom";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import _ from "classnames";
 //#region src/Components/TableContainer/styles.tsx
-var g = d.div`
+var v = f.div`
   height: 100%;
 
   /* Structural elements: full reset */
@@ -22,37 +22,49 @@ var g = d.div`
   }
 
   &.is-dragging, &.is-dragging * {
+    cursor: -webkit-grabbing !important;
+    cursor: grabbing !important;
     user-select: none !important;
     -webkit-user-select: none !important;
+    -webkit-touch-callout: none !important;
   }
-`, _ = t(void 0), v = () => {
-	let e = a(_);
+
+  /* When a DragHandle exists, only the handle shows grab cursor */
+  &:not(.is-dragging) .draggable:has([data-drag-handle]) > div {
+    cursor: default !important;
+  }
+  &:not(.is-dragging) [data-drag-handle] {
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+`, y = t(void 0), b = () => {
+	let e = a(y);
 	if (e === void 0) throw Error("useTable must be used within a TableProvider");
 	return e;
-}, y = 30, b = (e) => {
-	let t = u(!1), n = u(!1), r = u(0), a = u(null), o = u({
+}, x = 30, S = (e) => {
+	let t = d(!1), n = d(!1), r = d(0), a = d(null), o = d({
 		x: 0,
 		y: 0
-	}), s = u(null), c = i((e) => {
+	}), s = d(null), c = i((e) => {
 		s.current = e;
 	}, []), l = i(() => {
 		n.current = !1, t.current = !1, a.current !== null && (cancelAnimationFrame(a.current), a.current = null);
-	}, []), d = i((e, i, c) => {
-		let l = c === "vertical", u = l ? n : t;
-		if (!u.current) return;
+	}, []), u = i((e, i, c) => {
+		let l = c === "vertical", d = l ? n : t;
+		if (!d.current) return;
 		let f = s.current;
 		if (f) {
 			let e = o.current;
 			if (l) {
-				let t = e.y < f.top + y, n = e.y > f.bottom - y;
+				let t = e.y < f.top + x, n = e.y > f.bottom - x;
 				if (!t && !n) {
-					u.current = !1;
+					d.current = !1;
 					return;
 				}
 			} else {
-				let t = e.x < f.left + y, n = e.x > f.right - y;
+				let t = e.x < f.left + x, n = e.x > f.right - x;
 				if (!t && !n) {
-					u.current = !1;
+					d.current = !1;
 					return;
 				}
 			}
@@ -61,16 +73,16 @@ var g = d.div`
 		l ? i.scrollTop += e : i.scrollLeft += e;
 		let m = l ? i.scrollTop : i.scrollLeft;
 		if (m >= p || m <= 0) {
-			u.current = !1;
+			d.current = !1;
 			return;
 		}
-		r.current += e / 1e3, a.current = requestAnimationFrame(() => d(e + r.current, i, c));
+		r.current += e / 1e3, a.current = requestAnimationFrame(() => u(e + r.current, i, c));
 	}, []);
 	return {
 		startAutoScroll: i((e, i, o) => {
 			let s = o === "vertical" ? n : t;
-			s.current || (s.current = !0, r.current = 0, a.current = requestAnimationFrame(() => d(e, i, o)));
-		}, [d]),
+			s.current || (s.current = !0, r.current = 0, a.current = requestAnimationFrame(() => u(e, i, o)));
+		}, [u]),
 		stopAutoScroll: l,
 		setContainerRect: c,
 		isAutoScrollingVertical: n,
@@ -83,27 +95,27 @@ var g = d.div`
 			e.bodyRef?.current && t.currentTarget && (e.bodyRef.current.scrollLeft = t.currentTarget.scrollLeft);
 		}, [e])
 	};
-}, x = 300, S = 8;
-function C(e, t, n, r) {
-	let a = u(null), o = u({
+}, C = 300, w = 8;
+function T(e, t, n, r) {
+	let a = d(null), o = d({
 		x: 0,
 		y: 0
-	}), s = u(null), c = u(!1), l = u(null), d = i(() => {
+	}), s = d(null), c = d(!1), l = d(null), u = i(() => {
 		a.current &&= (clearTimeout(a.current), null), s.current = null, l.current &&= (l.current(), null);
 	}, []);
 	return {
 		touchStart: i((i) => {
 			if (i.target === i.currentTarget) return;
-			let u = i.target, f = !1;
-			for (; u && !(u.dataset?.contextid || u.dataset?.disabled === "true");) {
-				if (u.dataset?.id) {
+			let d = i.target, f = !1;
+			for (; d && !(d.dataset?.contextid || d.dataset?.disabled === "true");) {
+				if (d.dataset?.id) {
 					f = !0;
 					break;
 				}
-				u = u.parentNode;
+				d = d.parentNode;
 			}
 			if (!f) return;
-			d(), c.current = !0;
+			u(), c.current = !0, window.getSelection()?.removeAllRanges();
 			let p = i.touches[0];
 			o.current = {
 				x: p.clientX,
@@ -111,7 +123,9 @@ function C(e, t, n, r) {
 			}, s.current = i;
 			let m = e.tableRef?.current;
 			if (!m) return;
-			let h = !1, g = !1, _ = p.clientY, v = p.clientX, y = (t) => {
+			let h = !1, g = !1, _ = p.clientY, v = p.clientX, y = (e) => e.preventDefault();
+			document.addEventListener("selectstart", y);
+			let b = (t) => {
 				t.preventDefault();
 				let n = t.touches[0];
 				if (g) {
@@ -120,35 +134,35 @@ function C(e, t, n, r) {
 				} else if (h) r(n.clientX, n.clientY);
 				else {
 					let e = n.clientX - o.current.x, t = n.clientY - o.current.y;
-					(Math.abs(e) > S || Math.abs(t) > S) && (a.current &&= (clearTimeout(a.current), null), s.current = null, g = !0, _ = n.clientY, v = n.clientX);
+					(Math.abs(e) > w || Math.abs(t) > w) && (a.current &&= (clearTimeout(a.current), null), s.current = null, g = !0, _ = n.clientY, v = n.clientX);
 				}
-			}, b = () => {
-				h ? (C(), n()) : (d(), setTimeout(() => {
+			}, x = () => {
+				h ? (S(), n()) : (u(), setTimeout(() => {
 					c.current = !1;
 				}, 400));
-			}, C = () => {
-				m.removeEventListener("touchmove", y), m.removeEventListener("touchend", b), m.removeEventListener("touchcancel", b), l.current = null;
+			}, S = () => {
+				m.removeEventListener("touchmove", b), m.removeEventListener("touchend", x), m.removeEventListener("touchcancel", x), document.removeEventListener("selectstart", y), l.current = null;
 			};
-			m.addEventListener("touchmove", y, { passive: !1 }), m.addEventListener("touchend", b, !1), m.addEventListener("touchcancel", b, !1), l.current = C, a.current = setTimeout(() => {
+			m.addEventListener("touchmove", b, { passive: !1 }), m.addEventListener("touchend", x, !1), m.addEventListener("touchcancel", x, !1), l.current = S, a.current = setTimeout(() => {
 				a.current = null, h = !0;
 				let e = s.current;
 				s.current = null, e && t(e, p.clientX, p.clientY);
-			}, x);
+			}, C);
 		}, [
 			t,
 			n,
 			r,
-			d,
+			u,
 			e.tableRef?.current,
 			e.bodyRef?.current
 		]),
-		cancelLongPress: d,
+		cancelLongPress: u,
 		isTouchActiveRef: c
 	};
 }
 //#endregion
 //#region src/Components/utils.ts
-var w = (e, t) => {
+var E = (e, t) => {
 	let n = e, r = 0, i = t.length - 1;
 	for (; r < i;) {
 		let e = Math.floor((r + i) / 2), a = t[e];
@@ -156,7 +170,7 @@ var w = (e, t) => {
 		n < a.itemTop ? i = e - 1 : r = e + 1;
 	}
 	return +t[r].index;
-}, T = (e, t) => {
+}, D = (e, t) => {
 	let n = e, r = 0, i = t.length - 1;
 	for (; r < i;) {
 		let e = Math.floor((r + i) / 2), a = t[e];
@@ -164,17 +178,17 @@ var w = (e, t) => {
 		n < a.itemLeft ? i = e - 1 : r = e + 1;
 	}
 	return +t[r].index;
-}, E = (e, t, n) => t !== void 0 && e < t || n !== void 0 && e > n, D = "all 450ms cubic-bezier(0.2, 0, 0, 1)", O = (e, t, n, r, a, s) => {
-	let { startAutoScroll: c, stopAutoScroll: l, setContainerRect: d, pointerRef: f } = b(e), p = u(null), m = u(null), h = u(null), g = u({
+}, O = (e, t, n) => t !== void 0 && e < t || n !== void 0 && e > n, k = "transform 450ms cubic-bezier(0.2, 0, 0, 1)", A = 200, j = (e, t, n, r, a, s) => {
+	let { startAutoScroll: l, stopAutoScroll: u, setContainerRect: f, pointerRef: p } = S(e), h = d(null), g = d(null), _ = d(null), v = d({
 		x: 0,
 		y: 0
-	}), _ = u(null), v = u(null), y = u({
+	}), y = d(null), b = d(null), x = d({
 		width: 0,
 		height: 0
-	}), x = u({
+	}), C = d({
 		x: 0,
 		y: 0
-	}), S = i(() => {
+	}), w = d(!1), O = i(() => {
 		let t = e.bodyRef?.current;
 		if (!t) return null;
 		let n = t.scrollTop, r = t.getBoundingClientRect().top, i = t.querySelectorAll(".draggable[data-type=\"row\"]"), o = [];
@@ -191,7 +205,7 @@ var w = (e, t) => {
 		}
 		let { start: s, end: c } = a.rowDragRange;
 		return (s || c) && (o = o.filter((e) => (!s || +e.index >= s) && (!c || +e.index < c))), o;
-	}, [e.bodyRef, a.rowDragRange]), E = i(() => {
+	}, [e.bodyRef, a.rowDragRange]), j = i(() => {
 		let t = e.headerRef?.current;
 		if (!t || !t.children[0]) return null;
 		let n = Array.from(t.children[0].children).map((e) => {
@@ -208,24 +222,24 @@ var w = (e, t) => {
 			let t = +e.index;
 			return (r === void 0 || t >= r) && (i === void 0 || t < i);
 		})), n;
-	}, [e.headerRef, a.columnDragRange]), O = i((t, n, r, i) => {
+	}, [e.headerRef, a.columnDragRange]), M = i((t, n, r, i) => {
 		let a = e.placeholderRef?.current;
 		if (!a || !t) {
 			a && (a.style.display = "none");
 			return;
 		}
-		let o = y.current, s = t.getBoundingClientRect(), c = e.tableRef?.current?.getBoundingClientRect(), l = (n ?? 0) < (r ?? 0);
+		let o = x.current, s = t.getBoundingClientRect(), c = e.tableRef?.current?.getBoundingClientRect(), l = (n ?? 0) < (r ?? 0);
 		a.style.display = "block", i === "row" ? (a.style.top = `${l ? s.top + s.height - o.height : s.top}px`, a.style.left = `${c?.left ?? s.left}px`, a.style.width = `${c?.width ?? s.width}px`, a.style.height = `${o.height}px`) : (a.style.top = `${c?.top ?? s.top}px`, a.style.left = `${l ? s.left + s.width - o.width : s.left}px`, a.style.width = `${o.width}px`, a.style.height = `${c?.height ?? s.height}px`);
-	}, [e.placeholderRef, e.tableRef]), k = i((t, n, r) => {
+	}, [e.placeholderRef, e.tableRef]), N = i((t, n, r) => {
 		if (t === null || n === null) return;
-		let i = y.current, a = null, o = (e, r, i, o) => {
+		let i = x.current, a = null, o = (e, r, i, o) => {
 			if (!e) return;
 			let s = e.querySelectorAll(r);
 			for (let e = 0; e < s.length; e++) {
 				let r = s[e], c = +r.dataset.index, l = r.firstElementChild;
 				if (!l) continue;
 				let u = "";
-				c > t && c <= n ? u = `translate${i}(-${o}px)` : c < t && c >= n && (u = `translate${i}(${o}px)`), l.style.transform = u, l.style.transition = c === t ? "none" : D, c === n ? (r.setAttribute("data-drop-target", "true"), a = r) : r.removeAttribute("data-drop-target");
+				c > t && c <= n ? u = `translate${i}(-${o}px)` : c < t && c >= n && (u = `translate${i}(${o}px)`), l.style.transform = u, l.style.transition = c === t ? "none" : k, c === n ? (r.setAttribute("data-drop-target", "true"), a = r) : r.removeAttribute("data-drop-target");
 			}
 		};
 		if (r === "row") o(e.bodyRef?.current ?? null, ".draggable[data-type=\"row\"]", "Y", i.height);
@@ -236,16 +250,16 @@ var w = (e, t) => {
 				let e = r.querySelectorAll(".td[data-col-index]");
 				for (let r = 0; r < e.length; r++) {
 					let a = e[r], o = +a.dataset.colIndex, s = "";
-					o > t && o <= n ? s = `translateX(-${i.width}px)` : o < t && o >= n && (s = `translateX(${i.width}px)`), a.style.transform = s, a.style.transition = D;
+					o > t && o <= n ? s = `translateX(-${i.width}px)` : o < t && o >= n && (s = `translateX(${i.width}px)`), a.style.transform = s, a.style.transition = k;
 				}
 			}
 		}
-		O(a, t, n, r);
+		M(a, t, n, r);
 	}, [
 		e.bodyRef,
 		e.headerRef,
-		O
-	]), A = i(() => {
+		M
+	]), P = i(() => {
 		let t = e.placeholderRef?.current;
 		t && (t.style.display = "none");
 		for (let t of [e.bodyRef?.current, e.headerRef?.current]) {
@@ -254,19 +268,19 @@ var w = (e, t) => {
 			for (let t = 0; t < e.length; t++) {
 				e[t].removeAttribute("data-drop-target");
 				let n = e[t].firstElementChild;
-				n && (n.style.transform = "", n.style.transition = "");
+				n && (n.style.transition = "none", n.style.transform = "");
 			}
 		}
 		let n = e.bodyRef?.current;
 		if (n) {
 			let e = n.querySelectorAll(".td[data-col-index]");
-			for (let t = 0; t < e.length; t++) e[t].style.transform = "", e[t].style.transition = "";
+			for (let t = 0; t < e.length; t++) e[t].style.transition = "none", e[t].style.transform = "";
 		}
 	}, [
 		e.bodyRef,
 		e.headerRef,
 		e.placeholderRef
-	]), j = (e) => {
+	]), F = (e) => {
 		let t = e, n = !1;
 		for (; t;) {
 			if (t.dataset?.dragHandle === "true" && (n = !0), t.dataset?.contextid || t.dataset?.disabled === "true") return null;
@@ -277,46 +291,46 @@ var w = (e, t) => {
 			t = t.parentNode;
 		}
 		return null;
-	}, M = i((t, r, i) => {
-		let a = j(t.target);
+	}, I = i((t, r, i) => {
+		let a = F(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, b = t.type === "touchstart";
-		h.current = u, _.current = l, v.current = null, b && o.dispatchEvent(new PointerEvent("pointerdown", {
+		let c = o.dataset.id, l = +o.dataset.index, u = o.dataset.type, d = t.type === "touchstart";
+		_.current = u, y.current = l, b.current = null, w.current = !1, d && o.dispatchEvent(new PointerEvent("pointerdown", {
 			bubbles: !0,
 			pointerType: "mouse"
 		}));
-		let C = u === "row" ? e.bodyRef?.current?.scrollLeft ?? 0 : 0, w = o.getBoundingClientRect();
-		y.current = {
-			width: w.width,
-			height: w.height
+		let m = u === "row" ? e.bodyRef?.current?.scrollLeft ?? 0 : 0, S = o.getBoundingClientRect();
+		x.current = {
+			width: S.width,
+			height: S.height
 		};
 		let T = {
-			x: r - w.left - C,
-			y: i - w.top
+			x: r - S.left - m,
+			y: i - S.top
 		};
-		g.current = T, x.current = {
+		v.current = T, C.current = {
 			x: r,
 			y: i
-		}, f.current = {
+		}, p.current = {
 			x: r,
 			y: i
 		};
-		let D = {
-			x: w.left + C,
-			y: w.top
+		let E = {
+			x: S.left + m,
+			y: S.top
 		};
-		p.current = u === "row" ? S() : E();
-		let O = e.bodyRef?.current;
-		if (O) {
-			let e = O.getBoundingClientRect();
-			m.current = e, d(e);
+		h.current = u === "row" ? O() : j();
+		let D = e.bodyRef?.current;
+		if (D) {
+			let e = D.getBoundingClientRect();
+			g.current = e, f(e);
 		}
 		let k = e.tableRef?.current;
 		k && (k.style.touchAction = "none");
 		let A = e.cloneRef?.current;
-		A && (A.style.transform = `translate(${D.x}px, ${D.y}px)`);
+		A && (A.style.transform = `translate(${E.x}px, ${E.y}px)`);
 		let M = e.tableRef?.current;
 		M && n({
 			type: "setTableDimensions",
@@ -328,12 +342,12 @@ var w = (e, t) => {
 			type: "dragStart",
 			value: {
 				rect: {
-					draggedItemHeight: w.height,
-					draggedItemWidth: w.width
+					draggedItemHeight: S.height,
+					draggedItemWidth: S.width
 				},
 				dragged: {
 					initial: T,
-					translate: D,
+					translate: E,
 					draggedID: c,
 					isDragging: !0,
 					sourceIndex: l
@@ -355,48 +369,65 @@ var w = (e, t) => {
 	}, [
 		n,
 		e,
-		S,
-		E,
-		f,
-		d
-	]), N = i(() => {
-		I(), setTimeout(() => {
-			L.current = !1;
-		}, 400);
-		let t = v.current, r = _.current, i = h.current, a = e.bodyRef?.current, o = a?.scrollTop ?? 0, c = a?.scrollLeft ?? 0;
-		p.current = null, m.current = null;
-		let u = e.cloneRef?.current;
-		u && (u.style.transform = "translate(0px, 0px)", u.scrollLeft = 0);
-		let d = e.tableRef?.current;
-		d && (d.style.touchAction = ""), A(), s && r !== null && t !== null && (i === "row" || i === "column") && s({
-			sourceIndex: r,
-			targetIndex: t,
-			dragType: i
-		}), n({
-			type: "dragEnd",
-			value: {
-				targetIndex: t,
-				sourceIndex: r
-			}
-		}), l(), a && (a.scrollTop = o, a.scrollLeft = c, requestAnimationFrame(() => {
-			a.scrollTop = o, a.scrollLeft = c;
-		})), h.current = null, _.current = null, v.current = null;
+		O,
+		j,
+		p,
+		f
+	]), L = i((t, r, i, a, o) => {
+		let c = e.cloneRef?.current;
+		c && (c.style.visibility = "hidden");
+		let l = e.tableRef?.current;
+		l && (l.style.touchAction = ""), m(() => {
+			s && t !== null && r !== null && (i === "row" || i === "column") && s({
+				sourceIndex: t,
+				targetIndex: r,
+				dragType: i
+			}), n({
+				type: "dragEnd",
+				value: {
+					targetIndex: r,
+					sourceIndex: t
+				}
+			});
+		}), P();
+		let u = e.bodyRef?.current;
+		u && (u.scrollTop = a, u.scrollLeft = o, requestAnimationFrame(() => {
+			u.scrollTop = a, u.scrollLeft = o;
+		}));
 	}, [
 		n,
-		l,
 		e.bodyRef,
 		e.cloneRef,
 		e.tableRef,
-		A,
+		P,
 		s
-	]), P = u(() => {}), { touchStart: F, cancelLongPress: I, isTouchActiveRef: L } = C(e, M, N, (e, t) => P.current(e, t)), R = i((e) => {
-		e.target !== e.currentTarget && (L.current || M(e, e.clientX, e.clientY));
-	}, [M, L]), z = i((t, n) => {
-		let i = g.current;
-		x.current = {
+	]), R = i(() => {
+		if (w.current) return;
+		w.current = !0, V(), setTimeout(() => {
+			H.current = !1;
+		}, 400);
+		let t = b.current, n = y.current, r = _.current, i = e.bodyRef?.current, a = i?.scrollTop ?? 0, o = i?.scrollLeft ?? 0;
+		h.current = null, g.current = null, u(), _.current = null, y.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 ${A}ms cubic-bezier(0.2, 0, 0, 1)`, s.style.transform = `translate(${e}px, ${i}px)`, setTimeout(() => L(n, t, r, a, o), A);
+		} else L(n, t, r, a, o);
+	}, [
+		u,
+		e.bodyRef,
+		e.placeholderRef,
+		e.cloneRef,
+		L
+	]), z = d(() => {}), { touchStart: B, cancelLongPress: V, isTouchActiveRef: H } = T(e, I, R, (e, t) => z.current(e, t)), U = i((e) => {
+		e.target !== e.currentTarget && (H.current || I(e, e.clientX, e.clientY));
+	}, [I, H]), W = i((t, n) => {
+		if (w.current) return;
+		let i = v.current;
+		C.current = {
 			x: t,
 			y: n
-		}, f.current = {
+		}, p.current = {
 			x: t,
 			y: n
 		};
@@ -404,7 +435,7 @@ var w = (e, t) => {
 		if (a) {
 			a.style.transform = `translate(${t - i.x}px, ${n - i.y}px)`;
 			let r = e.bodyRef?.current;
-			if (r) if (h.current === "row") a.scrollLeft = r.scrollLeft;
+			if (r) if (_.current === "row") a.scrollLeft = r.scrollLeft;
 			else {
 				let e = a.querySelector(".clone-body");
 				e && (e.scrollTop = r.scrollTop);
@@ -412,47 +443,56 @@ var w = (e, t) => {
 		}
 		let o = e.bodyRef?.current;
 		if (!o) return;
-		let s = m.current;
-		s || (s = o.getBoundingClientRect(), m.current = s);
-		let u = 0, d = h.current || r;
-		d === "row" ? n < s.top + 30 ? (c(-5, o, "vertical"), p.current = null) : n > s.bottom - 30 ? (c(5, o, "vertical"), p.current = null) : l() : t < s.left + 30 ? (c(-5, o, "horizontal"), p.current = null) : t > s.right - 30 ? (c(5, o, "horizontal"), p.current = null) : l();
-		let y;
-		d === "row" ? (y = S(), p.current = y, y && y.length > 0 && (u = w(n - s.top + o.scrollTop, y))) : (y = E(), p.current = y, y && y.length > 0 && (u = T(t, y))), u !== v.current && (v.current = u, requestAnimationFrame(() => k(_.current, u, d)));
+		let s = g.current;
+		s || (s = o.getBoundingClientRect(), g.current = s);
+		let c = 0, d = _.current || r;
+		d === "row" ? n < s.top + 30 ? (l(-5, o, "vertical"), h.current = null) : n > s.bottom - 30 ? (l(5, o, "vertical"), h.current = null) : u() : t < s.left + 30 ? (l(-5, o, "horizontal"), h.current = null) : t > s.right - 30 ? (l(5, o, "horizontal"), h.current = null) : u();
+		let f;
+		d === "row" ? (f = O(), h.current = f, f && f.length > 0 && (c = E(n - s.top + o.scrollTop, f))) : (f = j(), h.current = f, f && f.length > 0 && (c = D(t, f))), c !== b.current && (b.current = c, requestAnimationFrame(() => N(y.current, c, d)));
 	}, [
 		r,
 		e.bodyRef,
 		e.cloneRef,
-		S,
-		E,
-		c,
+		O,
+		j,
 		l,
-		k,
-		f
+		u,
+		N,
+		p
 	]);
-	P.current = z;
-	let B = i(() => {
-		I(), p.current = null, m.current = null;
+	z.current = W;
+	let G = i(() => {
+		V(), h.current = null, g.current = null;
 		let t = e.cloneRef?.current;
-		t && (t.style.transform = "translate(0px, 0px)", t.scrollLeft = 0);
+		t && (t.style.visibility = "hidden");
 		let r = e.tableRef?.current;
-		r && (r.style.touchAction = ""), A(), n({
+		r && (r.style.touchAction = ""), n({
 			type: "dragEnd",
 			value: {
 				targetIndex: null,
 				sourceIndex: null
 			}
-		}), l(), h.current = null, _.current = null, v.current = null;
+		}), u(), _.current = null, y.current = null, b.current = null;
 	}, [
 		n,
-		l,
+		u,
 		e.cloneRef,
 		e.tableRef,
-		A,
-		I
-	]), V = i((e) => {
-		e.key === "Escape" && B();
-	}, [B]);
-	return o(() => {
+		V
+	]), K = i((e) => {
+		e.key === "Escape" && G();
+	}, [G]);
+	return c(() => {
+		if (!t.isDragging) {
+			P();
+			let t = e.cloneRef?.current;
+			t && (t.style.transition = "", t.style.transform = "translate(0px, 0px)", t.style.visibility = "", t.scrollLeft = 0);
+		}
+	}, [
+		t.isDragging,
+		P,
+		e.cloneRef
+	]), o(() => {
 		let t = e.bodyRef?.current;
 		return t && (t.style.touchAction = "none"), () => {
 			t && (t.style.touchAction = "");
@@ -460,23 +500,23 @@ var w = (e, t) => {
 	}, [e.bodyRef]), o(() => {
 		if (!t.isDragging) return;
 		let e = (e) => {
-			z(e.clientX, e.clientY);
+			W(e.clientX, e.clientY);
 		}, n = () => {
-			N();
+			R();
 		};
-		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", n), window.addEventListener("pointercancel", n), window.addEventListener("keydown", V), () => {
-			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", n), window.removeEventListener("pointercancel", n), window.removeEventListener("keydown", V);
+		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", n), window.addEventListener("pointercancel", n), window.addEventListener("keydown", K), () => {
+			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", n), window.removeEventListener("pointercancel", n), window.removeEventListener("keydown", K);
 		};
 	}, [
 		t.isDragging,
-		z,
-		N,
-		V
+		W,
+		R,
+		K
 	]), {
-		dragStart: R,
-		touchStart: F
+		dragStart: U,
+		touchStart: B
 	};
-}, k = {
+}, M = {
 	columnDragRange: {
 		start: void 0,
 		end: void 0
@@ -487,7 +527,7 @@ var w = (e, t) => {
 	},
 	defaultSizing: 50
 };
-function A(e, t) {
+function N(e, t) {
 	switch (t.type) {
 		case "setClone": return {
 			...e,
@@ -561,7 +601,7 @@ function A(e, t) {
 		};
 		case "setOptions": return {
 			...e,
-			options: t.value ?? k
+			options: t.value ?? M
 		};
 		case "dragStart": return {
 			...e,
@@ -598,7 +638,7 @@ function A(e, t) {
 		default: throw Error(`Unhandled action type: ${t.type}`);
 	}
 }
-var j = {
+var P = {
 	clone: null,
 	dragged: {
 		initial: {
@@ -631,58 +671,58 @@ var j = {
 		placeholderRef: null
 	},
 	bodyScrollBarWidth: 0,
-	options: k,
+	options: M,
 	widths: [],
 	columnIds: []
-}, M = {
+}, F = {
 	position: "relative",
 	display: "flex",
 	flexFlow: "column"
-}, N = {
+}, I = {
 	position: "fixed",
 	pointerEvents: "none",
 	zIndex: 3,
 	top: 0,
 	left: 0,
 	display: "none"
-}, P = n(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: a }, d) => {
-	let m = u(null), h = u(null), v = u(null);
-	s(d, () => m.current, []);
-	let [y, b] = l(A, j), x = c(() => ({
-		state: y,
+}, L = n(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: a }, c) => {
+	let f = d(null), p = d(null), m = d(null);
+	s(c, () => f.current, []);
+	let [_, b] = u(N, P), x = l(() => ({
+		state: _,
 		dispatch: b
-	}), [y]);
+	}), [_]);
 	o(() => {
 		b({
 			type: "setTableRef",
-			value: m
+			value: f
 		}), b({
 			type: "setCloneRef",
-			value: h
+			value: p
 		}), b({
 			type: "setPlaceholderRef",
-			value: v
+			value: m
 		});
-	}, [m]), o(() => {
+	}, [f]), o(() => {
 		let e = () => {
-			m.current && b({
+			f.current && b({
 				type: "setTableDimensions",
 				value: {
-					height: m.current.offsetHeight,
-					width: m.current.offsetWidth
+					height: f.current.offsetHeight,
+					width: f.current.offsetWidth
 				}
 			});
 		};
 		return e(), window.addEventListener("resize", e), () => {
 			window.removeEventListener("resize", e);
 		};
-	}, [m]), o(() => {
+	}, [f]), o(() => {
 		b({
 			type: "setOptions",
 			value: r
 		});
 	}, [r]);
-	let { dragStart: S, touchStart: C } = O(y.refs, y.dragged, b, y.dragType, y.options, i), w = c(() => ({
+	let { dragStart: S, touchStart: C } = j(_.refs, _.dragged, b, _.dragType, _.options, i), w = l(() => ({
 		position: "fixed",
 		zIndex: "5",
 		pointerEvents: "none",
@@ -690,50 +730,50 @@ var j = {
 		left: 0,
 		display: "flex",
 		flexDirection: "column",
-		height: y.dragType === "row" ? y.rect.draggedItemHeight : `${y.tableDimensions.height}px`,
-		width: y.dragType === "column" ? `${y.rect.draggedItemWidth}px` : `${y.tableDimensions.width}px`,
+		height: _.dragType === "row" ? _.rect.draggedItemHeight : `${_.tableDimensions.height}px`,
+		width: _.dragType === "column" ? `${_.rect.draggedItemWidth}px` : `${_.tableDimensions.width}px`,
 		overflow: "hidden",
-		boxShadow: y.dragged.isDragging ? "0 0 10px 0 rgba(0, 0, 0, 0.1)" : "none"
+		boxShadow: _.dragged.isDragging ? "0 0 10px 0 rgba(0, 0, 0, 0.1)" : "none"
 	}), [
-		y.dragType,
-		y.dragged.isDragging,
-		y.rect.draggedItemHeight,
-		y.rect.draggedItemWidth,
-		y.tableDimensions.height,
-		y.tableDimensions.width
+		_.dragType,
+		_.dragged.isDragging,
+		_.rect.draggedItemHeight,
+		_.rect.draggedItemWidth,
+		_.tableDimensions.height,
+		_.tableDimensions.width
 	]);
-	return /* @__PURE__ */ f(_.Provider, {
+	return /* @__PURE__ */ h(y.Provider, {
 		value: x,
-		children: /* @__PURE__ */ p(g, {
-			className: y.dragged.isDragging ? "is-dragging" : "",
+		children: /* @__PURE__ */ g(v, {
+			className: _.dragged.isDragging ? "is-dragging" : "",
 			children: [
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ h("div", {
 					id: "portalroot",
 					style: {
 						...w,
-						visibility: y.dragged.isDragging ? "visible" : "hidden"
+						visibility: _.dragged.isDragging ? "visible" : "hidden"
 					},
-					ref: h,
-					children: /* @__PURE__ */ f("div", {
+					ref: p,
+					children: /* @__PURE__ */ h("div", {
 						style: {
 							flexShrink: 0,
 							order: -1
 						},
-						children: y.clone
+						children: _.clone
 					})
 				}),
-				a && /* @__PURE__ */ f("div", {
-					ref: v,
-					style: N,
+				a && /* @__PURE__ */ h("div", {
+					ref: m,
+					style: I,
 					children: a()
 				}),
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ h("div", {
 					"data-contextid": "context",
-					ref: m,
+					ref: f,
 					onMouseDown: S,
 					onTouchStart: C,
 					style: {
-						...M,
+						...F,
 						...n
 					},
 					className: `table ${t ?? ""}`,
@@ -743,21 +783,21 @@ var j = {
 		})
 	});
 });
-P.displayName = "TableProvider";
+L.displayName = "TableProvider";
 //#endregion
 //#region src/Components/TableHeader.tsx
-var F = n(({ children: e, style: t, className: n }, r) => {
-	let i = u(null), a = r || i, { state: s, dispatch: l } = v();
+var R = n(({ children: e, style: t, className: n }, r) => {
+	let i = d(null), a = r || i, { state: s, dispatch: u } = b();
 	o(() => {
-		l({
+		u({
 			type: "setHeaderRef",
 			value: a
 		});
-	}, [l, a]);
-	let { HeaderScrollHandle: d } = b(s.refs), p = {
+	}, [u, a]);
+	let { HeaderScrollHandle: f } = S(s.refs), p = {
 		display: "flex",
 		flex: "1 0 auto"
-	}, m = c(() => ({
+	}, m = l(() => ({
 		overflow: "hidden",
 		display: "flex",
 		paddingRight: `${s.bodyScrollBarWidth}px`,
@@ -768,8 +808,8 @@ var F = n(({ children: e, style: t, className: n }, r) => {
 		s.dragged.isDragging,
 		t
 	]);
-	return o(() => {
-		a.current && l({
+	return c(() => {
+		a.current && u({
 			type: "setWidths",
 			value: Array.from(a.current.querySelectorAll(".th")).map((e) => {
 				let t = e.getAttribute("data-width");
@@ -778,26 +818,26 @@ var F = n(({ children: e, style: t, className: n }, r) => {
 		});
 	}, [
 		e,
-		l,
+		u,
 		a
-	]), o(() => {
-		a.current && l({
+	]), c(() => {
+		a.current && u({
 			type: "setColumnIds",
 			value: Array.from(a.current.querySelectorAll(".draggable")).map((e) => e.getAttribute("data-id"))
 		});
 	}, [
 		e,
-		l,
+		u,
 		a
-	]), /* @__PURE__ */ f("div", {
+	]), /* @__PURE__ */ h("div", {
 		className: `header ${n ?? ""}`,
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ h("div", {
 			className: "thead",
 			style: m,
 			"data-droppableid": "header",
-			onScroll: d,
+			onScroll: f,
 			ref: a,
-			children: /* @__PURE__ */ f("div", {
+			children: /* @__PURE__ */ h("div", {
 				style: p,
 				className: "tr",
 				children: e
@@ -805,67 +845,67 @@ var F = n(({ children: e, style: t, className: n }, r) => {
 		})
 	});
 });
-F.displayName = "TableHeader";
+R.displayName = "TableHeader";
 //#endregion
 //#region src/Components/Draggable.tsx
-var I = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
-	let { state: s, dispatch: l } = v(), d = c(() => String(n) === String(s.dragged.draggedID) && s.dragged.isDragging, [
+var z = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
+	let { state: s, dispatch: c } = b(), u = l(() => String(n) === String(s.dragged.draggedID) && s.dragged.isDragging, [
 		n,
 		s.dragged.draggedID,
 		s.dragged.isDragging
-	]), p = c(() => i === "row" ? E(r, s.options.rowDragRange.start, s.options.rowDragRange.end) : E(r, s.options.columnDragRange.start, s.options.columnDragRange.end), [
+	]), f = l(() => i === "row" ? O(r, s.options.rowDragRange.start, s.options.rowDragRange.end) : O(r, s.options.columnDragRange.start, s.options.columnDragRange.end), [
 		r,
 		s.options.columnDragRange.end,
 		s.options.columnDragRange.start,
 		s.options.rowDragRange.end,
 		s.options.rowDragRange.start,
 		i
-	]), m = u(null), h = u(!1);
+	]), p = d(null), m = d(!1);
 	o(() => {
-		m.current && (h.current = !!m.current.querySelector("[data-drag-handle]"));
+		p.current && (m.current = !!p.current.querySelector("[data-drag-handle]"));
 	});
-	let g = c(() => ({
-		cursor: d ? "-webkit-grabbing" : p || h.current ? "auto" : "-webkit-grab",
-		zIndex: d ? 2 : 1,
-		opacity: d ? 0 : 1,
-		pointerEvents: d ? "none" : "auto",
+	let g = l(() => ({
+		cursor: u ? "-webkit-grabbing" : f || m.current ? "auto" : "-webkit-grab",
+		zIndex: u ? 2 : 1,
+		opacity: u ? 0 : 1,
+		pointerEvents: u ? "none" : "auto",
 		display: "flex"
-	}), [p, d]), _ = (n) => {
-		n.pointerType !== "touch" && (p || requestAnimationFrame(() => {
-			l({
+	}), [f, u]), _ = (n) => {
+		n.pointerType !== "touch" && (f || requestAnimationFrame(() => {
+			c({
 				type: "setClone",
 				value: e.cloneElement(t)
 			});
 		}));
 	};
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ h("div", {
 		className: "draggable",
 		"data-id": n,
 		"data-index": r,
 		"data-type": i,
 		onPointerDown: _,
-		"data-disabled": p ? "true" : "false",
+		"data-disabled": f ? "true" : "false",
 		style: a,
-		children: /* @__PURE__ */ f("div", {
-			ref: m,
+		children: /* @__PURE__ */ h("div", {
+			ref: p,
 			style: g,
 			children: t
 		})
 	});
 });
-I.displayName = "Draggable";
+z.displayName = "Draggable";
 //#endregion
 //#region src/Components/ColumnCell.tsx
-var L = r(({ children: e, width: t, style: n, className: r, ...i }) => {
-	let { state: a } = v(), o = c(() => t ?? a.options.defaultSizing, [t, a.options.defaultSizing]), s = c(() => ({
+var B = r(({ children: e, width: t, style: n, className: r, ...i }) => {
+	let { state: a } = b(), o = l(() => t ?? a.options.defaultSizing, [t, a.options.defaultSizing]), s = l(() => ({
 		width: `${o}px`,
 		flex: `${o} 0 auto`
 	}), [o]);
-	return /* @__PURE__ */ f(I, {
+	return /* @__PURE__ */ h(z, {
 		...i,
 		styles: s,
 		type: "column",
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ h("div", {
 			className: `th ${r ?? ""}`,
 			"data-width": t,
 			style: {
@@ -876,14 +916,14 @@ var L = r(({ children: e, width: t, style: n, className: r, ...i }) => {
 		})
 	});
 });
-L.displayName = "ColumnCell";
+B.displayName = "ColumnCell";
 //#endregion
 //#region src/Components/TableBody.tsx
-var R = n(({ children: t, style: n, className: r }, i) => {
-	let a = u(null);
+var V = n(({ children: t, style: n, className: r }, i) => {
+	let a = d(null);
 	s(i, () => a.current, []);
-	let { state: l, dispatch: d } = v(), h = c(() => {
-		if (l.dragged.sourceIndex === null) return null;
+	let { state: c, dispatch: u } = b(), f = l(() => {
+		if (c.dragged.sourceIndex === null) return null;
 		let n = (t) => {
 			let r = [];
 			return e.Children.forEach(t, (t) => {
@@ -891,124 +931,124 @@ var R = n(({ children: t, style: n, className: r }, i) => {
 			}), r;
 		};
 		return n(t).map((t) => {
-			let n = e.Children.toArray(t.props.children).filter((t) => e.isValidElement(t) && String(t.props.index) === String(l.dragged.sourceIndex)).map((t) => e.cloneElement(t, { isClone: !0 }));
+			let n = e.Children.toArray(t.props.children).filter((t) => e.isValidElement(t) && String(t.props.index) === String(c.dragged.sourceIndex)).map((t) => e.cloneElement(t, { isClone: !0 }));
 			return e.cloneElement(t, {
 				...t.props,
 				children: n
 			});
 		});
-	}, [t, l.dragged.sourceIndex]);
+	}, [t, c.dragged.sourceIndex]);
 	o(() => {
-		d({
+		u({
 			type: "setBodyRef",
 			value: a
 		});
-	}, [d, a]);
-	let { BodyScrollHandle: g } = b(l.refs), _ = c(() => ({
+	}, [u, a]);
+	let { BodyScrollHandle: m } = S(c.refs), _ = l(() => ({
 		overflowX: "auto",
 		overflowY: "auto",
 		flex: 1,
-		userSelect: l.dragged.isDragging ? "none" : "auto",
+		userSelect: c.dragged.isDragging ? "none" : "auto",
 		...n
-	}), [l.dragged.isDragging, n]);
+	}), [c.dragged.isDragging, n]);
 	o(() => {
 		if (a.current) {
 			let e = a.current.clientWidth;
-			d({
+			u({
 				type: "setBodyScrollBarWidth",
 				value: a.current.offsetWidth - e
 			});
 		}
-	}, [d, a]);
-	let y = a.current?.scrollHeight ?? 0;
-	return /* @__PURE__ */ p(e.Fragment, { children: [l.dragType === "column" && l.refs.cloneRef?.current && m(/* @__PURE__ */ f("div", {
+	}, [u, a]);
+	let v = a.current?.scrollHeight ?? 0;
+	return /* @__PURE__ */ g(e.Fragment, { children: [c.dragType === "column" && c.refs.cloneRef?.current && p(/* @__PURE__ */ h("div", {
 		className: "body clone-body",
 		"data-droppableid": "body",
 		style: {
 			overflow: "hidden",
 			flex: 1
 		},
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ h("div", {
 			className: "rbody",
 			style: {
-				height: y,
+				height: v,
 				position: "relative"
 			},
-			children: h
+			children: f
 		})
-	}), l.refs.cloneRef.current), /* @__PURE__ */ f("div", {
+	}), c.refs.cloneRef.current), /* @__PURE__ */ h("div", {
 		className: `body ${r ?? ""}`,
-		style: z,
-		children: /* @__PURE__ */ f("div", {
+		style: H,
+		children: /* @__PURE__ */ h("div", {
 			className: "ibody",
 			style: _,
 			"data-droppableid": "body",
-			onScroll: g,
+			onScroll: m,
 			ref: a,
 			children: t
 		})
 	})] });
-}), z = {
+}), H = {
 	display: "flex",
 	overflow: "hidden",
 	flex: 1
 };
-R.displayName = "TableBody";
+V.displayName = "TableBody";
 //#endregion
 //#region src/Components/BodyRow.tsx
-var B = {
+var U = {
 	display: "flex",
 	flex: "1 0 auto",
 	minHeight: "24px"
-}, V = r(({ children: e, style: t, className: n, ...r }) => {
-	let i = c(() => t ? {
-		...B,
+}, W = r(({ children: e, style: t, className: n, ...r }) => {
+	let i = l(() => t ? {
+		...U,
 		...t
-	} : B, [t]), a = h("tr", n);
-	return /* @__PURE__ */ f(I, {
+	} : U, [t]), a = _("tr", n);
+	return /* @__PURE__ */ h(z, {
 		...r,
 		type: "row",
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ h("div", {
 			className: a,
 			style: i,
 			children: e
 		})
 	});
 });
-V.displayName = "BodyRow";
+W.displayName = "BodyRow";
 //#endregion
 //#region src/Components/RowCell.tsx
-var H = r(({ children: e, style: t, className: n, isClone: r, ...i }) => {
-	let { index: a } = i, { state: o } = v(), s = c(() => o.columnIds[a] ?? "", [o.columnIds, a]), l = c(() => o.widths[a] ?? o.options.defaultSizing, [
+var G = r(({ children: e, style: t, className: n, isClone: r, ...i }) => {
+	let { index: a } = i, { state: o } = b(), s = l(() => o.columnIds[a] ?? "", [o.columnIds, a]), c = l(() => o.widths[a] ?? o.options.defaultSizing, [
 		o.widths,
 		a,
 		o.options.defaultSizing
-	]), u = c(() => r ? !1 : s === o.dragged.draggedID, [
+	]), u = l(() => r ? !1 : s === o.dragged.draggedID, [
 		r,
 		s,
 		o.dragged.draggedID
-	]), d = c(() => ({
+	]), d = l(() => ({
 		display: "inline-flex",
 		opacity: u ? 0 : 1,
-		width: `${l}px`,
-		flex: `${l} 0 auto`,
+		width: `${c}px`,
+		flex: `${c} 0 auto`,
 		...t
 	}), [
 		u,
-		l,
+		c,
 		t
 	]);
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ h("div", {
 		className: `td ${n ?? ""}`,
 		style: d,
 		"data-col-index": a,
 		children: e
 	});
 });
-H.displayName = "RowCell";
+G.displayName = "RowCell";
 //#endregion
 //#region src/Components/DragHandle.tsx
-var U = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ f("div", {
+var K = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ h("div", {
 	"data-drag-handle": "true",
 	className: t,
 	style: {
@@ -1019,6 +1059,6 @@ var U = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ f("div",
 	},
 	children: e
 }));
-U.displayName = "DragHandle";
+K.displayName = "DragHandle";
 //#endregion
-export { V as BodyRow, L as ColumnCell, U as DragHandle, H as RowCell, R as TableBody, P as TableContainer, F as TableHeader, v as useTable };
+export { W as BodyRow, B as ColumnCell, K as DragHandle, G as RowCell, V as TableBody, L as TableContainer, R as TableHeader, b as useTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexitablesort",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "type": "module",
   "description": "Sortable table with draggable rows and columns",
   "main": "dist/index.cjs.js",
@@ -42,7 +42,7 @@
     "type": "git",
     "url": "git+https://github.com/samiodeh1337/sortable-table.git"
   },
-  "homepage": "https://github.com/samiodeh1337/sortable-table.git#readme",
+  "homepage": "https://samiodeh1337.github.io/sortable-table/",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"