flexitablesort 1.0.6 → 1.1.0

package/dist/hooks/useDragContextEvents.d.ts

@@ -1,4 +1,5 @@
 declare const useDragContextEvents: (refs: any, dragged: any, dispatch: any, dragType: any, options: any, onDragEnd: any) => {
     dragStart: (e: any) => void;
+    touchStart: (e: any) => void;
 };
 export default useDragContextEvents;

package/dist/index.cjs.js

@@ -12,4 +12,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
     user-select: none !important;
     -webkit-user-select: 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=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.useCallback)((e,o,s)=>{let c=s===`vertical`,l=c?o.scrollHeight-o.clientHeight:o.scrollWidth-o.clientWidth;c?o.scrollTop+=e:o.scrollLeft+=e,c&&(o.scrollTop>=l||o.scrollTop<=0)||!c&&(o.scrollLeft>=l||o.scrollLeft<=0)?i.current!==null&&cancelAnimationFrame(i.current):n.current||t.current?(i.current=requestAnimationFrame(()=>a(e+r.current,o,s)),r.current+=e/1e3):i.current!==null&&cancelAnimationFrame(i.current)},[]);return{startAutoScroll:(0,c.useCallback)((e,i,o)=>{let s=o===`vertical`;!n.current&&!t.current&&(s?n.current=!0:t.current=!0,r.current=0,a(e,i,o))},[a]),stopAutoScroll:(0,c.useCallback)(()=>{n.current=!1,t.current=!1,i.current!==null&&cancelAnimationFrame(i.current)},[]),isAutoScrollingHorizontal:t,isAutoScrollingVertical:n,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])}},_=(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},v=(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},y=(e,t,n)=>t!==void 0&&e<t||n!==void 0&&e>n,b=`all 450ms cubic-bezier(0.2, 0, 0, 1)`,x=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,isAutoScrollingHorizontal:l,isAutoScrollingVertical:u}=g(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),y=(0,c.useRef)(null),x=(0,c.useRef)({width:0,height:0}),S=(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 s=i.rowDragRange.start,c=i.rowDragRange.end;return(s||c)&&(o=o.filter(e=>(!s||e.index>=s)&&(!c||e.index<c))),o},[e.bodyRef,i.rowDragRange]),C=(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),r=i.columnDragRange?.start,a=i.columnDragRange?.end;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]),w=(0,c.useCallback)((t,n,r,i)=>{let a=e.placeholderRef?.current;if(!a||!t){a&&(a.style.display=`none`);return}let o=x.current,s=t.getBoundingClientRect();a.style.display=`block`;let c=n<r;if(i===`row`){let e=c?s.top+s.height-o.height:s.top;a.style.top=`${e}px`,a.style.left=`${s.left}px`,a.style.width=`${s.width}px`,a.style.height=`${o.height}px`}else{let t=(e.tableRef?.current)?.getBoundingClientRect(),n=c?s.left+s.width-o.width:s.left;a.style.top=`${t?.top??s.top}px`,a.style.left=`${n}px`,a.style.width=`${o.width}px`,a.style.height=`${t?.height??s.height}px`}},[e.placeholderRef,e.tableRef]),T=(0,c.useCallback)((t,n,r)=>{if(t===null||n===null)return;let i=x.current,a=null;if(r===`row`){let r=e.bodyRef.current;if(!r)return;let o=r.querySelectorAll(`.draggable[data-type="row"]`);for(let e=0;e<o.length;e++){let r=o[e],s=+r.dataset.index,c=r.firstElementChild;if(!c)continue;let l=``;s>t&&s<=n?l=`translateY(-${i.height}px)`:s<t&&s>=n&&(l=`translateY(${i.height}px)`),c.style.transform=l,c.style.transition=s===t?`none`:b,s===n?(r.setAttribute(`data-drop-target`,`true`),a=r):r.removeAttribute(`data-drop-target`)}}else if(r===`column`){let r=e.headerRef.current;if(r){let e=r.querySelectorAll(`.draggable[data-type="column"]`);for(let r=0;r<e.length;r++){let o=e[r],s=+o.dataset.index,c=o.firstElementChild;if(!c)continue;let l=``;s>t&&s<=n?l=`translateX(-${i.width}px)`:s<t&&s>=n&&(l=`translateX(${i.width}px)`),c.style.transform=l,c.style.transition=s===t?`none`:b,s===n?(o.setAttribute(`data-drop-target`,`true`),a=o):o.removeAttribute(`data-drop-target`)}}let o=e.bodyRef.current;if(o){let e=o.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=b}}}w(a,t,n,r)},[e.bodyRef,e.headerRef,e.placeholderRef,w]),E=(0,c.useCallback)(()=>{let t=e.placeholderRef?.current;t&&(t.style.display=`none`);let n=e.bodyRef.current;if(n){let e=n.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 t=n.querySelectorAll(`.td[data-col-index]`);for(let e=0;e<t.length;e++)t[e].style.transform=``,t[e].style.transition=``}let r=e.headerRef.current;if(r){let e=r.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=``)}}},[e.bodyRef,e.headerRef]),D=(0,c.useCallback)(t=>{if(t.target!==t.currentTarget){let r=!1,i=(e=>{for(;e;){if(e.dataset?.dragHandle===`true`&&(r=!0),e.dataset?.contextid||e.dataset?.disabled===`true`)return null;if(e.dataset?.id)return e;e=e.parentNode}return null})(t.target);if(!i||!r&&i.querySelector(`[data-drag-handle]`))return;let a=i.dataset.id,o=+i.dataset.index,s=i.dataset.type;p.current=s,h.current=o,y.current=null;let c=s===`row`?e.bodyRef.current.scrollLeft:0,l=i.getBoundingClientRect();x.current={width:l.width,height:l.height};let u={x:0,y:0};t.type===`touchstart`?(u.x=t.touches[0].clientX,u.y=t.touches[0].clientY):(u.x=t.clientX-l.left-c,u.y=t.clientY-l.top),m.current=u;let g={x:l.left+c,y:l.top};s===`row`?d.current=S():d.current=C();let _=e.bodyRef.current;_&&(f.current=_.getBoundingClientRect());let v=e.cloneRef?.current;v&&(v.style.transform=`translate(${g.x}px, ${g.y}px)`),requestAnimationFrame(()=>{n({type:`dragStart`,value:{rect:{draggedItemHeight:l.height,draggedItemWidth:l.width},dragged:{initial:u,translate:g,draggedID:a,isDragging:!0,sourceIndex:o},dragType:s}}),requestAnimationFrame(()=>{let t=e.cloneRef?.current,n=e.bodyRef.current;if(t&&n){if(s===`row`)t.scrollLeft=n.scrollLeft;else if(s===`column`){let e=t.querySelector(`.clone-body`);e&&(e.scrollTop=n.scrollTop)}}})})}},[n,e,S,C]),O=(0,c.useCallback)(()=>{let t=y.current,r=h.current,i=p.current;d.current=null,f.current=null;let o=e.cloneRef?.current;o&&(o.style.transform=`translate(0px, 0px)`,o.scrollLeft=0),E(),a&&r!==null&&t!==null&&i&&a({sourceIndex:r,targetIndex:t,dragType:i}),n({type:`dragEnd`,value:{targetIndex:t,sourceIndex:r}}),s(),p.current=null,h.current=null,y.current=null},[n,s,e.cloneRef,E,a]),k=(0,c.useCallback)(()=>{d.current=null,f.current=null;let e=h.current,t=y.current,n=p.current;e!==null&&t!==null&&T(e,t,n)},[T]),A=(0,c.useCallback)(t=>{t.stopPropagation();let n=m.current,i,a;t.type===`touchmove`?(i=t.touches[0].clientX-n.x,a=t.touches[0].clientY-n.y):(i=t.clientX-n.x,a=t.clientY-n.y);let c=e.cloneRef?.current;if(c){c.style.transform=`translate(${i}px, ${a}px)`;let t=e.bodyRef.current;if(t){if(p.current===`row`)c.scrollLeft=t.scrollLeft;else if(p.current===`column`){let e=c.querySelector(`.clone-body`);e&&(e.scrollTop=t.scrollTop)}}}u.current=!1,l.current=!1;let g=e.bodyRef.current;if(!g)return;let{clientY:b,clientX:x}=t,w=f.current;w||(w=g.getBoundingClientRect(),f.current=w);let{top:E,bottom:D,left:O,right:k}=w,A=0,j=p.current||r;if(j===`row`){let e=g.scrollTop,t=w.top,n=d.current;n||(n=S(),d.current=n),n&&n.length>0&&(A=_(b-t+e,n)),b<E+30?(o(-5,g,`vertical`),d.current=null):b>D-30?(o(5,g,`vertical`),d.current=null):s()}else{let e=d.current;e||(e=C(),d.current=e),e&&e.length>0&&(A=v(x,e)),x<O+30?(o(-5,g,`horizontal`),d.current=null):x>k-30?(o(5,g,`horizontal`),d.current=null):s()}A!==y.current&&(y.current=A,requestAnimationFrame(()=>{T(h.current,A,j)}))},[r,l,u,e.bodyRef,e.cloneRef,S,C,o,s,T]),j=(0,c.useCallback)(()=>{d.current=null,f.current=null;let t=e.cloneRef?.current;t&&(t.style.transform=`translate(0px, 0px)`,t.scrollLeft=0),E(),n({type:`dragEnd`,value:{targetIndex:null,sourceIndex:null}}),s(),p.current=null,h.current=null,y.current=null},[n,s,e.cloneRef,E]),M=(0,c.useCallback)(e=>{e.key===`Escape`&&j()},[j]);return(0,c.useEffect)(()=>{if(t.isDragging){let t=e.bodyRef.current;return window.addEventListener(`mousemove`,A,{passive:!0}),window.addEventListener(`touchmove`,A,!1),window.addEventListener(`touchend`,O,!1),window.addEventListener(`mouseup`,O,!1),window.addEventListener(`keydown`,M),t?.addEventListener(`scroll`,k,{passive:!0}),()=>{window.removeEventListener(`mousemove`,A),window.removeEventListener(`touchmove`,A,!1),window.removeEventListener(`touchend`,O,!1),window.removeEventListener(`mouseup`,O,!1),window.removeEventListener(`keydown`,M),t?.removeEventListener(`scroll`,k)}}},[t.isDragging,A,O,j,M,k,e.bodyRef]),{dragStart:D}},S={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function C(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??S};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 w={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:S,widths:[],columnIds:[]},T={position:`relative`,display:`flex`,flexFlow:`column`},E={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},D=(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)(C,w),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:_}=x(f.refs,f.dragged,h,f.dragType,f.options,i),v=(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-20}px`,width:f.dragType===`column`?`${f.rect.draggedItemWidth}px`:`${f.tableDimensions.width-20}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:v,ref:l,children:f.clone}),a&&(0,u.jsx)(`div`,{ref:d,style:E,children:a()}),(0,u.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:_,onTouchStart:_,style:{...T,...n},className:`table ${t??``}`,children:e})]})})});D.displayName=`TableProvider`;var O=(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}=g(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})})})});O.displayName=`TableHeader`;var k=(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`?y(n,a.options.rowDragRange.start,a.options.rowDragRange.end):y(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=>{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,onMouseDown:m,"data-disabled":l?`true`:`false`,style:i,children:(0,u.jsx)(`div`,{ref:d,style:p,children:e})})});k.displayName=`Draggable`;var A=(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)(k,{...i,styles:s,type:`column`,children:(0,u.jsx)(`div`,{className:`th ${r??``}`,"data-width":t,style:{width:`100%`,...n},children:e})})});A.displayName=`ColumnCell`;var j=(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}=g(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:M,children:(0,u.jsx)(`div`,{className:`ibody`,style:f,"data-droppableid":`body`,onScroll:l,ref:i,children:e})})]})}),M={display:`flex`,overflow:`hidden`,flex:1};j.displayName=`TableBody`;var N={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},P=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,c.useMemo)(()=>t?{...N,...t}:N,[t]),a=(0,f.default)(`tr`,n);return(0,u.jsx)(k,{...r,type:`row`,children:(0,u.jsx)(`div`,{className:a,style:i,children:e})})});P.displayName=`BodyRow`;var F=(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})});F.displayName=`RowCell`;var I=(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}));I.displayName=`DragHandle`,exports.BodyRow=P,exports.ColumnCell=A,exports.DragHandle=I,exports.RowCell=F,exports.TableBody=j,exports.TableContainer=D,exports.TableHeader=O,exports.useTable=h;
+`,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=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.useCallback)((e,o,s)=>{let c=s===`vertical`,l=c?o.scrollHeight-o.clientHeight:o.scrollWidth-o.clientWidth;c?o.scrollTop+=e:o.scrollLeft+=e,c&&(o.scrollTop>=l||o.scrollTop<=0)||!c&&(o.scrollLeft>=l||o.scrollLeft<=0)?i.current!==null&&cancelAnimationFrame(i.current):n.current||t.current?(i.current=requestAnimationFrame(()=>a(e+r.current,o,s)),r.current+=e/1e3):i.current!==null&&cancelAnimationFrame(i.current)},[]);return{startAutoScroll:(0,c.useCallback)((e,i,o)=>{let s=o===`vertical`;!n.current&&!t.current&&(s?n.current=!0:t.current=!0,r.current=0,a(e,i,o))},[a]),stopAutoScroll:(0,c.useCallback)(()=>{n.current=!1,t.current=!1,i.current!==null&&cancelAnimationFrame(i.current)},[]),isAutoScrollingHorizontal:t,isAutoScrollingVertical:n,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])}},_=(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},v=(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},y=(e,t,n)=>t!==void 0&&e<t||n!==void 0&&e>n,b=`all 450ms cubic-bezier(0.2, 0, 0, 1)`,x=300,S=8,C=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,isAutoScrollingHorizontal:l,isAutoScrollingVertical:u}=g(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),y=(0,c.useRef)(null),C=(0,c.useRef)({width:0,height:0}),w=(0,c.useRef)(null),T=(0,c.useRef)({x:0,y:0}),E=(0,c.useRef)(null),D=(0,c.useRef)(!1),O=(0,c.useRef)(null),k=(0,c.useRef)(null),A=(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 s=i.rowDragRange.start,c=i.rowDragRange.end;return(s||c)&&(o=o.filter(e=>(!s||e.index>=s)&&(!c||e.index<c))),o},[e.bodyRef,i.rowDragRange]),j=(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),r=i.columnDragRange?.start,a=i.columnDragRange?.end;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]),M=(0,c.useCallback)((t,n,r,i)=>{let a=e.placeholderRef?.current;if(!a||!t){a&&(a.style.display=`none`);return}let o=C.current,s=t.getBoundingClientRect();a.style.display=`block`;let c=n<r;if(i===`row`){let e=c?s.top+s.height-o.height:s.top;a.style.top=`${e}px`,a.style.left=`${s.left}px`,a.style.width=`${s.width}px`,a.style.height=`${o.height}px`}else{let t=(e.tableRef?.current)?.getBoundingClientRect(),n=c?s.left+s.width-o.width:s.left;a.style.top=`${t?.top??s.top}px`,a.style.left=`${n}px`,a.style.width=`${o.width}px`,a.style.height=`${t?.height??s.height}px`}},[e.placeholderRef,e.tableRef]),N=(0,c.useCallback)((t,n,r)=>{if(t===null||n===null)return;let i=C.current,a=null;if(r===`row`){let r=e.bodyRef.current;if(!r)return;let o=r.querySelectorAll(`.draggable[data-type="row"]`);for(let e=0;e<o.length;e++){let r=o[e],s=+r.dataset.index,c=r.firstElementChild;if(!c)continue;let l=``;s>t&&s<=n?l=`translateY(-${i.height}px)`:s<t&&s>=n&&(l=`translateY(${i.height}px)`),c.style.transform=l,c.style.transition=s===t?`none`:b,s===n?(r.setAttribute(`data-drop-target`,`true`),a=r):r.removeAttribute(`data-drop-target`)}}else if(r===`column`){let r=e.headerRef.current;if(r){let e=r.querySelectorAll(`.draggable[data-type="column"]`);for(let r=0;r<e.length;r++){let o=e[r],s=+o.dataset.index,c=o.firstElementChild;if(!c)continue;let l=``;s>t&&s<=n?l=`translateX(-${i.width}px)`:s<t&&s>=n&&(l=`translateX(${i.width}px)`),c.style.transform=l,c.style.transition=s===t?`none`:b,s===n?(o.setAttribute(`data-drop-target`,`true`),a=o):o.removeAttribute(`data-drop-target`)}}let o=e.bodyRef.current;if(o){let e=o.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=b}}}M(a,t,n,r)},[e.bodyRef,e.headerRef,e.placeholderRef,M]),P=(0,c.useCallback)(()=>{let t=e.placeholderRef?.current;t&&(t.style.display=`none`);let n=e.bodyRef.current;if(n){let e=n.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 t=n.querySelectorAll(`.td[data-col-index]`);for(let e=0;e<t.length;e++)t[e].style.transform=``,t[e].style.transition=``}let r=e.headerRef.current;if(r){let e=r.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=``)}}},[e.bodyRef,e.headerRef]),F=(0,c.useCallback)((t,r,i)=>{let a=!1,o=(e=>{for(;e;){if(e.dataset?.dragHandle===`true`&&(a=!0),e.dataset?.contextid||e.dataset?.disabled===`true`)return null;if(e.dataset?.id)return e;e=e.parentNode}return null})(t.target);if(!o||!a&&o.querySelector(`[data-drag-handle]`))return;let s=o.dataset.id,c=+o.dataset.index,l=o.dataset.type,u=t.type===`touchstart`;p.current=l,h.current=c,y.current=null,u&&o.dispatchEvent(new PointerEvent(`pointerdown`,{bubbles:!0,pointerType:`mouse`}));let g=l===`row`?e.bodyRef.current.scrollLeft:0,_=o.getBoundingClientRect();C.current={width:_.width,height:_.height};let v={x:r-_.left-g,y:i-_.top};m.current=v;let b={x:_.left+g,y:_.top};l===`row`?d.current=A():d.current=j();let x=e.bodyRef.current;x&&(f.current=x.getBoundingClientRect());let S=e.cloneRef?.current;S&&(S.style.transform=`translate(${b.x}px, ${b.y}px)`);let w=e.tableRef?.current;w&&(w.style.touchAction=`none`),n({type:`dragStart`,value:{rect:{draggedItemHeight:_.height,draggedItemWidth:_.width},dragged:{initial:v,translate:b,draggedID:s,isDragging:!0,sourceIndex:c},dragType:l}}),requestAnimationFrame(()=>{let t=e.cloneRef?.current,n=e.bodyRef.current;if(t&&n){if(l===`row`)t.scrollLeft=n.scrollLeft;else if(l===`column`){let e=t.querySelector(`.clone-body`);e&&(e.scrollTop=n.scrollTop)}}})},[n,e,A,j]),I=(0,c.useCallback)(e=>{e.target!==e.currentTarget&&(D.current||F(e,e.clientX,e.clientY))},[F]),L=(0,c.useCallback)(()=>{w.current&&=(clearTimeout(w.current),null),E.current=null,window.removeEventListener(`touchmove`,O.current),window.removeEventListener(`touchend`,k.current)},[]),R=(0,c.useCallback)(e=>{if(e.target===e.currentTarget)return;L(),D.current=!0;let t=e.touches[0];T.current={x:t.clientX,y:t.clientY},E.current=e;let n=e=>{let t=e.touches[0],n=t.clientX-T.current.x,r=t.clientY-T.current.y;(Math.abs(n)>S||Math.abs(r)>S)&&(L(),setTimeout(()=>{D.current=!1},400))},r=()=>{L(),setTimeout(()=>{D.current=!1},400)};O.current=n,k.current=r,window.addEventListener(`touchmove`,n,{passive:!0}),window.addEventListener(`touchend`,r,!1),w.current=setTimeout(()=>{w.current=null,window.removeEventListener(`touchmove`,n),window.removeEventListener(`touchend`,r);let e=E.current;E.current=null,e&&F(e,t.clientX,t.clientY)},x)},[F,L]),z=(0,c.useCallback)(()=>{L(),setTimeout(()=>{D.current=!1},400);let t=y.current,r=h.current,i=p.current;d.current=null,f.current=null;let o=e.cloneRef?.current;o&&(o.style.transform=`translate(0px, 0px)`,o.scrollLeft=0);let c=e.tableRef?.current;c&&(c.style.touchAction=``),P(),a&&r!==null&&t!==null&&i&&a({sourceIndex:r,targetIndex:t,dragType:i}),n({type:`dragEnd`,value:{targetIndex:t,sourceIndex:r}}),s(),p.current=null,h.current=null,y.current=null},[n,s,e.cloneRef,e.tableRef,P,L,a]),B=(0,c.useCallback)(()=>{d.current=null,f.current=null;let e=h.current,t=y.current,n=p.current;e!==null&&t!==null&&N(e,t,n)},[N]),V=(0,c.useCallback)(t=>{t.stopPropagation();let n=m.current,i,a;t.type===`touchmove`?(i=t.touches[0].clientX-n.x,a=t.touches[0].clientY-n.y):(i=t.clientX-n.x,a=t.clientY-n.y);let c=e.cloneRef?.current;if(c){c.style.transform=`translate(${i}px, ${a}px)`;let t=e.bodyRef.current;if(t){if(p.current===`row`)c.scrollLeft=t.scrollLeft;else if(p.current===`column`){let e=c.querySelector(`.clone-body`);e&&(e.scrollTop=t.scrollTop)}}}u.current=!1,l.current=!1;let g=e.bodyRef.current;if(!g)return;let b=t.type===`touchmove`?t.touches[0].clientX:t.clientX,x=t.type===`touchmove`?t.touches[0].clientY:t.clientY,S=f.current;S||(S=g.getBoundingClientRect(),f.current=S);let{top:C,bottom:w,left:T,right:E}=S,D=0,O=p.current||r;if(O===`row`){let e=g.scrollTop,t=S.top,n=d.current;n||(n=A(),d.current=n),n&&n.length>0&&(D=_(x-t+e,n)),x<C+30?(o(-5,g,`vertical`),d.current=null):x>w-30?(o(5,g,`vertical`),d.current=null):s()}else{let e=d.current;e||(e=j(),d.current=e),e&&e.length>0&&(D=v(b,e)),b<T+30?(o(-5,g,`horizontal`),d.current=null):b>E-30?(o(5,g,`horizontal`),d.current=null):s()}D!==y.current&&(y.current=D,requestAnimationFrame(()=>{N(h.current,D,O)}))},[r,l,u,e.bodyRef,e.cloneRef,A,j,o,s,N]),H=(0,c.useCallback)(()=>{L(),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=``),P(),n({type:`dragEnd`,value:{targetIndex:null,sourceIndex:null}}),s(),p.current=null,h.current=null,y.current=null},[n,s,e.cloneRef,e.tableRef,P,L]),U=(0,c.useCallback)(e=>{e.key===`Escape`&&H()},[H]),W=(0,c.useCallback)(e=>{e.preventDefault(),V(e)},[V]);return(0,c.useEffect)(()=>{if(t.isDragging){let t=e.bodyRef.current;return window.addEventListener(`mousemove`,V,{passive:!0}),window.addEventListener(`touchmove`,W,{passive:!1}),window.addEventListener(`touchend`,z,!1),window.addEventListener(`mouseup`,z,!1),window.addEventListener(`keydown`,U),t?.addEventListener(`scroll`,B,{passive:!0}),()=>{window.removeEventListener(`mousemove`,V),window.removeEventListener(`touchmove`,W),window.removeEventListener(`touchend`,z,!1),window.removeEventListener(`mouseup`,z,!1),window.removeEventListener(`keydown`,U),t?.removeEventListener(`scroll`,B);let n=e.tableRef?.current;n&&(n.style.touchAction=``)}}},[t.isDragging,V,W,z,H,U,B,e.bodyRef,e.tableRef]),{dragStart:I,touchStart:R}},w={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function T(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??w};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 E={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:w,widths:[],columnIds:[]},D={position:`relative`,display:`flex`,flexFlow:`column`},O={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},k=(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)(T,E),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}=C(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-20}px`,width:f.dragType===`column`?`${f.rect.draggedItemWidth}px`:`${f.tableDimensions.width-20}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:O,children:a()}),(0,u.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:_,onTouchStart:v,style:{...D,...n},className:`table ${t??``}`,children:e})]})})});k.displayName=`TableProvider`;var A=(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}=g(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})})})});A.displayName=`TableHeader`;var j=(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`?y(n,a.options.rowDragRange.start,a.options.rowDragRange.end):y(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})})});j.displayName=`Draggable`;var M=(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)(j,{...i,styles:s,type:`column`,children:(0,u.jsx)(`div`,{className:`th ${r??``}`,"data-width":t,style:{width:`100%`,...n},children:e})})});M.displayName=`ColumnCell`;var N=(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}=g(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:P,children:(0,u.jsx)(`div`,{className:`ibody`,style:f,"data-droppableid":`body`,onScroll:l,ref:i,children:e})})]})}),P={display:`flex`,overflow:`hidden`,flex:1};N.displayName=`TableBody`;var F={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},I=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,c.useMemo)(()=>t?{...F,...t}:F,[t]),a=(0,f.default)(`tr`,n);return(0,u.jsx)(j,{...r,type:`row`,children:(0,u.jsx)(`div`,{className:a,style:i,children:e})})});I.displayName=`BodyRow`;var L=(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})});L.displayName=`RowCell`;var R=(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}));R.displayName=`DragHandle`,exports.BodyRow=I,exports.ColumnCell=M,exports.DragHandle=R,exports.RowCell=L,exports.TableBody=N,exports.TableContainer=k,exports.TableHeader=A,exports.useTable=h;

package/dist/index.es.js

@@ -60,14 +60,17 @@ var g = d.div`
 		n < a.itemLeft ? i = e - 1 : r = e + 1;
 	}
 	return +t[r].index;
