flexitablesort 1.1.6 → 1.1.8

package/dist/index.cjs.js

@@ -1,15 +1,22 @@
 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`
   height: 100%;
 
+  /* Structural elements: full reset */
   &, & .table, & .header, & .thead, & .body, & .ibody,
-  & .draggable, & .tr, & .th, & .td {
+  & .draggable, & .tr {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
 
+  /* User-facing cells: only box-sizing reset — no padding/margin override
+     so className and styled-components can customize freely */
+  & .th, & .td {
+    box-sizing: border-box;
+  }
+
   &.is-dragging, &.is-dragging * {
     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=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.cloneRef?.current;A&&(A.style.transform=`translate(${D.x}px, ${D.y}px)`),n({type:`dragStart`,value:{rect:{draggedItemHeight:w.height,draggedItemWidth:w.width},dragged:{initial:E,translate:D,draggedID:c,isDragging:!0,sourceIndex:_},dragType:b}});let j=()=>{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)}};j(),requestAnimationFrame(()=>{j(),requestAnimationFrame(j)})},[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),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,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),O(),n({type:`dragEnd`,value:{targetIndex:null,sourceIndex:null}}),s(),p.current=null,h.current=null,g.current=null},[n,s,e.cloneRef,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-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: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;
+`,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;

package/dist/index.es.js

@@ -7,13 +7,20 @@ import h from "classnames";
 var g = d.div`
   height: 100%;
 
+  /* Structural elements: full reset */
   &, & .table, & .header, & .thead, & .body, & .ibody,
-  & .draggable, & .tr, & .th, & .td {
+  & .draggable, & .tr {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
 
+  /* User-facing cells: only box-sizing reset — no padding/margin override
+     so className and styled-components can customize freely */
+  & .th, & .td {
+    box-sizing: border-box;
+  }
+
   &.is-dragging, &.is-dragging * {
     user-select: none !important;
     -webkit-user-select: none !important;
@@ -306,8 +313,18 @@ var w = (e, t) => {
 			let e = O.getBoundingClientRect();
 			m.current = e, d(e);
 		}
-		let k = e.cloneRef?.current;
-		k && (k.style.transform = `translate(${D.x}px, ${D.y}px)`), n({
+		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)`);
+		let M = e.tableRef?.current;
+		M && n({
+			type: "setTableDimensions",
+			value: {
+				height: M.offsetHeight,
+				width: M.offsetWidth
+			}
+		}), n({
 			type: "dragStart",
 			value: {
 				rect: {
@@ -324,7 +341,7 @@ var w = (e, t) => {
 				dragType: u
 			}
 		});
-		let A = () => {
+		let N = () => {
 			let t = e.cloneRef?.current, n = e.bodyRef?.current;
 			if (!(!t || !n)) if (u === "row") t.scrollLeft = n.scrollLeft;
 			else {
@@ -332,8 +349,8 @@ var w = (e, t) => {
 				e && (e.scrollTop = n.scrollTop);
 			}
 		};
-		A(), requestAnimationFrame(() => {
-			A(), requestAnimationFrame(A);
+		N(), requestAnimationFrame(() => {
+			N(), requestAnimationFrame(N);
 		});
 	}, [
 		n,
@@ -349,7 +366,9 @@ var w = (e, t) => {
 		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), A(), s && r !== null && t !== null && (i === "row" || i === "column") && s({
+		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
@@ -367,6 +386,7 @@ var w = (e, t) => {
 		l,
 		e.bodyRef,
 		e.cloneRef,
+		e.tableRef,
 		A,
 		s
 	]), P = u(() => {}), { touchStart: F, cancelLongPress: I, isTouchActiveRef: L } = C(e, M, N, (e, t) => P.current(e, t)), R = i((e) => {
@@ -413,7 +433,9 @@ var w = (e, t) => {
 	let B = i(() => {
 		I(), p.current = null, m.current = null;
 		let t = e.cloneRef?.current;
-		t && (t.style.transform = "translate(0px, 0px)", t.scrollLeft = 0), A(), n({
+		t && (t.style.transform = "translate(0px, 0px)", t.scrollLeft = 0);
+		let r = e.tableRef?.current;
+		r && (r.style.touchAction = ""), A(), n({
 			type: "dragEnd",
 			value: {
 				targetIndex: null,
@@ -424,6 +446,7 @@ var w = (e, t) => {
 		n,
 		l,
 		e.cloneRef,
+		e.tableRef,
 		A,
 		I
 	]), V = i((e) => {
@@ -667,8 +690,8 @@ var j = {
 		left: 0,
 		display: "flex",
 		flexDirection: "column",
-		height: y.dragType === "row" ? y.rect.draggedItemHeight : `${y.tableDimensions.height - 20}px`,
-		width: y.dragType === "column" ? `${y.rect.draggedItemWidth}px` : `${y.tableDimensions.width - 20}px`,
+		height: y.dragType === "row" ? y.rect.draggedItemHeight : `${y.tableDimensions.height}px`,
+		width: y.dragType === "column" ? `${y.rect.draggedItemWidth}px` : `${y.tableDimensions.width}px`,
 		overflow: "hidden",
 		boxShadow: y.dragged.isDragging ? "0 0 10px 0 rgba(0, 0, 0, 0.1)" : "none"
 	}), [

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "flexitablesort",
-  "version": "1.1.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.8",
+  "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://samiodeh1337.github.io/sortable-table/",
+  "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"
+  }
+}