flexitablesort 1.1.1 → 1.1.2

package/dist/hooks/useDragContextEvents.d.ts

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

package/dist/index.es.js

@@ -99,7 +99,7 @@ var g = d.div`
 	}), C = u(null), D = u({
 		x: 0,
 		y: 0
-	}), O = u(null), k = u(!1), A = u(null), j = u(null), M = u(null), N = i(() => {
+	}), 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 = [];
@@ -116,7 +116,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]), P = 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) => {
@@ -133,7 +133,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]), F = 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");
@@ -149,7 +149,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]), I = i((t, n, r) => {
+	}, [e.placeholderRef, e.tableRef]), F = i((t, n, r) => {
 		if (t === null || n === null) return;
 		let i = v.current, a = null;
 		if (r === "row") {
@@ -182,12 +182,13 @@ var g = d.div`
 				}
 			}
 		}
-		F(a, t, n, r);
+		P(a, t, n, r);
 	}, [
 		e.bodyRef,
 		e.headerRef,
-		F
-	]), L = i(() => {
+		e.placeholderRef,
+		P
+	]), I = i(() => {
 		let t = e.placeholderRef?.current;
 		t && (t.style.display = "none");
 		let n = e.bodyRef.current;
@@ -210,7 +211,7 @@ var g = d.div`
 				n && (n.style.transform = "", n.style.transition = "");
 			}
 		}
-	}, [e.bodyRef, e.headerRef]), R = i((t, r, i) => {
+	}, [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;
@@ -245,7 +246,7 @@ var g = d.div`
 			x: x.left + b,
 			y: x.top
 		};
-		l === "row" ? f.current = N() : f.current = P();
+		l === "row" ? f.current = M() : f.current = N();
 		let w = e.bodyRef.current;
 		w && (p.current = w.getBoundingClientRect());
 		let T = e.cloneRef?.current;
@@ -282,44 +283,58 @@ var g = d.div`
 			D(), requestAnimationFrame(D);
 		});
 	}, [
-		e.bodyRef,
-		e.cloneRef,
-		e.tableRef,
-		d,
 		n,
-		N,
-		P
-	]), z = i((e) => {
-		e.target !== e.currentTarget && (k.current || R(e, e.clientX, e.clientY));
-	}, [R]), B = i(() => {
+		e,
+		M,
+		N
+	]), R = i((e) => {
+		e.target !== e.currentTarget && (k.current || L(e, e.clientX, e.clientY));
+	}, [L]), z = i(() => {
 		C.current &&= (clearTimeout(C.current), null), O.current = null, window.removeEventListener("touchmove", A.current), window.removeEventListener("touchend", j.current);
-	}, []), V = i((e) => {
-		if (e.target === e.currentTarget) return;
-		B(), k.current = !0;
-		let t = e.touches[0];
+	}, []), B = i((t) => {
+		if (t.target === t.currentTarget) return;
+		let n = t.target, r = !1;
+		for (; n && !(n.dataset?.contextid || n.dataset?.disabled === "true");) {
+			if (n.dataset?.id) {
+				r = !0;
+				break;
+			}
+			n = n.parentNode;
+		}
+		if (!r) return;
+		z(), k.current = !0;
+		let i = t.touches[0];
 		D.current = {
-			x: t.clientX,
-			y: t.clientY
-		}, O.current = e;
-		let n = (e) => {
+			x: i.clientX,
+			y: i.clientY
+		}, O.current = t;
+		let a = !1, o = (e) => {
 			let t = e.touches[0], n = t.clientX - D.current.x, r = t.clientY - D.current.y;
-			(Math.abs(n) > E || Math.abs(r) > E) && (B(), setTimeout(() => {
+			!a && (Math.abs(n) > E || Math.abs(r) > E) ? (z(), setTimeout(() => {
 				k.current = !1;
-			}, 400));
-		}, r = () => {
-			B(), setTimeout(() => {
+			}, 400)) : a && e.preventDefault();
+		}, s = () => {
+			z(), setTimeout(() => {
 				k.current = !1;
 			}, 400);
 		};
-		A.current = n, j.current = r, window.addEventListener("touchmove", n, { passive: !0 }), window.addEventListener("touchend", r, !1), C.current = setTimeout(() => {
-			C.current = null, window.removeEventListener("touchmove", n), window.removeEventListener("touchend", r);
-			let e = O.current;
-			O.current = null, e && R(e, t.clientX, t.clientY);
+		A.current = o, j.current = s, window.addEventListener("touchmove", o, { passive: !1 }), window.addEventListener("touchend", s, !1), C.current = setTimeout(() => {
+			C.current = null, a = !0;
+			let t = e.tableRef?.current;
+			t && (t.style.touchAction = "none");
+			let n = O.current;
+			O.current = null, n && L(n, i.clientX, i.clientY), window.removeEventListener("touchend", s);
+			let r = () => {
+				window.removeEventListener("touchmove", o), window.removeEventListener("touchend", r), V();
+			};
+			window.addEventListener("touchend", r, !1);
 		}, T);
-	}, [R, B]), H = i((e) => {
-		M.current = e.pointerId ?? null;
-	}, []), U = i(() => {
-		B(), setTimeout(() => {
+	}, [
+		L,
+		z,
+		e.tableRef
+	]), V = i(() => {
+		z(), setTimeout(() => {
 			k.current = !1;
 		}, 400);
 		let t = _.current, r = g.current, i = m.current;
@@ -327,7 +342,7 @@ var g = d.div`
 		let a = e.cloneRef?.current;
 		a && (a.style.transform = "translate(0px, 0px)", a.scrollLeft = 0);
 		let o = e.tableRef?.current;
-		o && (o.style.touchAction = ""), L(), s && r !== null && t !== null && i && s({
+		o && (o.style.touchAction = ""), I(), s && r !== null && t !== null && i && s({
 			sourceIndex: r,
 			targetIndex: t,
 			dragType: i
@@ -343,13 +358,13 @@ var g = d.div`
 		l,
 		e.cloneRef,
 		e.tableRef,
-		L,
-		B,
+		I,
+		z,
 		s
-	]), W = i(() => {
+	]), H = i(() => {
 		f.current = null, p.current = null;
 		let t = g.current, n = _.current, r = m.current;
-		t !== null && n !== null && I(t, n, r);
+		t !== null && n !== null && F(t, n, r);
 		let i = e.cloneRef?.current, a = e.bodyRef?.current;
 		if (i && a) {
 			if (r === "row") i.scrollLeft = a.scrollLeft;
@@ -365,20 +380,20 @@ var g = d.div`
 			let i = 0;
 			if (r === "row") {
 				let t = f.current;
-				t || (t = N(), f.current = t), t && t.length > 0 && (i = x(e.y - n.top + o.scrollTop, t));
+				t || (t = M(), f.current = t), t && t.length > 0 && (i = x(e.y - n.top + o.scrollTop, t));
 			} else {
 				let t = f.current;
-				t || (t = P(), f.current = t), t && t.length > 0 && (i = S(e.x, t));
+				t || (t = N(), f.current = t), t && t.length > 0 && (i = S(e.x, t));
 			}
-			i !== _.current && (_.current = i, I(t, i, r));
+			i !== _.current && (_.current = i, F(t, i, r));
 		}
 	}, [
-		I,
+		F,
 		e.cloneRef,
 		e.bodyRef,
-		N,
-		P
-	]), G = i((t) => {
+		M,
+		N
+	]), U = i((t) => {
 		let n = t.clientX ?? 0, i = t.clientY ?? 0, a = h.current, o = n - a.x, s = i - a.y;
 		y.current = {
 			x: n,
@@ -406,30 +421,29 @@ var g = d.div`
 		let { top: C, bottom: w, left: T, right: E } = b, D = 0, O = m.current || r;
 		if (O === "row") {
 			let e = v.scrollTop, t = b.top, n = f.current;
-			n || (n = N(), f.current = n), n && n.length > 0 && (D = x(i - t + e, n)), i < C + 30 ? (c(-5, v, "vertical"), f.current = null) : i > w - 30 ? (c(5, v, "vertical"), f.current = null) : l();
+			n || (n = M(), f.current = n), n && n.length > 0 && (D = x(i - t + e, n)), i < C + 30 ? (c(-5, v, "vertical"), f.current = null) : i > w - 30 ? (c(5, v, "vertical"), f.current = null) : l();
 		} else {
 			let e = f.current;
-			e || (e = P(), f.current = e), e && e.length > 0 && (D = S(n, e)), n < T + 30 ? (c(-5, v, "horizontal"), f.current = null) : n > E - 30 ? (c(5, v, "horizontal"), f.current = null) : l();
+			e || (e = N(), f.current = e), e && e.length > 0 && (D = S(n, e)), n < T + 30 ? (c(-5, v, "horizontal"), f.current = null) : n > E - 30 ? (c(5, v, "horizontal"), f.current = null) : l();
 		}
 		D !== _.current && (_.current = D, requestAnimationFrame(() => {
-			I(g.current, D, O);
+			F(g.current, D, O);
 		}));
 	}, [
-		d,
-		e.cloneRef,
-		e.bodyRef,
 		r,
+		e.bodyRef,
+		e.cloneRef,
+		M,
 		N,
 		c,
 		l,
-		P,
-		I
-	]), K = i(() => {
-		B(), f.current = null, p.current = null;
+		F
+	]), W = i(() => {
+		z(), f.current = null, p.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 = ""), L(), n({
+		r && (r.style.touchAction = ""), I(), n({
 			type: "dragEnd",
 			value: {
 				targetIndex: null,
@@ -441,46 +455,32 @@ var g = d.div`
 		l,
 		e.cloneRef,
 		e.tableRef,
-		L,
-		B
-	]), q = i((e) => {
-		e.key === "Escape" && K();
-	}, [K]);
+		I,
+		z
+	]), G = i((e) => {
+		e.key === "Escape" && W();
+	}, [W]);
 	return o(() => {
 		if (t.isDragging) {
-			let t = e.bodyRef.current, n = e.tableRef?.current;
-			if (n && M.current !== null) try {
-				n.setPointerCapture(M.current);
-			} catch {}
-			let r = (e) => {
-				e.pointerType === "touch" && e.preventDefault(), G(e);
-			}, i = () => U(), a = () => U();
-			return n && (n.addEventListener("pointermove", r, { passive: !1 }), n.addEventListener("pointerup", i), n.addEventListener("pointercancel", a)), window.addEventListener("mouseup", U, !1), window.addEventListener("keydown", q), t?.addEventListener("scroll", W, { passive: !0 }), () => {
-				if (n) {
-					if (n.removeEventListener("pointermove", r), n.removeEventListener("pointerup", i), n.removeEventListener("pointercancel", a), M.current !== null) {
-						try {
-							n.releasePointerCapture(M.current);
-						} catch {}
-						M.current = null;
-					}
-					n.style.touchAction = "";
-				}
-				window.removeEventListener("mouseup", U, !1), window.removeEventListener("keydown", q), t?.removeEventListener("scroll", W);
+			let t = e.bodyRef.current, n = e.tableRef?.current, r = (e) => {
+				U(e);
+			};
+			return window.addEventListener("pointermove", r), window.addEventListener("pointerup", V), window.addEventListener("pointercancel", V), window.addEventListener("keydown", G), t?.addEventListener("scroll", H, { passive: !0 }), () => {
+				window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", V), window.removeEventListener("pointercancel", V), window.removeEventListener("keydown", G), t?.removeEventListener("scroll", H), n && (n.style.touchAction = "");
 			};
 		}
 	}, [
 		t.isDragging,
-		G,
 		U,
-		K,
-		q,
+		V,
 		W,
+		G,
+		H,
 		e.bodyRef,
 		e.tableRef
 	]), {
-		dragStart: z,
-		touchStart: V,
-		onPointerDown: H
+		dragStart: R,
+		touchStart: B
 	};
 }, O = {
 	columnDragRange: {
@@ -688,7 +688,7 @@ var A = {
 			value: r
 		});
 	}, [r]);
-	let { dragStart: S, touchStart: C, onPointerDown: w } = D(y.refs, y.dragged, b, y.dragType, y.options, i), T = c(() => ({
+	let { dragStart: S, touchStart: C } = D(y.refs, y.dragged, b, y.dragType, y.options, i), w = c(() => ({
 		position: "fixed",
 		zIndex: "5",
 		pointerEvents: "none",
@@ -716,7 +716,7 @@ var A = {
 				/* @__PURE__ */ f("div", {
 					id: "portalroot",
 					style: {
-						...T,
+						...w,
 						visibility: y.dragged.isDragging ? "visible" : "hidden"
 					},
 					ref: h,
@@ -738,7 +738,6 @@ var A = {
 					ref: m,
 					onMouseDown: S,
 					onTouchStart: C,
-					onPointerDown: w,
 					style: {
 						...j,
 						...n

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexitablesort",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "description": "Sortable table with draggable rows and columns",
   "main": "dist/index.cjs.js",