-}, S = (e, t, n) => t !== void 0 && e < t || n !== void 0 && e > n, C = "all 450ms cubic-bezier(0.2, 0, 0, 1)", w = (e, t, n, r, a, s) => {
+}, S = (e, t, n) => t !== void 0 && e < t || n !== void 0 && e > n, C = "all 450ms cubic-bezier(0.2, 0, 0, 1)", w = 300, T = 8, E = (e, t, n, r, a, s) => {
 	let { startAutoScroll: c, stopAutoScroll: l, isAutoScrollingHorizontal: d, isAutoScrollingVertical: f } = y(e), p = u(null), m = u(null), h = u(null), g = u({
 		x: 0,
 		y: 0
 	}), _ = u(null), v = u(null), S = u({
 		width: 0,
 		height: 0
-	}), w = i(() => {
+	}), E = u(null), D = u({
+		x: 0,
+		y: 0
+	}), O = u(null), k = u(!1), A = u(null), j = u(null), M = 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 = [];
@@ -84,7 +87,7 @@ var g = d.div`
 		}
 		let s = a.rowDragRange.start, c = a.rowDragRange.end;
 		return (s || c) && (o = o.filter((e) => (!s || e.index >= s) && (!c || e.index < c))), o;
-	}, [e.bodyRef, a.rowDragRange]), T = i(() => {
+	}, [e.bodyRef, a.rowDragRange]), N = i(() => {
 		let t = e.headerRef.current;
 		if (!t || !t.children[0]) return null;
 		let n = Array.from(t.children[0].children).map((e) => {
@@ -101,7 +104,7 @@ var g = d.div`
 			let t = +e.index;
 			return (r === void 0 || t >= r) && (i === void 0 || t < i);
 		})), n;
