flexi-datagrid 1.2.8 → 1.2.9

package/dist/index.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.ReactDOM,e.JSX))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var f=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...f(e.children)):t.push(e)}),t},p=(...e)=>e.filter(Boolean).join(` `),m=e=>{if(e===!0)return`left`;if(e===`left`||e===`right`)return e},h=(e,t,n)=>{let r=e=>{let n=t[e];return n===`left`?0:n===`right`?2:1},i=e=>e.map((e,t)=>({col:e,idx:t})).sort((e,t)=>{let i=r(e.col.key)-r(t.col.key);return i===0?(n[e.col.key]??e.idx)-(n[t.col.key]??t.idx):i}).map(({col:e})=>e.children&&e.children.length>0?{...e,children:i(e.children)}:e);return i(e)},ee=48,te=150,ne=60;function g({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:g,containerStyle:re,tableStyle:ie,bordered:ae=!1,pinnedBottomRowData:_=[],pinnedRowClassName:oe,rowHeight:v=ee,overscan:y=8,onColumnResize:se,onColumnReorder:ce,rowClassRules:le,onRowClick:ue,rowSpanColumns:b,controlPanel:de=!1,defaultDisplayPinnedIcon:fe=!0,defaultHiddenColumns:pe=[],onColumnVisibilityChange:x,pagination:S=!1,defaultPageSize:me=10,pageSizeOptions:he=[10,25,50,100],onPageChange:C}){let[w,ge]=(0,n.useState)(null),[T,_e]=(0,n.useState)({}),[E,ve]=(0,n.useState)(``),[D,ye]=(0,n.useState)(null),[be,xe]=(0,n.useState)(null),O=(0,n.useRef)(new Map),[k,Se]=(0,n.useState)(u),[Ce,we]=(0,n.useState)({}),[Te,Ee]=(0,n.useState)(!1),[A,De]=(0,n.useState)({key:null,direction:null}),[Oe,ke]=(0,n.useState)({}),[Ae,je]=(0,n.useState)({}),[Me,Ne]=(0,n.useState)(fe),[j,Pe]=(0,n.useState)(pe),[M,Fe]=(0,n.useState)(!1),Ie=(0,n.useRef)(null),N=(0,n.useRef)(null),[P,F]=(0,n.useState)(1),[I,Le]=(0,n.useState)(me),Re=(0,n.useRef)(null),L=(0,n.useRef)(!1),R=(0,n.useRef)(null),z=(0,n.useMemo)(()=>f(e),[e]),[B,ze]=(0,n.useState)(()=>{let e={};return z.forEach(t=>{let n=m(t.pinned);n&&(e[t.key]=n)}),e}),V=(0,n.useMemo)(()=>h(e,B,Ae),[e,B,Ae]),H=(0,n.useMemo)(()=>{let e=f(V),t=l?k:[];return e.filter(e=>!t.includes(e.key)&&!j.includes(e.key))},[V,k,l,j]),U=(0,n.useRef)(null),Be=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=w?O.current.get(w):null;Be.current&&!Be.current.contains(t)&&!(n&&n.contains(t))&&(ge(null),ve(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[w]),(0,n.useEffect)(()=>{if(!M)return;function e(e){let t=e.target;Ie.current&&!Ie.current.contains(t)&&!(N.current&&N.current.contains(t))&&Fe(!1)}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[M]),(0,n.useEffect)(()=>{if(!M)return;let e=()=>{let e=N.current,t=U.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();xe({top:n.bottom-r.top+4,right:r.right-n.right})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[M]),(0,n.useEffect)(()=>{if(!w)return;let e=()=>{let e=O.current.get(w),t=U.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();ye({top:n.bottom-r.top+4,left:n.left-r.left})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[w]);let Ve=e=>typeof o==`function`?o(e):String(e[o]),He=(e,t)=>{if(!le)return;let n;for(let r in le)le[r](e,t)&&(n=n?`${n} ${r}`:r);return n},Ue=e=>{ze(t=>{let n=t[e],r=n?n===`left`?`right`:void 0:`left`,i={...t};return r?i[e]=r:delete i[e],d&&d(e,!!r,r),i})},We=e=>{Pe(t=>{let n=t.includes(e)?t.filter(t=>t!==e):[...t,e];return x&&x(n),n})},Ge=()=>{Ne(fe),Pe(pe),x&&x(pe)},Ke=e=>{let t=`asc`;A.key===e&&(t=A.direction===`asc`?`desc`:A.direction===`desc`?null:`asc`),De({key:t?e:null,direction:t})},qe=(e,t,n)=>{if(L.current){e.preventDefault();return}Re.current=t,n&&e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},Je=(e,t,n)=>{let r=e.map(e=>e.key);if(r.includes(t)&&r.includes(n))return e;for(let r of e)if(r.children&&r.children.length>0){let e=Je(r.children,t,n);if(e)return e}return null},Ye=(t,n)=>{t.preventDefault(),t.stopPropagation();let r=Re.current;if(Re.current=null,!r||r===n)return;let i=Je(V,r,n);if(!i)return;let a=i.map(e=>e.key),o=a.indexOf(r),s=a.indexOf(n);a.splice(s,0,a.splice(o,1)[0]);let c={...Ae};a.forEach((e,t)=>{c[e]=t}),je(c),ce&&ce(f(h(e,B,c)).map(e=>e.key))},Xe=(e,t)=>{e.preventDefault(),e.stopPropagation(),L.current=!0,R.current={key:t.key,startX:e.clientX,startWidth:W(t)};let n=t.minWidth??ne,r=t.maxWidth,i=e=>{let t=R.current;if(!t)return;let i=t.startWidth+(e.clientX-t.startX);i=Math.max(n,i),r&&(i=Math.min(r,i)),ke(e=>e[t.key]===i?e:{...e,[t.key]:i})},a=()=>{let e=R.current;R.current=null,window.removeEventListener(`mousemove`,i),window.removeEventListener(`mouseup`,a),requestAnimationFrame(()=>{L.current=!1}),e&&se&&ke(t=>(t[e.key]!==void 0&&se(e.key,t[e.key]),t))};window.addEventListener(`mousemove`,i),window.addEventListener(`mouseup`,a)},Ze=e=>{e.preventDefault(),Ee(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!k.includes(t)){let e=[...k,t];Se(e),g&&g(e)}},Qe=e=>{let t=k.filter(t=>t!==e);Se(t),we({}),g&&g(t)},$e=(0,n.useMemo)(()=>{let e=t=>{let n=0;return t.forEach(t=>{n=t.children&&t.children.length>0?Math.max(n,1+e(t.children)):Math.max(n,1)}),n},t=e(V),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?l&&k.includes(e.key)||j.includes(e.key)?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?k:[],a=(e,o)=>{e.forEach(e=>{if(i.includes(e.key))return;let s=r(e);s!==0&&(e.children&&e.children.length>0?(n[o].push({col:e,rowSpan:1,colSpan:s}),a(e.children,o+1)):n[o].push({col:e,rowSpan:t-o,colSpan:1}))})};return a(V,0),n.filter(e=>e.length>0)},[V,k,l,j]),W=e=>{if(Oe[e.key]!==void 0)return Oe[e.key];let t=e.style?.width||e.headerStyle?.width||`${te}px`;return typeof t==`number`?t:parseInt(String(t),10)||te},et=(0,n.useMemo)(()=>{let e={},t=0;l&&k.length>0&&(t+=48),H.forEach(n=>{B[n.key]===`left`&&(e[n.key]={side:`left`,offset:t},t+=W(n))});let n=s?100:0;for(let t=H.length-1;t>=0;t--){let r=H[t];B[r.key]===`right`&&(e[r.key]={side:`right`,offset:n},n+=W(r))}return e},[H,B,k,l,s,Oe]),tt=(e,t)=>{_e(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return a[e].length===0&&delete a[e],a})},nt=e=>{_e(t=>{let n={...t};return delete n[e],n})},G=(0,n.useMemo)(()=>{let e=new Map;return z.forEach(t=>e.set(t.key,t)),e},[z]),rt=(0,n.useMemo)(()=>{if(!w)return[];let e=G.get(w),t=a.map(t=>e?.getValue?e.getValue(t):t[w]);return Array.from(new Set(t)).filter(e=>e!=null)},[a,w,G]),it=(0,n.useMemo)(()=>{if(!E.trim())return rt;let e=E.toLowerCase();return rt.filter(t=>String(t).toLowerCase().includes(e))},[rt,E]),K=(0,n.useMemo)(()=>{let e=Object.entries(T).filter(([,e])=>e&&e.length>0),t=e.length===0?a:a.filter(t=>e.every(([e,n])=>{let r=G.get(e),i=r?.getValue?r.getValue(t):t[e];return n.includes(i)}));if(A.key&&A.direction){let{key:e,direction:n}=A,r=G.get(e);t=[...t].sort((t,i)=>{let a=r?.getValue?r.getValue(t):t[e],o=r?.getValue?r.getValue(i):i[e];if(a===o)return 0;if(a==null)return 1;if(o==null)return-1;let s=0;return s=typeof a==`number`&&typeof o==`number`?a-o:String(a).localeCompare(String(o),void 0,{numeric:!0,sensitivity:`base`}),n===`asc`?s:-s})}return t},[a,T,A,G]),q=K.length,J=S?Math.max(1,Math.ceil(q/I)):1;(0,n.useEffect)(()=>{F(1)},[T,A,I,S]),(0,n.useEffect)(()=>{P>J&&F(J)},[P,J]);let at=(0,n.useMemo)(()=>{if(!S)return K;let e=(P-1)*I;return K.slice(e,e+I)},[K,S,P,I]),Y=e=>{let t=Math.min(Math.max(1,e),J);F(t),C&&C(t,I)},ot=e=>{Le(e),F(1),C&&C(1,e)},st=(0,n.useMemo)(()=>{if(!l||k.length===0)return at;let e=(t,n,r=``)=>{if(n>=k.length)return t;let i=k[n],a=G.get(i),o={};return t.forEach(e=>{let t=a?.getValue?a.getValue(e):e[i],n=String(t??`N/A`);o[n]||(o[n]=[]),o[n].push(e)}),Object.entries(o).sort(([e],[t])=>e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})).map(([t,a])=>{let o=r?`${r}➔${t}`:t;return{isGroupRow:!0,groupKey:i,groupValue:t,path:o,depth:n,children:e(a,n+1,o),totalItemsCount:a.length}})};return e(at,0)},[at,k,l,G]),ct=e=>{we(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},X=(0,n.useMemo)(()=>{if(!l||k.length===0)return st;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),Ce[n.path]!==!1&&t(n.children)):e.push(n)})};return t(st),e},[st,Ce,k,l]),lt=(0,n.useRef)(null),[ut,dt]=(0,n.useState)(0),[ft,pt]=(0,n.useState)(0);(0,n.useEffect)(()=>{let e=lt.current;if(!e)return;let t=()=>dt(e.scrollTop);pt(e.clientHeight),dt(e.scrollTop),e.addEventListener(`scroll`,t,{passive:!0});let n;return typeof ResizeObserver<`u`&&(n=new ResizeObserver(()=>pt(e.clientHeight)),n.observe(e)),()=>{e.removeEventListener(`scroll`,t),n?.disconnect()}},[]);let Z=X.length,{startIndex:Q,endIndex:mt,topSpacerHeight:ht,bottomSpacerHeight:gt}=(0,n.useMemo)(()=>{if(ft===0)return{startIndex:0,endIndex:Z,topSpacerHeight:0,bottomSpacerHeight:0};let e=Math.max(0,Z-1),t=Math.min(e,Math.floor(ut/v)),n=Math.ceil(ft/v)+1,r=Math.max(0,t-y),i=Math.min(Z,t+n+y);return{startIndex:r,endIndex:i,topSpacerHeight:r*v,bottomSpacerHeight:(Z-i)*v}},[ut,ft,Z,v,y]),_t=(0,n.useMemo)(()=>X.slice(Q,mt),[X,Q,mt]),vt=(0,n.useMemo)(()=>{let e=new Map;if(!b||b.length===0)return e;let t=(e,t)=>{let n=G.get(t);return n?.getValue?n.getValue(e):e[t]},n=_t,r=n.map(()=>b.map(()=>!0)),i=null;for(let e=0;e<n.length;e++){let a=n[e];if(a.isGroupRow){i=null;continue}if(i!==null){let o=n[i],s=!0;for(let n=0;n<b.length;n++){let i=b[n];s&&t(a,i)===t(o,i)?r[e][n]=!1:(s=!1,r[e][n]=!0)}}i=e}return b.forEach((t,i)=>{let a=0;for(;a<n.length;){if(n[a].isGroupRow||!r[a][i]){a++;continue}let o=a+1;for(;o<n.length&&!n[o].isGroupRow&&!r[o][i];)o++;if(o-a>1){let n=e.get(Q+a)||{};n[t]=o-a,e.set(Q+a,n);for(let n=a+1;n<o;n++){let r=e.get(Q+n)||{};r[t]=`skip`,e.set(Q+n,r)}}a=o}}),e},[_t,b,G,Q]),yt=(e,t=!1,n)=>{let r=et[e];if(!r)return n||{};let i=r.side===`right`;return{position:`sticky`,[i?`right`:`left`]:`${r.offset}px`,...t?{top:0}:{},zIndex:t?30:20,background:`#f8fafc`,boxShadow:i?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}},bt=(0,n.useMemo)(()=>_.map((e,t)=>(_.length-1-t)*48),[_]),$=H.length+ +!!s+(l&&k.length>0?1:0),xt=(0,i.jsx)(`button`,{type:`button`,ref:N,onClick:e=>{e.stopPropagation(),Fe(e=>!e)},className:p(`flexi-icon-btn`,M&&`flexi-settings-btn--active`),title:`Grid display settings`,children:(0,i.jsx)(t.Settings,{className:`flexi-icon-sm`})}),St=M&&be&&U.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:Ie,className:`flexi-settings-menu`,style:{top:be.top,right:be.right,zIndex:9999},children:[(0,i.jsxs)(`div`,{className:`flexi-settings-section`,children:[(0,i.jsx)(`span`,{className:`flexi-settings-heading`,children:`Action Icons`}),(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:Me,onChange:()=>Ne(e=>!e)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:`Show pin icon on hover`})]})]}),(0,i.jsx)(`div`,{className:`flexi-settings-divider`}),(0,i.jsxs)(`div`,{className:`flexi-settings-section`,children:[(0,i.jsx)(`span`,{className:`flexi-settings-heading`,children:`Columns`}),z.map(e=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:!j.includes(e.key),onChange:()=>We(e.key)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:e.header})]},e.key))]}),(0,i.jsx)(`div`,{className:`flexi-settings-divider`}),(0,i.jsxs)(`button`,{type:`button`,onClick:Ge,className:`flexi-settings-reset`,title:`Reset pin icon visibility and hidden columns to their defaults`,children:[(0,i.jsx)(t.RotateCcw,{className:`flexi-icon-sm`}),(0,i.jsx)(`span`,{children:`Reset to defaults`})]})]}),U.current);return(0,i.jsxs)(`div`,{ref:U,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),Ee(!0)},onDragLeave:()=>Ee(!1),onDrop:Ze,className:p(`flexi-groupzone`,Te&&`flexi-groupzone--dragover`),children:k.length===0?(0,i.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,i.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),k.map(e=>(0,i.jsxs)(`div`,{className:`flexi-chip`,children:[(0,i.jsx)(`span`,{children:z.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>Qe(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,i.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})}),(0,i.jsx)(`div`,{ref:lt,className:`flexi-table-wrap`,style:re,children:(0,i.jsxs)(`table`,{className:p(`flexi-table`,ae&&`flexi-table--bordered`),style:ie,children:[(0,i.jsxs)(`colgroup`,{children:[l&&k.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),H.map(e=>(0,i.jsx)(`col`,{style:{...e.style,width:W(e)}},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`flexi-thead`,children:$e.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&k.length>0&&(0,i.jsx)(`th`,{rowSpan:$e.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,top:0,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:a,rowSpan:o,colSpan:s},c)=>{let u=(T[a.key]?.length||0)>0,d=!!B[a.key],f=yt(a.key,!0,a.headerStyle),m=!a.children||a.children.length===0,h=A.key===a.key,ee=!!(l&&m),te=m&&a.resizable!==!1;return n===0&&e.length-1,(0,i.jsxs)(`th`,{rowSpan:o,colSpan:s,draggable:!0,onDragStart:e=>qe(e,a.key,m),onDragOver:e=>e.preventDefault(),onDrop:e=>Ye(e,a.key),className:p(`flexi-th`,`flexi-th--draggable`,ee&&`flexi-th--group-draggable`,d&&`flexi-th--pinned`,a.className,a.headerClassName),style:f,children:[(0,i.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,i.jsxs)(`div`,{className:p(`flexi-th-label`,a.sortable&&m&&`flexi-th-label--sortable`),onClick:()=>a.sortable&&m&&Ke(a.key),children:[(0,i.jsx)(`span`,{className:`flexi-th-text`,children:a.header}),m&&a.sortable&&(0,i.jsx)(`span`,{className:p(`flexi-sort-icon`,h&&`flexi-sort-icon--active`),children:h&&A.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):h&&A.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,i.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,i.jsxs)(`div`,{className:`flexi-th-actions`,children:[m&&a.filterable&&(0,i.jsx)(`button`,{type:`button`,ref:e=>{e?O.current.set(a.key,e):O.current.delete(a.key)},onClick:e=>{e.stopPropagation(),ve(``),ge(w===a.key?null:a.key)},className:p(`flexi-icon-btn`,`flexi-filter-btn`,u&&`flexi-filter-btn--active`),children:(0,i.jsx)(t.Filter,{className:`flexi-icon-sm`})}),m&&Me&&(0,i.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),Ue(a.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,d&&`flexi-pin-btn--pinned`),title:B[a.key]===`left`?`Pinned left (click to pin right)`:B[a.key]===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:d?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),w===a.key&&m&&D&&U.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:Be,className:`flexi-filter-dropdown`,style:{top:D.top,left:D.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:E,onChange:e=>ve(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`flexi-filter-list`,children:it.length===0?(0,i.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):it.map((e,t)=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:T[a.key]?.includes(e)||!1,onChange:()=>tt(a.key,e)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(e)})]},t))}),u&&(0,i.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,i.jsx)(`button`,{type:`button`,onClick:()=>nt(a.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),U.current)]}),te&&(0,i.jsx)(`div`,{className:`flexi-th-resizer`,onMouseDown:e=>Xe(e,a),onClick:e=>e.stopPropagation(),onDragStart:e=>e.preventDefault()})]},a.key)}),de&&n===0&&(0,i.jsx)(`div`,{className:`flexi-actions-th flexi-th`,style:{position:`sticky`,top:0,right:0,zIndex:55,display:`flex`,justifyContent:`center`,alignItems:`center`},children:de&&xt})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`flexi-tbody`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`Loading records...`})}):X.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`No records found matching criteria.`})}):(0,i.jsxs)(i.Fragment,{children:[ht>0&&(0,i.jsx)(`tr`,{"aria-hidden":`true`,style:{height:ht},children:(0,i.jsx)(`td`,{colSpan:$,style:{padding:0,border:`none`,height:ht}})}),_t.map((e,t)=>Ct(e,Q+t)),gt>0&&(0,i.jsx)(`tr`,{"aria-hidden":`true`,style:{height:gt},children:(0,i.jsx)(`td`,{colSpan:$,style:{padding:0,border:`none`,height:gt}})})]})}),_.length>0&&(0,i.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:_.map((e,t)=>wt(e,t))})]})}),St,S&&(0,i.jsxs)(`div`,{className:`flexi-pagination`,children:[(0,i.jsxs)(`div`,{className:`flexi-pagination-size`,children:[(0,i.jsx)(`span`,{children:`Rows per page`}),(0,i.jsx)(`select`,{value:I,onChange:e=>ot(Number(e.target.value)),className:`flexi-pagination-select`,children:he.map(e=>(0,i.jsx)(`option`,{value:e,children:e},e))})]}),(0,i.jsx)(`div`,{className:`flexi-pagination-info`,children:q===0?`0 of 0`:`${(P-1)*I+1}–${Math.min(P*I,q)} of ${q}`}),(0,i.jsxs)(`div`,{className:`flexi-pagination-controls`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:()=>Y(1),disabled:P===1,className:`flexi-icon-btn`,title:`First page`,children:(0,i.jsx)(t.ChevronsLeft,{className:`flexi-icon-sm`})}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>Y(P-1),disabled:P===1,className:`flexi-icon-btn`,title:`Previous page`,children:(0,i.jsx)(t.ChevronLeft,{className:`flexi-icon-sm`})}),(0,i.jsxs)(`span`,{className:`flexi-pagination-page`,children:[`Page `,P,` of `,J]}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>Y(P+1),disabled:P===J,className:`flexi-icon-btn`,title:`Next page`,children:(0,i.jsx)(t.ChevronRight,{className:`flexi-icon-sm`})}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>Y(J),disabled:P===J,className:`flexi-icon-btn`,title:`Last page`,children:(0,i.jsx)(t.ChevronsRight,{className:`flexi-icon-sm`})})]})]})]});function Ct(e,n){if(e.isGroupRow){let r=Ce[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`flexi-group-row`,style:{height:v},children:[(0,i.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,i.jsxs)(`button`,{type:`button`,onClick:()=>ct(e.path),className:`flexi-group-toggle`,children:[r?(0,i.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,i.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,i.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`flexi-group-filler`})]},`group-header-${e.path}-${n}`)}let r=Ve(e);return(0,i.jsxs)(`tr`,{className:p(`flexi-row`,ue&&`flexi-row--clickable`,He(e,n)),style:{height:v},onClick:ue?t=>ue(e,n,t):void 0,children:[l&&k?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),H?.map(t=>{let r=b?.includes(t.key)?vt.get(n)?.[t.key]:void 0;if(r===`skip`)return null;let a=e[t.key],o=yt(t.key,!1,t.style),s=!!B[t.key];return(0,i.jsx)(`td`,{rowSpan:typeof r==`number`?r:void 0,className:p(`flexi-cell`,s&&`flexi-cell--pinned`,t.className),style:o,children:t.render?t.render(a,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:a})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},r??`row-${n}`)}function wt(e,t){let n=typeof oe==`function`?oe(e,t):oe,r={position:`sticky`,bottom:`${bt[t]}px`,background:`#`,zIndex:45};return(0,i.jsxs)(`tr`,{className:p(`flexi-row`,`flexi-row--pinned-bottom`,n),style:r,children:[l&&k?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),H?.map(t=>{let n=e[t.key],r=yt(t.key,!1,t.style),a=!!B[t.key],o=t.pinnedRender??t.render;return(0,i.jsx)(`td`,{className:p(`flexi-cell`,a&&`flexi-cell--pinned`,t.className),style:r,children:o?o(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},`pinned-bottom-row-${t}`)}}e.DataTable=g});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react/jsx-runtime"),require("react-dom")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react/jsx-runtime`,`react-dom`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.JSX,e.ReactDOM))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=(0,n.createContext)(null);function o({value:e,children:t}){return(0,r.jsx)(a.Provider,{value:e,children:t})}function s(){let e=(0,n.useContext)(a);if(!e)throw Error(`DataTable components must be rendered inside <DataTable>.`);return e}var c=(...e)=>e.filter(Boolean).join(` `);function l(){let{groupedColumns:e,columnsByKey:i,addGroup:a,removeGroup:o}=s(),[l,u]=(0,n.useState)(!1);return(0,r.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),u(!0)},onDragLeave:()=>u(!1),onDrop:e=>{e.preventDefault(),u(!1);let t=e.dataTransfer.getData(`text/plain`);t&&i.has(t)&&a(t)},className:c(`flexi-groupzone`,l&&`flexi-groupzone--dragover`),children:e.length===0?(0,r.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,r.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,r.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),e.map(e=>(0,r.jsxs)(`div`,{className:`flexi-chip`,children:[(0,r.jsx)(`span`,{children:i.get(e)?.header||e}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>o(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,r.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})})}function u(){let{currentPage:e,pageSize:n,totalPages:i,totalCount:a,pageSizeOptions:o,goToPage:c,changePageSize:l}=s();return(0,r.jsxs)(`div`,{className:`flexi-pagination`,children:[(0,r.jsxs)(`div`,{className:`flexi-pagination-size`,children:[(0,r.jsx)(`span`,{children:`Rows per page`}),(0,r.jsx)(`select`,{value:n,onChange:e=>l(Number(e.target.value)),className:`flexi-pagination-select`,children:o.map(e=>(0,r.jsx)(`option`,{value:e,children:e},e))})]}),(0,r.jsx)(`div`,{className:`flexi-pagination-info`,children:a===0?`0 of 0`:`${(e-1)*n+1}–${Math.min(e*n,a)} of ${a}`}),(0,r.jsxs)(`div`,{className:`flexi-pagination-controls`,children:[(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(1),disabled:e===1,className:`flexi-icon-btn`,title:`First page`,children:(0,r.jsx)(t.ChevronsLeft,{className:`flexi-icon-sm`})}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(e-1),disabled:e===1,className:`flexi-icon-btn`,title:`Previous page`,children:(0,r.jsx)(t.ChevronLeft,{className:`flexi-icon-sm`})}),(0,r.jsxs)(`span`,{className:`flexi-pagination-page`,children:[`Page `,e,` of `,i]}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(e+1),disabled:e===i,className:`flexi-icon-btn`,title:`Next page`,children:(0,r.jsx)(t.ChevronRight,{className:`flexi-icon-sm`})}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(i),disabled:e===i,className:`flexi-icon-btn`,title:`Last page`,children:(0,r.jsx)(t.ChevronsRight,{className:`flexi-icon-sm`})})]})]})}var d=[10,25,50,100],f=[],p=[],m=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...m(e.children)):t.push(e)}),t},h=e=>{if(e===!0)return`left`;if(e===`left`||e===`right`)return e},g=e=>{let t={};return e.forEach(e=>{let n=h(e.pinned);n&&(t[e.key]=n)}),t},_=(e,t,n)=>{let r=e=>{let n=t[e];return n===`left`?0:n===`right`?2:1},i=e=>e.map((e,t)=>({col:e,idx:t})).sort((e,t)=>{let i=r(e.col.key)-r(t.col.key);return i===0?(n[e.col.key]??e.idx)-(n[t.col.key]??t.idx):i}).map(({col:e})=>e.children&&e.children.length>0?{...e,children:i(e.children)}:e);return i(e)},v=(e,t,n)=>{let r=e.map(e=>e.key);if(r.includes(t)&&r.includes(n))return e;for(let r of e)if(r.children&&r.children.length>0){let e=v(r.children,t,n);if(e)return e}return null},y=(e,t)=>{let n=t[e.key];if(n!==void 0)return n;let r=e.style?.width||e.headerStyle?.width||`150px`;if(typeof r==`number`)return r;let i=String(r).trim();return/^\d+(\.\d+)?(px)?$/i.test(i)&&parseInt(i,10)||150},b=(e,t,n)=>{let r=e=>{let t=0;return e.forEach(e=>{t=e.children&&e.children.length>0?Math.max(t,1+r(e.children)):Math.max(t,1)}),t},i=r(e),a=Array.from({length:i},()=>[]),o=e=>!e.children||e.children.length===0?t.includes(e.key)||n.includes(e.key)?0:1:e.children.reduce((e,t)=>e+o(t),0),s=(e,n)=>{e.forEach(e=>{if(t.includes(e.key))return;let r=o(e);r!==0&&(e.children&&e.children.length>0?(a[n].push({col:e,rowSpan:1,colSpan:r}),s(e.children,n+1)):a[n].push({col:e,rowSpan:i-n,colSpan:1}))})};s(e,0);let c=a.filter(e=>e.length>0);return c.map((e,t)=>e.map(e=>({...e,rowSpan:Math.min(e.rowSpan,c.length-t)})))},ee=({visibleLeafColumns:e,pinnedColumns:t,columnWidths:n,hasGroups:r,hasActions:i})=>{let a={},o=r?48:0;e.forEach(e=>{t[e.key]===`left`&&(a[e.key]={side:`left`,offset:o},o+=y(e,n))});let s=i?100:0;for(let r=e.length-1;r>=0;r--){let i=e[r];t[i.key]===`right`&&(a[i.key]={side:`right`,offset:s},s+=y(i,n))}return a},x=(e,t,n=!1,r)=>{let i=e[t];if(!i)return r||{};let a=i.side===`right`;return{position:`sticky`,[a?`right`:`left`]:`${i.offset}px`,...n?{top:0}:{},zIndex:n?30:20,background:`#f8fafc`,boxShadow:a?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...r}},S=()=>(0,r.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}});function C({children:e}){return(0,r.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,r.jsx)(`div`,{className:`flexi-actions-inner`,children:e})})}function w({node:e}){let{rowHeight:n,expandedGroups:i,toggleGroupExpansion:a,totalColumnsCount:o}=s(),c=i[e.path]!==!1;return(0,r.jsxs)(`tr`,{className:`flexi-group-row`,style:{height:n},children:[(0,r.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,r.jsxs)(`button`,{type:`button`,onClick:()=>a(e.path),className:`flexi-group-toggle`,children:[c?(0,r.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,r.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,r.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,r.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:Math.max(1,o-1),className:`flexi-group-filler`})]})}function T({record:e,rowIndex:t,className:n}){let{rowHeight:i,hasGroups:a,hasActions:o,actions:l,onRowClick:u,visibleLeafColumns:d,pinnedColumns:f,pinOffsets:p,rowSpanColumns:m,rowSpanInfo:h}=s(),g=h.get(t);return(0,r.jsxs)(`tr`,{className:c(`flexi-row`,u&&`flexi-row--clickable`,n),style:{height:i},onClick:u?n=>u(e,t,n):void 0,children:[a&&(0,r.jsx)(S,{}),d.map(t=>{let n=m?.includes(t.key)?g?.[t.key]:void 0;if(n===`skip`)return null;let i=e[t.key];return(0,r.jsx)(`td`,{rowSpan:typeof n==`number`?n:void 0,className:c(`flexi-cell`,!!f[t.key]&&`flexi-cell--pinned`,t.className),style:x(p,t.key,!1,t.style),children:t.render?t.render(i,e):(0,r.jsx)(`span`,{className:`flexi-cell-text`,children:i})},t.key)}),o&&l&&(0,r.jsx)(C,{children:l(e)})]})}function E({record:e,index:t,className:n}){let{hasGroups:i,hasActions:a,actions:o,pinnedBottomRowData:l,visibleLeafColumns:u,pinnedColumns:d,pinOffsets:f}=s(),p={position:`sticky`,bottom:`${(l.length-1-t)*48}px`,zIndex:45};return(0,r.jsxs)(`tr`,{className:c(`flexi-row`,`flexi-row--pinned-bottom`,n),style:p,children:[i&&(0,r.jsx)(S,{}),u.map(t=>{let n=e[t.key],i=t.pinnedRender??t.render;return(0,r.jsx)(`td`,{className:c(`flexi-cell`,!!d[t.key]&&`flexi-cell--pinned`,t.className),style:x(f,t.key,!1,t.style),children:i?i(n,e):(0,r.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),a&&o&&(0,r.jsx)(C,{children:o(e)})]})}function te(){let{pinnedBottomRowData:e,pinnedRowClassName:t}=s();return e.length===0?null:(0,r.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:e.map((e,n)=>(0,r.jsx)(E,{record:e,index:n,className:typeof t==`function`?t(e,n):t},`pinned-bottom-row-${n}`))})}function D(){let{settingsMenu:e}=s();return(0,r.jsx)(`button`,{type:`button`,ref:e.buttonRef,onClick:t=>{t.stopPropagation(),e.toggle()},className:c(`flexi-icon-btn`,e.isOpen&&`flexi-settings-btn--active`),title:`Grid display settings`,children:(0,r.jsx)(t.Settings,{className:`flexi-icon-sm`})})}function ne(){let{gridRootRef:e,settingsMenu:n,displayPinnedIcon:a,toggleDisplayPinnedIcon:o,initialLeafColumns:c,hiddenColumns:l,toggleColumnVisibility:u,resetControlPanelDefaults:d}=s(),f=e.current;return!n.isOpen||!n.position||!f?null:(0,i.createPortal)((0,r.jsxs)(`div`,{ref:n.menuRef,className:`flexi-settings-menu`,style:{top:n.position.top,right:n.position.right,zIndex:9999},children:[(0,r.jsxs)(`div`,{className:`flexi-settings-section`,children:[(0,r.jsx)(`span`,{className:`flexi-settings-heading`,children:`Action Icons`}),(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:a,onChange:o}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:`Show pin icon on hover`})]})]}),(0,r.jsx)(`div`,{className:`flexi-settings-divider`}),(0,r.jsxs)(`div`,{className:`flexi-settings-section`,children:[(0,r.jsx)(`span`,{className:`flexi-settings-heading`,children:`Columns`}),c.map(e=>(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:!l.includes(e.key),onChange:()=>u(e.key)}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:e.header})]},e.key))]}),(0,r.jsx)(`div`,{className:`flexi-settings-divider`}),(0,r.jsxs)(`button`,{type:`button`,onClick:d,className:`flexi-settings-reset`,title:`Reset pin icon visibility and hidden columns to their defaults`,children:[(0,r.jsx)(t.RotateCcw,{className:`flexi-icon-sm`}),(0,r.jsx)(`span`,{children:`Reset to defaults`})]})]}),f)}var O=(e,t,n)=>n?.getValue?n.getValue(e):e[t],re=(e,t)=>{let n=typeof t==`function`?t(e):e[t];return n==null?void 0:String(n)},k=(e,t,n)=>{if(!n)return;let r;for(let i in n)n[i](e,t)&&(r=r?`${r} ${i}`:i);return r},A=(e,t,n)=>{let r=e.map(e=>O(e,t,n));return Array.from(new Set(r)).filter(e=>e!=null)},ie=(e,t,n)=>{let r=Object.entries(t).filter(([,e])=>e&&e.length>0);return r.length===0?e:e.filter(e=>r.every(([t,r])=>r.includes(O(e,t,n.get(t)))))},j=e=>e==null||typeof e==`number`&&Number.isNaN(e),M=(e,t)=>typeof e==`number`&&typeof t==`number`?e-t:e instanceof Date&&t instanceof Date?e.getTime()-t.getTime():String(e).localeCompare(String(t),void 0,{numeric:!0,sensitivity:`base`}),ae=(e,t,n,r)=>[...e].sort((e,i)=>{let a=O(e,t,r),o=O(i,t,r);if(a===o)return 0;let s=j(a),c=j(o);if(s&&c)return 0;if(s)return 1;if(c)return-1;let l=M(a,o);return n===`asc`?l:-l});function N(){let{isLoading:e,visibleRows:t,startIndex:n,totalRowCount:i,topSpacerHeight:a,bottomSpacerHeight:o,totalColumnsCount:c,rowKey:l,rowClassRules:u}=s(),d=Math.max(1,c);return e||i===0?(0,r.jsx)(`tbody`,{className:`flexi-tbody`,children:(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:d,className:`flexi-empty-cell`,children:e?`Loading records...`:`No records found matching criteria.`})})}):(0,r.jsxs)(`tbody`,{className:`flexi-tbody`,children:[a>0&&(0,r.jsx)(`tr`,{"aria-hidden":`true`,style:{height:a},children:(0,r.jsx)(`td`,{colSpan:d,style:{padding:0,border:`none`,height:a}})}),t.map((e,t)=>{let i=n+t;return e.kind===`group`?(0,r.jsx)(w,{node:e},`group-header-${e.path}-${i}`):(0,r.jsx)(T,{record:e.record,rowIndex:i,className:k(e.record,i,u)},re(e.record,l)??`row-${i}`)}),o>0&&(0,r.jsx)(`tr`,{"aria-hidden":`true`,style:{height:o},children:(0,r.jsx)(`td`,{colSpan:d,style:{padding:0,border:`none`,height:o}})})]})}function oe(){let{hasGroups:e,hasActions:t,visibleLeafColumns:n,columnWidths:i}=s();return(0,r.jsxs)(`colgroup`,{children:[e&&(0,r.jsx)(`col`,{style:{width:`48px`}}),n.map(e=>(0,r.jsx)(`col`,{style:{...e.style,width:y(e,i)}},e.key)),t&&(0,r.jsx)(`col`,{style:{width:`100px`}})]})}function P({columnKey:e}){let{gridRootRef:t,filters:n}=s(),a=t.current,{filterPosition:o}=n;if(!a||!o)return null;let c=n.selectedFilters[e],l=(c?.length||0)>0,u=n.filteredUniqueValues;return(0,i.createPortal)((0,r.jsxs)(`div`,{ref:n.dropdownRef,className:`flexi-filter-dropdown`,style:{top:o.top,left:o.left,zIndex:9999},children:[(0,r.jsx)(`div`,{className:`flexi-filter-search`,children:(0,r.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:n.filterSearchQuery,onChange:e=>n.setFilterSearchQuery(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,r.jsx)(`div`,{className:`flexi-filter-list`,children:u.length===0?(0,r.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):u.map((t,i)=>(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:c?.includes(t)||!1,onChange:()=>n.handleFilterChange(e,t)}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},i))}),l&&(0,r.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,r.jsx)(`button`,{type:`button`,onClick:()=>n.clearFilter(e),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),a)}function se({col:e,rowSpan:n,colSpan:i}){let{groupBy:a,pinnedColumns:o,pinOffsets:l,displayPinnedIcon:u,togglePin:d,sortState:f,handleSort:p,filters:m,handleDragStart:h,handleDragEnd:g,handleDrop:_,startResize:v}=s(),y=o[e.key],b=!!y,ee=(m.selectedFilters[e.key]?.length||0)>0,S=!e.children||e.children.length===0,C=f.key===e.key,w=a&&S,T=S&&e.resizable!==!1,E=!!e.sortable&&S;return(0,r.jsxs)(`th`,{rowSpan:n,colSpan:i,draggable:!0,onDragStart:t=>h(t,e.key,S),onDragEnd:g,onDragOver:e=>e.preventDefault(),onDrop:t=>_(t,e.key),className:c(`flexi-th`,`flexi-th--draggable`,w&&`flexi-th--group-draggable`,b&&`flexi-th--pinned`,e.className,e.headerClassName),style:x(l,e.key,!0,e.headerStyle),children:[(0,r.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,r.jsxs)(`div`,{className:c(`flexi-th-label`,E&&`flexi-th-label--sortable`),onClick:()=>E&&p(e.key),children:[(0,r.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),E&&(0,r.jsx)(`span`,{className:c(`flexi-sort-icon`,C&&`flexi-sort-icon--active`),children:C&&f.direction===`asc`?(0,r.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):C&&f.direction===`desc`?(0,r.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,r.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,r.jsxs)(`div`,{className:`flexi-th-actions`,children:[S&&e.filterable&&(0,r.jsx)(`button`,{type:`button`,ref:t=>m.registerFilterButton(e.key,t),onClick:t=>{t.stopPropagation(),m.toggleFilterDropdown(e.key)},className:c(`flexi-icon-btn`,`flexi-filter-btn`,ee&&`flexi-filter-btn--active`),children:(0,r.jsx)(t.Filter,{className:`flexi-icon-sm`})}),S&&u&&(0,r.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),d(e.key)},className:c(`flexi-icon-btn`,`flexi-pin-btn`,b&&`flexi-pin-btn--pinned`),title:y===`left`?`Pinned left (click to pin right)`:y===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:b?(0,r.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,r.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),S&&m.activeFilterKey===e.key&&(0,r.jsx)(P,{columnKey:e.key})]}),T&&(0,r.jsx)(`div`,{className:`flexi-th-resizer`,onMouseDown:t=>v(t,e),onClick:e=>e.stopPropagation(),onDragStart:e=>e.preventDefault()})]})}function ce(){let{headerRows:e,hasGroups:t,controlPanel:n}=s(),i=e.length===0&&n?[[]]:e;return(0,r.jsx)(`thead`,{className:`flexi-thead`,children:i.map((e,a)=>(0,r.jsxs)(`tr`,{className:`flexi-header-row`,children:[a===0&&t&&(0,r.jsx)(`th`,{rowSpan:i.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,top:0,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:t,colSpan:n})=>(0,r.jsx)(se,{col:e,rowSpan:t,colSpan:n},e.key)),n&&a===0&&(0,r.jsx)(`th`,{className:`flexi-actions-th flexi-th `,style:{right:0,zIndex:55,display:`flex`,justifyContent:`center`,alignItems:`center`},children:(0,r.jsx)(D,{})})]},`header-row-${a}`))})}var F=(e,t,n,r=0,i=``)=>{if(r>=t.length)return e.map(e=>({kind:`record`,record:e}));let a=t[r],o=n.get(a),s=new Map;return e.forEach(e=>{let t=String(O(e,a,o)??`N/A`),n=s.get(t);n?n.push(e):s.set(t,[e])}),Array.from(s.entries()).sort(([e],[t])=>e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})).map(([e,o])=>{let s=i?`${i}➔${e}`:e;return{kind:`group`,groupKey:a,groupValue:e,path:s,depth:r,children:F(o,t,n,r+1,s),totalItemsCount:o.length}})},le=(e,t)=>{let n=[],r=e=>{e.forEach(e=>{n.push(e),e.kind===`group`&&t[e.path]!==!1&&r(e.children)})};return r(e),n},ue=(e,t,n,r)=>{let i=new Map;if(!t||t.length===0)return i;let a=e.map(()=>t.map(()=>!0)),o=null;for(let r=0;r<e.length;r++){let i=e[r];if(i.kind===`group`){o=null;continue}let s=o===null?null:e[o];if(s&&s.kind===`record`){let e=!0;for(let o=0;o<t.length;o++){let c=t[o],l=n.get(c);e&&O(i.record,c,l)===O(s.record,c,l)?a[r][o]=!1:(e=!1,a[r][o]=!0)}}o=r}return t.forEach((t,n)=>{let o=0;for(;o<e.length;){if(e[o].kind===`group`||!a[o][n]){o++;continue}let s=o+1;for(;s<e.length&&e[s].kind!==`group`&&!a[s][n];)s++;if(s-o>1){let e=i.get(r+o)||{};e[t]=s-o,i.set(r+o,e);for(let e=o+1;e<s;e++){let n=i.get(r+e)||{};n[t]=`skip`,i.set(r+e,n)}}o=s}}),i};function I({active:e,resetKey:t,rootRef:r,getAnchor:i,compute:a}){let[o,s]=(0,n.useState)(null),c=(0,n.useRef)(i),l=(0,n.useRef)(a);return c.current=i,l.current=a,(0,n.useEffect)(()=>{if(!e){s(null);return}let t=()=>{let e=c.current(),t=r.current;!e||!t||s(l.current(e.getBoundingClientRect(),t.getBoundingClientRect()))};return t(),window.addEventListener(`scroll`,t,!0),window.addEventListener(`resize`,t),()=>{window.removeEventListener(`scroll`,t,!0),window.removeEventListener(`resize`,t)}},[e,t,r]),o}function L(e,t,r){let i=(0,n.useRef)(t),a=(0,n.useRef)(r);i.current=t,a.current=r,(0,n.useEffect)(()=>{if(!e)return;let t=e=>{let t=e.target,[n,...r]=i.current();n&&(n.contains(t)||r.some(e=>e?.contains(t))||a.current())};return document.addEventListener(`mousedown`,t),()=>document.removeEventListener(`mousedown`,t)},[e])}function de({data:e,columnsByKey:t,gridRootRef:r}){let[i,a]=(0,n.useState)(null),[o,s]=(0,n.useState)({}),[c,l]=(0,n.useState)(``),u=(0,n.useRef)(new Map),d=(0,n.useRef)(null),f=(0,n.useCallback)((e,t)=>{t?u.current.set(e,t):u.current.delete(e)},[]),p=(0,n.useCallback)(()=>{a(null),l(``)},[]),m=(0,n.useCallback)(e=>{l(``),a(t=>t===e?null:e)},[]);L(i!==null,()=>[d.current,i?u.current.get(i):null],p);let h=I({active:i!==null,resetKey:i,rootRef:r,getAnchor:()=>i?u.current.get(i):null,compute:(e,t)=>({top:e.bottom-t.top+4,left:e.left-t.left})}),g=(0,n.useCallback)((e,t)=>{s(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return i.length===0&&delete a[e],a})},[]),_=(0,n.useCallback)(e=>{s(t=>{let n={...t};return delete n[e],n})},[]),v=(0,n.useMemo)(()=>i?A(e,i,t.get(i)):[],[e,i,t]);return{activeFilterKey:i,selectedFilters:o,filterSearchQuery:c,setFilterSearchQuery:l,filterPosition:h,dropdownRef:d,filteredUniqueValues:(0,n.useMemo)(()=>{if(!c.trim())return v;let e=c.toLowerCase();return v.filter(t=>String(t).toLowerCase().includes(e))},[v,c]),registerFilterButton:f,toggleFilterDropdown:m,handleFilterChange:g,clearFilter:_}}function fe({columns:e,pinnedColumns:t,isResizingRef:r,onColumnReorder:i}){let[a,o]=(0,n.useState)({}),s=(0,n.useRef)(null),c=(0,n.useMemo)(()=>_(e,t,a),[e,t,a]);return{reorderedColumns:c,handleDragStart:(0,n.useCallback)((e,t,n)=>{if(r.current){e.preventDefault();return}s.current=t,n&&e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},[r]),handleDragEnd:(0,n.useCallback)(()=>{s.current=null},[]),handleDrop:(0,n.useCallback)((n,r)=>{n.preventDefault(),n.stopPropagation();let l=s.current;if(s.current=null,!l||l===r)return;let u=v(c,l,r);if(!u)return;let d=u.map(e=>e.key),f=d.indexOf(l),p=d.indexOf(r);d.splice(p,0,d.splice(f,1)[0]);let h={...a};d.forEach((e,t)=>{h[e]=t}),o(h),i&&i(m(_(e,t,h)).map(e=>e.key))},[c,a,e,t,i])}}function pe(e){let[t,r]=(0,n.useState)({}),i=(0,n.useRef)(!1),a=(0,n.useRef)(null),o=(0,n.useRef)(e);return o.current=e,(0,n.useEffect)(()=>()=>a.current?.(),[]),{columnWidths:t,isResizingRef:i,startResize:(0,n.useCallback)((e,n)=>{e.preventDefault(),e.stopPropagation(),a.current?.(),i.current=!0;let s=e.clientX,c=y(n,t),l=n.minWidth??60,u=n.maxWidth,d=t[n.key],f=e=>{let t=Math.max(l,c+(e.clientX-s));u&&(t=Math.min(u,t)),d=t,r(e=>e[n.key]===t?e:{...e,[n.key]:t})},p=()=>{window.removeEventListener(`mousemove`,f),window.removeEventListener(`mouseup`,m),a.current=null},m=()=>{p(),requestAnimationFrame(()=>{i.current=!1}),d!==void 0&&o.current?.(n.key,d)};window.addEventListener(`mousemove`,f),window.addEventListener(`mouseup`,m),a.current=()=>{p(),i.current=!1}},[t])}}function me({defaultHiddenColumns:e,defaultDisplayPinnedIcon:t,onColumnVisibilityChange:r}){let[i,a]=(0,n.useState)(e),[o,s]=(0,n.useState)(t);return{hiddenColumns:i,displayPinnedIcon:o,toggleColumnVisibility:(0,n.useCallback)(e=>{let t=i.includes(e)?i.filter(t=>t!==e):[...i,e];a(t),r?.(t)},[i,r]),toggleDisplayPinnedIcon:(0,n.useCallback)(()=>s(e=>!e),[]),resetControlPanelDefaults:(0,n.useCallback)(()=>{s(t),a(e),r?.(e)},[t,e,r])}}function he({items:e,enabled:t,defaultPageSize:r,onPageChange:i,resetOn:a}){let[o,s]=(0,n.useState)(1),[c,l]=(0,n.useState)(Math.max(1,Math.floor(r)||1)),u=e.length,d=t?Math.max(1,Math.ceil(u/c)):1;return(0,n.useEffect)(()=>{s(1)},[...a,c,t]),(0,n.useEffect)(()=>{o>d&&s(d)},[o,d]),{currentPage:o,pageSize:c,totalPages:d,totalCount:u,pagedItems:(0,n.useMemo)(()=>{if(!t)return e;let n=(o-1)*c;return e.slice(n,n+c)},[e,t,o,c]),goToPage:(0,n.useCallback)(e=>{let t=Math.min(Math.max(1,e),d);s(t),i?.(t,c)},[d,c,i]),changePageSize:(0,n.useCallback)(e=>{l(e),s(1),i?.(1,e)},[i])}}function ge(e,t){let[r,i]=(0,n.useState)(()=>g(e));return{pinnedColumns:r,togglePin:(0,n.useCallback)(e=>{let n=r[e],a=n?n===`left`?`right`:void 0:`left`,o={...r};a?o[e]=a:delete o[e],i(o),t?.(e,!!a,a)},[r,t])}}function _e(e,t){let[r,i]=(0,n.useState)(e),[a,o]=(0,n.useState)({});return{groupedColumns:r,expandedGroups:a,addGroup:(0,n.useCallback)(e=>{if(!e||r.includes(e))return;let n=[...r,e];i(n),t?.(n)},[r,t]),removeGroup:(0,n.useCallback)(e=>{let n=r.filter(t=>t!==e);i(n),o({}),t?.(n)},[r,t]),toggleGroupExpansion:(0,n.useCallback)(e=>{o(t=>({...t,[e]:t[e]===!1}))},[])}}function ve(e){let[t,r]=(0,n.useState)(!1),i=(0,n.useRef)(null),a=(0,n.useRef)(null),o=(0,n.useCallback)(()=>r(e=>!e),[]);return L(t,()=>[i.current,a.current],(0,n.useCallback)(()=>r(!1),[])),{isOpen:t,position:I({active:t,rootRef:e,getAnchor:()=>a.current,compute:(e,t)=>({top:e.bottom-t.top+4,right:t.right-e.right})}),menuRef:i,buttonRef:a,toggle:o}}function ye(){let[e,t]=(0,n.useState)({key:null,direction:null});return{sortState:e,handleSort:(0,n.useCallback)(e=>{t(t=>{let n=`asc`;return t.key===e&&(t.direction===`asc`?n=`desc`:t.direction===`desc`&&(n=null)),{key:n?e:null,direction:n}})},[])}}function be({containerRef:e,totalRowCount:t,rowHeight:r,overscan:i}){let[a,o]=(0,n.useState)(0),[s,c]=(0,n.useState)(0);return(0,n.useEffect)(()=>{let t=e.current;if(!t)return;let n=()=>o(t.scrollTop);c(t.clientHeight),o(t.scrollTop),t.addEventListener(`scroll`,n,{passive:!0});let r;return typeof ResizeObserver<`u`&&(r=new ResizeObserver(()=>c(t.clientHeight)),r.observe(t)),()=>{t.removeEventListener(`scroll`,n),r?.disconnect()}},[e]),(0,n.useMemo)(()=>{if(s===0)return{startIndex:0,endIndex:t,topSpacerHeight:0,bottomSpacerHeight:0};let e=r>0?r:1,n=Math.max(0,t-1),o=Math.min(n,Math.floor(a/e)),c=Math.ceil(s/e)+1,l=Math.max(0,o-i),u=Math.min(t,o+c+i);return{startIndex:l,endIndex:u,topSpacerHeight:l*e,bottomSpacerHeight:(t-u)*e}},[a,s,t,r,i])}function R({columns:e,data:t,rowKey:r,actions:i,isLoading:a,groupBy:o=!1,defaultGroupBy:s=f,onPinChange:c,onGroupChange:l,pinnedBottomRowData:u=p,pinnedRowClassName:h,rowHeight:g=48,overscan:_=8,onColumnResize:v,onColumnReorder:y,rowClassRules:x,onRowClick:S,rowSpanColumns:C,controlPanel:w=!1,defaultDisplayPinnedIcon:T=!0,defaultHiddenColumns:E=f,onColumnVisibilityChange:te,pagination:D=!1,defaultPageSize:ne=10,pageSizeOptions:O=d,onPageChange:re}){let k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=(0,n.useMemo)(()=>m(e),[e]),M=(0,n.useMemo)(()=>{let e=new Map;return j.forEach(t=>e.set(t.key,t)),e},[j]),{pinnedColumns:N,togglePin:oe}=ge(j,c),{columnWidths:P,isResizingRef:se,startResize:ce}=pe(v),{reorderedColumns:I,handleDragStart:L,handleDragEnd:R,handleDrop:xe}=fe({columns:e,pinnedColumns:N,isResizingRef:se,onColumnReorder:y}),z=me({defaultHiddenColumns:E,defaultDisplayPinnedIcon:T,onColumnVisibilityChange:te}),{hiddenColumns:B}=z,V=_e(s,l),{groupedColumns:Se,expandedGroups:H}=V,U=o?Se:f,W=U.length>0,G=!!i,K=(0,n.useMemo)(()=>m(I).filter(e=>!U.includes(e.key)&&!B.includes(e.key)),[I,U,B]),Ce=(0,n.useMemo)(()=>b(I,U,B),[I,U,B]),we=(0,n.useMemo)(()=>ee({visibleLeafColumns:K,pinnedColumns:N,columnWidths:P,hasGroups:W,hasActions:G}),[K,N,P,W,G]),q=de({data:t,columnsByKey:M,gridRootRef:k}),{sortState:J,handleSort:Te}=ye(),Y=he({items:(0,n.useMemo)(()=>{let e=ie(t,q.selectedFilters,M);return!J.key||!J.direction?e:ae(e,J.key,J.direction,M.get(J.key))},[t,q.selectedFilters,J,M]),enabled:D,defaultPageSize:ne,onPageChange:re,resetOn:[q.selectedFilters,J]}),Ee=(0,n.useMemo)(()=>F(Y.pagedItems,U,M),[Y.pagedItems,U,M]),X=(0,n.useMemo)(()=>le(Ee,H),[Ee,H]),De=X.length,{startIndex:Z,endIndex:Q,topSpacerHeight:Oe,bottomSpacerHeight:ke}=be({containerRef:A,totalRowCount:De,rowHeight:g,overscan:_}),$=(0,n.useMemo)(()=>X.slice(Z,Q),[X,Z,Q]),Ae=(0,n.useMemo)(()=>ue($,C,M,Z),[$,C,M,Z]),je=ve(k),Me=K.length+ +!!G+ +!!W;return{gridRootRef:k,tableWrapRef:A,rowKey:r,actions:i,isLoading:!!a,groupBy:o,controlPanel:w,rowHeight:g,rowSpanColumns:C,rowClassRules:x,onRowClick:S,pinnedBottomRowData:u,pinnedRowClassName:h,pageSizeOptions:O,paginationEnabled:D,initialLeafColumns:j,columnsByKey:M,visibleLeafColumns:K,headerRows:Ce,pinnedColumns:N,pinOffsets:we,columnWidths:P,togglePin:oe,startResize:ce,handleDragStart:L,handleDragEnd:R,handleDrop:xe,hiddenColumns:B,displayPinnedIcon:z.displayPinnedIcon,toggleColumnVisibility:z.toggleColumnVisibility,toggleDisplayPinnedIcon:z.toggleDisplayPinnedIcon,resetControlPanelDefaults:z.resetControlPanelDefaults,settingsMenu:je,groupedColumns:Se,expandedGroups:H,addGroup:V.addGroup,removeGroup:V.removeGroup,toggleGroupExpansion:V.toggleGroupExpansion,hasGroups:W,hasActions:G,sortState:J,handleSort:Te,filters:q,currentPage:Y.currentPage,pageSize:Y.pageSize,totalPages:Y.totalPages,totalCount:Y.totalCount,goToPage:Y.goToPage,changePageSize:Y.changePageSize,visibleRows:$,startIndex:Z,totalRowCount:De,topSpacerHeight:Oe,bottomSpacerHeight:ke,rowSpanInfo:Ae,totalColumnsCount:Me}}function xe(e){let t=R(e),{containerStyle:n,tableStyle:i,bordered:a=!1}=e;return(0,r.jsx)(o,{value:t,children:(0,r.jsxs)(`div`,{ref:t.gridRootRef,className:`flexi-root`,children:[t.groupBy&&(0,r.jsx)(l,{}),(0,r.jsx)(`div`,{ref:t.tableWrapRef,className:`flexi-table-wrap`,style:n,children:(0,r.jsxs)(`table`,{className:c(`flexi-table`,a&&`flexi-table--bordered`),style:i,children:[(0,r.jsx)(oe,{}),(0,r.jsx)(ce,{}),(0,r.jsx)(N,{}),(0,r.jsx)(te,{})]})}),(0,r.jsx)(ne,{}),t.paginationEnabled&&(0,r.jsx)(u,{})]})})}e.DataTable=xe});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexi-datagrid",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "A powerful universal datagrid with tree-grouping, column pinning, and drag-and-drop.",
   "type": "module",
   "main": "./dist/index.umd.js",