-	}, [e.headerRef, a.columnDragRange]), E = i((t, n, r, i) => {
+	}, [e.headerRef, a.columnDragRange]), P = i((t, n, r, i) => {
 		let a = e.placeholderRef?.current;
 		if (!a || !t) {
 			a && (a.style.display = "none");
@@ -117,7 +120,7 @@ var g = d.div`
 			let t = (e.tableRef?.current)?.getBoundingClientRect(), n = c ? s.left + s.width - o.width : s.left;
 			a.style.top = `${t?.top ?? s.top}px`, a.style.left = `${n}px`, a.style.width = `${o.width}px`, a.style.height = `${t?.height ?? s.height}px`;
 		}
-	}, [e.placeholderRef, e.tableRef]), D = i((t, n, r) => {
+	}, [e.placeholderRef, e.tableRef]), F = i((t, n, r) => {
 		if (t === null || n === null) return;
 		let i = S.current, a = null;
 		if (r === "row") {
@@ -150,13 +153,13 @@ var g = d.div`
 				}
 			}
 		}
-		E(a, t, n, r);
+		P(a, t, n, r);
 	}, [
 		e.bodyRef,
 		e.headerRef,
 		e.placeholderRef,
-		E
-	]), O = i(() => {
+		P
+	]), I = i(() => {
 		let t = e.placeholderRef?.current;
 		t && (t.style.display = "none");
 		let n = e.bodyRef.current;
@@ -179,76 +182,109 @@ var g = d.div`
 				n && (n.style.transform = "", n.style.transition = "");
 			}
 		}
-	}, [e.bodyRef, e.headerRef]), k = i((t) => {
-		if (t.target !== t.currentTarget) {
-			let r = !1, i = ((e) => {
-				for (; e;) {
-					if (e.dataset?.dragHandle === "true" && (r = !0), e.dataset?.contextid || e.dataset?.disabled === "true") return null;
-					if (e.dataset?.id) return e;
-					e = e.parentNode;
+	}, [e.bodyRef, e.headerRef]), L = i((t, r, i) => {
+		let a = !1, o = ((e) => {
+			for (; e;) {
+				if (e.dataset?.dragHandle === "true" && (a = !0), e.dataset?.contextid || e.dataset?.disabled === "true") return null;
+				if (e.dataset?.id) return e;
+				e = e.parentNode;
+			}
+			return null;
+		})(t.target);
+		if (!o || !a && o.querySelector("[data-drag-handle]")) return;
+		let s = o.dataset.id, c = +o.dataset.index, l = o.dataset.type, u = t.type === "touchstart";
+		h.current = l, _.current = c, v.current = null, u && o.dispatchEvent(new PointerEvent("pointerdown", {
+			bubbles: !0,
+			pointerType: "mouse"
+		}));
+		let d = l === "row" ? e.bodyRef.current.scrollLeft : 0, f = o.getBoundingClientRect();
+		S.current = {
+			width: f.width,
+			height: f.height
+		};
+		let y = {
+			x: r - f.left - d,
+			y: i - f.top
+		};
+		g.current = y;
+		let b = {
+			x: f.left + d,
+			y: f.top
+		};
+		l === "row" ? p.current = M() : p.current = N();
+		let x = e.bodyRef.current;
+		x && (m.current = x.getBoundingClientRect());
+		let C = e.cloneRef?.current;
+		C && (C.style.transform = `translate(${b.x}px, ${b.y}px)`);
+		let w = e.tableRef?.current;
+		w && (w.style.touchAction = "none"), n({
+			type: "dragStart",
+			value: {
+				rect: {
+					draggedItemHeight: f.height,
+					draggedItemWidth: f.width
+				},
+				dragged: {
+					initial: y,
+					translate: b,
+					draggedID: s,
+					isDragging: !0,
+					sourceIndex: c
+				},
+				dragType: l
+			}
+		}), requestAnimationFrame(() => {
+			let t = e.cloneRef?.current, n = e.bodyRef.current;
+			if (t && n) {
+				if (l === "row") t.scrollLeft = n.scrollLeft;
+				else if (l === "column") {
+					let e = t.querySelector(".clone-body");
+					e && (e.scrollTop = n.scrollTop);
 				}
-				return null;
-			})(t.target);
-			if (!i || !r && i.querySelector("[data-drag-handle]")) return;
-			let a = i.dataset.id, o = +i.dataset.index, s = i.dataset.type;
-			h.current = s, _.current = o, v.current = null;
-			let c = s === "row" ? e.bodyRef.current.scrollLeft : 0, l = i.getBoundingClientRect();
-			S.current = {
-				width: l.width,
-				height: l.height
-			};
-			let u = {
-				x: 0,
-				y: 0
-			};
-			t.type === "touchstart" ? (u.x = t.touches[0].clientX, u.y = t.touches[0].clientY) : (u.x = t.clientX - l.left - c, u.y = t.clientY - l.top), g.current = u;
-			let d = {
-				x: l.left + c,
-				y: l.top
-			};
-			s === "row" ? p.current = w() : p.current = T();
-			let f = e.bodyRef.current;
-			f && (m.current = f.getBoundingClientRect());
-			let y = e.cloneRef?.current;
-			y && (y.style.transform = `translate(${d.x}px, ${d.y}px)`), requestAnimationFrame(() => {
-				n({
-					type: "dragStart",
-					value: {
-						rect: {
-							draggedItemHeight: l.height,
-							draggedItemWidth: l.width
-						},
-						dragged: {
-							initial: u,
-							translate: d,
-							draggedID: a,
-							isDragging: !0,
-							sourceIndex: o
-						},
-						dragType: s
-					}
-				}), requestAnimationFrame(() => {
-					let t = e.cloneRef?.current, n = e.bodyRef.current;
-					if (t && n) {
-						if (s === "row") t.scrollLeft = n.scrollLeft;
-						else if (s === "column") {
-							let e = t.querySelector(".clone-body");
-							e && (e.scrollTop = n.scrollTop);
-						}
-					}
-				});
-			});
-		}
+			}
+		});
 	}, [
 		n,
 		e,
-		w,
-		T
-	]), A = i(() => {
+		M,
+		N
+	]), R = i((e) => {
+		e.target !== e.currentTarget && (k.current || L(e, e.clientX, e.clientY));
+	}, [L]), z = i(() => {
+		E.current &&= (clearTimeout(E.current), null), O.current = null, window.removeEventListener("touchmove", A.current), window.removeEventListener("touchend", j.current);
+	}, []), B = i((e) => {
+		if (e.target === e.currentTarget) return;
+		z(), k.current = !0;
+		let t = e.touches[0];
+		D.current = {
+			x: t.clientX,
+			y: t.clientY
+		}, O.current = e;
+		let n = (e) => {
+			let t = e.touches[0], n = t.clientX - D.current.x, r = t.clientY - D.current.y;
+			(Math.abs(n) > T || Math.abs(r) > T) && (z(), setTimeout(() => {
+				k.current = !1;
+			}, 400));
+		}, r = () => {
+			z(), setTimeout(() => {
+				k.current = !1;
+			}, 400);
+		};
+		A.current = n, j.current = r, window.addEventListener("touchmove", n, { passive: !0 }), window.addEventListener("touchend", r, !1), E.current = setTimeout(() => {
+			E.current = null, window.removeEventListener("touchmove", n), window.removeEventListener("touchend", r);
+			let e = O.current;
+			O.current = null, e && L(e, t.clientX, t.clientY);
+		}, w);
+	}, [L, z]), V = i(() => {
+		z(), setTimeout(() => {
+			k.current = !1;
+		}, 400);
 		let t = v.current, r = _.current, i = h.current;
 		p.current = null, m.current = null;
 		let a = e.cloneRef?.current;
-		a && (a.style.transform = "translate(0px, 0px)", a.scrollLeft = 0), O(), s && r !== null && t !== null && i && s({
+		a && (a.style.transform = "translate(0px, 0px)", a.scrollLeft = 0);
+		let o = e.tableRef?.current;
+		o && (o.style.touchAction = ""), I(), s && r !== null && t !== null && i && s({
 			sourceIndex: r,
 			targetIndex: t,
 			dragType: i
@@ -263,13 +299,15 @@ var g = d.div`
 		n,
 		l,
 		e.cloneRef,
-		O,
+		e.tableRef,
+		I,
+		z,
 		s
-	]), j = i(() => {
+	]), H = i(() => {
 		p.current = null, m.current = null;
 		let e = _.current, t = v.current, n = h.current;
-		e !== null && t !== null && D(e, t, n);
-	}, [D]), M = i((t) => {
+		e !== null && t !== null && F(e, t, n);
+	}, [F]), U = i((t) => {
 		t.stopPropagation();
 		let n = g.current, i, a;
 		t.type === "touchmove" ? (i = t.touches[0].clientX - n.x, a = t.touches[0].clientY - n.y) : (i = t.clientX - n.x, a = t.clientY - n.y);
@@ -288,18 +326,18 @@ var g = d.div`
 		f.current = !1, d.current = !1;
 		let s = e.bodyRef.current;
 		if (!s) return;
-		let { clientY: u, clientX: y } = t, S = m.current;
+		let u = t.type === "touchmove" ? t.touches[0].clientX : t.clientX, y = t.type === "touchmove" ? t.touches[0].clientY : t.clientY, S = m.current;
 		S || (S = s.getBoundingClientRect(), m.current = S);
-		let { top: C, bottom: E, left: O, right: k } = S, A = 0, j = h.current || r;
-		if (j === "row") {
+		let { top: C, bottom: w, left: T, right: E } = S, D = 0, O = h.current || r;
+		if (O === "row") {
 			let e = s.scrollTop, t = S.top, n = p.current;
-			n || (n = w(), p.current = n), n && n.length > 0 && (A = b(u - t + e, n)), u < C + 30 ? (c(-5, s, "vertical"), p.current = null) : u > E - 30 ? (c(5, s, "vertical"), p.current = null) : l();
+			n || (n = M(), p.current = n), n && n.length > 0 && (D = b(y - t + e, n)), y < C + 30 ? (c(-5, s, "vertical"), p.current = null) : y > w - 30 ? (c(5, s, "vertical"), p.current = null) : l();
 		} else {
 			let e = p.current;
-			e || (e = T(), p.current = e), e && e.length > 0 && (A = x(y, e)), y < O + 30 ? (c(-5, s, "horizontal"), p.current = null) : y > k - 30 ? (c(5, s, "horizontal"), p.current = null) : l();
+			e || (e = N(), p.current = e), e && e.length > 0 && (D = x(u, e)), u < T + 30 ? (c(-5, s, "horizontal"), p.current = null) : u > E - 30 ? (c(5, s, "horizontal"), p.current = null) : l();
 		}
-		A !== v.current && (v.current = A, requestAnimationFrame(() => {
-			D(_.current, A, j);
+		D !== v.current && (v.current = D, requestAnimationFrame(() => {
+			F(_.current, D, O);
 		}));
 	}, [
 		r,
@@ -307,15 +345,17 @@ var g = d.div`
 		f,
 		e.bodyRef,
 		e.cloneRef,
-		w,
-		T,
+		M,
+		N,
 		c,
 		l,
-		D
-	]), N = i(() => {
-		p.current = null, m.current = null;
+		F
+	]), W = i(() => {
+		z(), p.current = null, m.current = null;
 		let t = e.cloneRef?.current;
-		t && (t.style.transform = "translate(0px, 0px)", t.scrollLeft = 0), O(), n({
+		t && (t.style.transform = "translate(0px, 0px)", t.scrollLeft = 0);
+		let r = e.tableRef?.current;
+		r && (r.style.touchAction = ""), I(), n({
 			type: "dragEnd",
 			value: {
 				targetIndex: null,
@@ -326,27 +366,38 @@ var g = d.div`
 		n,
 		l,
 		e.cloneRef,
-		O
-	]), P = i((e) => {
-		e.key === "Escape" && N();
-	}, [N]);
+		e.tableRef,
+		I,
+		z
+	]), G = i((e) => {
+		e.key === "Escape" && W();
+	}, [W]), K = i((e) => {
+		e.preventDefault(), U(e);
+	}, [U]);
 	return o(() => {
 		if (t.isDragging) {
 			let t = e.bodyRef.current;
-			return window.addEventListener("mousemove", M, { passive: !0 }), window.addEventListener("touchmove", M, !1), window.addEventListener("touchend", A, !1), window.addEventListener("mouseup", A, !1), window.addEventListener("keydown", P), t?.addEventListener("scroll", j, { passive: !0 }), () => {
-				window.removeEventListener("mousemove", M), window.removeEventListener("touchmove", M, !1), window.removeEventListener("touchend", A, !1), window.removeEventListener("mouseup", A, !1), window.removeEventListener("keydown", P), t?.removeEventListener("scroll", j);
+			return window.addEventListener("mousemove", U, { passive: !0 }), window.addEventListener("touchmove", K, { passive: !1 }), window.addEventListener("touchend", V, !1), window.addEventListener("mouseup", V, !1), window.addEventListener("keydown", G), t?.addEventListener("scroll", H, { passive: !0 }), () => {
+				window.removeEventListener("mousemove", U), window.removeEventListener("touchmove", K), window.removeEventListener("touchend", V, !1), window.removeEventListener("mouseup", V, !1), window.removeEventListener("keydown", G), t?.removeEventListener("scroll", H);
+				let n = e.tableRef?.current;
+				n && (n.style.touchAction = "");
 			};
 		}
 	}, [
 		t.isDragging,
-		M,
-		A,
-		N,
-		P,
-		j,
-		e.bodyRef
-	]), { dragStart: k };
-}, T = {
+		U,
+		K,
+		V,
+		W,
+		G,
+		H,
+		e.bodyRef,
+		e.tableRef
+	]), {
+		dragStart: R,
+		touchStart: B
+	};
+}, D = {
 	columnDragRange: {
 		start: void 0,
 		end: void 0
@@ -357,7 +408,7 @@ var g = d.div`
 	},
 	defaultSizing: 50
 };
-function E(e, t) {
+function O(e, t) {
 	switch (t.type) {
 		case "setClone": return {
 			...e,
@@ -431,7 +482,7 @@ function E(e, t) {
 		};
 		case "setOptions": return {
 			...e,
-			options: t.value ?? T
+			options: t.value ?? D
 		};
 		case "dragStart": return {
 			...e,
@@ -468,7 +519,7 @@ function E(e, t) {
 		default: throw Error(`Unhandled action type: ${t.type}`);
 	}
 }
-var D = {
+var k = {
 	clone: null,
 	dragged: {
 		initial: {
@@ -501,24 +552,24 @@ var D = {
 		placeholderRef: null
 	},
 	bodyScrollBarWidth: 0,
-	options: T,
+	options: D,
 	widths: [],
 	columnIds: []
-}, O = {
+}, A = {
 	position: "relative",
 	display: "flex",
 	flexFlow: "column"
-}, k = {
+}, j = {
 	position: "fixed",
 	pointerEvents: "none",
 	zIndex: 3,
 	top: 0,
 	left: 0,
 	display: "none"
-}, A = n(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: a }, d) => {
+}, M = 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(E, D), x = c(() => ({
+	let [y, b] = l(O, k), x = c(() => ({
 		state: y,
 		dispatch: b
 	}), [y]);
@@ -552,7 +603,7 @@ var D = {
 			value: r
 		});
 	}, [r]);
-	let { dragStart: S } = w(y.refs, y.dragged, b, y.dragType, y.options, i), C = c(() => ({
+	let { dragStart: S, touchStart: C } = E(y.refs, y.dragged, b, y.dragType, y.options, i), w = c(() => ({
 		position: "fixed",
 		zIndex: "5",
 		pointerEvents: "none",
@@ -579,22 +630,31 @@ var D = {
 			children: [
 				/* @__PURE__ */ f("div", {
 					id: "portalroot",
-					style: C,
+					style: {
+						...w,
+						visibility: y.dragged.isDragging ? "visible" : "hidden"
+					},
 					ref: h,
-					children: y.clone
+					children: /* @__PURE__ */ f("div", {
+						style: {
+							flexShrink: 0,
+							order: -1
+						},
+						children: y.clone
+					})
 				}),
 				a && /* @__PURE__ */ f("div", {
 					ref: v,
-					style: k,
+					style: j,
 					children: a()
 				}),
 				/* @__PURE__ */ f("div", {
 					"data-contextid": "context",
 					ref: m,
 					onMouseDown: S,
-					onTouchStart: S,
+					onTouchStart: C,
 					style: {
-						...O,
+						...A,
 						...n
 					},
 					className: `table ${t ?? ""}`,
@@ -604,10 +664,10 @@ var D = {
 		})
 	});
 });
-A.displayName = "TableProvider";
+M.displayName = "TableProvider";
 //#endregion
 //#region src/Components/TableHeader.tsx
-var j = n(({ children: e, style: t, className: n }, r) => {
+var N = n(({ children: e, style: t, className: n }, r) => {
 	let i = u(null), a = r || i, { state: s, dispatch: l } = v();
 	o(() => {
 		l({
@@ -666,10 +726,10 @@ var j = n(({ children: e, style: t, className: n }, r) => {
 		})
 	});
 });
-j.displayName = "TableHeader";
+N.displayName = "TableHeader";
 //#endregion
 //#region src/Components/Draggable.tsx
-var M = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
+var P = 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, [
 		n,
 		s.dragged.draggedID,
@@ -692,19 +752,19 @@ var M = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
 		pointerEvents: d ? "none" : "auto",
 		display: "flex"
 	}), [p, d]), _ = (n) => {
-		p || requestAnimationFrame(() => {
+		n.pointerType !== "touch" && (p || requestAnimationFrame(() => {
 			l({
 				type: "setClone",
 				value: e.cloneElement(t)
 			});
-		});
+		}));
 	};
 	return /* @__PURE__ */ f("div", {
 		className: "draggable",
 		"data-id": n,
 		"data-index": r,
 		"data-type": i,
-		onMouseDown: _,
+		onPointerDown: _,
 		"data-disabled": p ? "true" : "false",
 		style: a,
 		children: /* @__PURE__ */ f("div", {
@@ -714,15 +774,15 @@ var M = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
 		})
 	});
 });
-M.displayName = "Draggable";
+P.displayName = "Draggable";
 //#endregion
 //#region src/Components/ColumnCell.tsx
-var N = r(({ children: e, width: t, style: n, className: r, ...i }) => {
+var F = 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(() => ({
 		width: `${o}px`,
 		flex: `${o} 0 auto`
 	}), [o]);
-	return /* @__PURE__ */ f(M, {
+	return /* @__PURE__ */ f(P, {
 		...i,
 		styles: s,
 		type: "column",
@@ -737,10 +797,10 @@ var N = r(({ children: e, width: t, style: n, className: r, ...i }) => {
 		})
 	});
 });
-N.displayName = "ColumnCell";
+F.displayName = "ColumnCell";
 //#endregion
 //#region src/Components/TableBody.tsx
-var P = n(({ children: t, style: n, className: r }, i) => {
+var I = n(({ children: t, style: n, className: r }, i) => {
 	let a = u(null);
 	s(i, () => a.current, []);
 	let { state: l, dispatch: d } = v(), h = c(() => {
@@ -799,7 +859,7 @@ var P = n(({ children: t, style: n, className: r }, i) => {
 		})
 	}), l.refs.cloneRef.current), /* @__PURE__ */ f("div", {
 		className: `body ${r ?? ""}`,
-		style: F,
+		style: L,
 		children: /* @__PURE__ */ f("div", {
 			className: "ibody",
 			style: _,
@@ -809,24 +869,24 @@ var P = n(({ children: t, style: n, className: r }, i) => {
 			children: t
 		})
 	})] });
-}), F = {
+}), L = {
 	display: "flex",
 	overflow: "hidden",
 	flex: 1
 };
-P.displayName = "TableBody";
+I.displayName = "TableBody";
 //#endregion
 //#region src/Components/BodyRow.tsx
-var I = {
+var R = {
 	display: "flex",
 	flex: "1 0 auto",
 	minHeight: "24px"
-}, L = r(({ children: e, style: t, className: n, ...r }) => {
+}, z = r(({ children: e, style: t, className: n, ...r }) => {
 	let i = c(() => t ? {
-		...I,
+		...R,
 		...t
-	} : I, [t]), a = h("tr", n);
-	return /* @__PURE__ */ f(M, {
+	} : R, [t]), a = h("tr", n);
+	return /* @__PURE__ */ f(P, {
 		...r,
 		type: "row",
 		children: /* @__PURE__ */ f("div", {
@@ -836,10 +896,10 @@ var I = {
 		})
 	});
 });
-L.displayName = "BodyRow";
+z.displayName = "BodyRow";
 //#endregion
 //#region src/Components/RowCell.tsx
-var R = r(({ children: e, style: t, className: n, isClone: r, ...i }) => {
+var B = 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, [
 		o.widths,
 		a,
@@ -866,10 +926,10 @@ var R = r(({ children: e, style: t, className: n, isClone: r, ...i }) => {
 		children: e
 	});
 });
-R.displayName = "RowCell";
+B.displayName = "RowCell";
 //#endregion
 //#region src/Components/DragHandle.tsx
-var z = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ f("div", {
+var V = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ f("div", {
 	"data-drag-handle": "true",
 	className: t,
 	style: {
@@ -880,6 +940,6 @@ var z = r(({ children: e, className: t, style: n }) => /* @__PURE__ */ f("div",
 	},
 	children: e
 }));
-z.displayName = "DragHandle";
+V.displayName = "DragHandle";
 //#endregion
-export { L as BodyRow, N as ColumnCell, z as DragHandle, R as RowCell, P as TableBody, A as TableContainer, j as TableHeader, v as useTable };
+export { z as BodyRow, F as ColumnCell, V as DragHandle, B as RowCell, I as TableBody, M as TableContainer, N as TableHeader, v as useTable };

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "flexitablesort",
-  "version": "1.0.6",
-  "type": "module",
-  "description": "Sortable table with draggable rows and columns",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "sideEffects": false,
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc -b && vite build",
-    "dev": "vite --config vite.config.docs.ts",
-    "build:docs": "vite build --config vite.config.docs.ts",
-    "lint": "eslint ."
-  },
-  "keywords": [
-    "react",
-    "table",
-    "sortable",
-    "draggable",
-    "draggable table",
-    "draggable rows",
-    "draggable columns",
-    "react table",
-    "data grid",
-    "row reordering",
-    "column reordering"
-  ],
-  "author": "Sami Odeh",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/samiodeh1337/sortable-table.git"
-  },
-  "homepage": "https://github.com/samiodeh1337/sortable-table.git#readme",
-  "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
-  },
-  "dependencies": {
-    "classnames": "^2.5.1",
-    "styled-components": "^6.3.11"
-  },
-  "devDependencies": {
-    "@tanstack/react-virtual": "^3.13.22",
-    "highlight.js": "^11.11.1",
-    "@eslint/js": "^9.39.4",
-    "@types/node": "^24.12.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.0",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.4.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.56.1",
-    "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.5.4"
-  }
-}
+{
+  "name": "flexitablesort",
+  "version": "1.1.0",
+  "type": "module",
+  "description": "Sortable table with draggable rows and columns",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite --config vite.config.docs.ts",
+    "build:docs": "vite build --config vite.config.docs.ts",
+    "lint": "eslint ."
+  },
+  "keywords": [
+    "react",
+    "table",
+    "sortable",
+    "draggable",
+    "draggable table",
+    "draggable rows",
+    "draggable columns",
+    "react table",
+    "data grid",
+    "row reordering",
+    "column reordering"
+  ],
+  "author": "Sami Odeh",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/samiodeh1337/sortable-table.git"
+  },
+  "homepage": "https://github.com/samiodeh1337/sortable-table.git#readme",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "styled-components": "^6.3.11"
+  },
+  "devDependencies": {
+    "@tanstack/react-virtual": "^3.13.22",
+    "highlight.js": "^11.11.1",
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}