react-open-source-grid 1.7.22 → 1.7.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{index-IX0OJSgg.js → index-DHtd8tTR.js} +60 -2
- package/dist/assets/index.js +1 -1
- package/dist/assets/{layoutPersistence-BB--01xS.js → layoutPersistence-C509RwQB.js} +1 -1
- package/dist/index.html +1 -1
- package/dist/lib/components/ServerSideFeaturesDemo.d.ts +10 -0
- package/package.json +1 -1
|
@@ -37,7 +37,7 @@ use chrome, FireFox or Internet Explorer 11`)}var a=e(`safe-buffer`),o=e(`random
|
|
|
37
37
|
`,n.NAME_START_CHAR=`:A-Z_a-zÀ-ÖØ-öø-˿Ͱ-ͽͿ-⁰-Ⰰ-、-豈-﷏ﷰ-�𐀀-`,n.NAME_CHAR=`-`+n.NAME_START_CHAR+`.0-9·̀-ͯ‿-⁀`,n.CHAR_RE=RegExp(`^[`+n.CHAR+`]$`,`u`),n.S_RE=RegExp(`^[`+n.S+`]+$`,`u`),n.NAME_START_CHAR_RE=RegExp(`^[`+n.NAME_START_CHAR+`]$`,`u`),n.NAME_CHAR_RE=RegExp(`^[`+n.NAME_CHAR+`]$`,`u`),n.NAME_RE=RegExp(`^[`+n.NAME_START_CHAR+`][`+n.NAME_CHAR+`]*$`,`u`),n.NMTOKEN_RE=RegExp(`^[`+n.NAME_CHAR+`]+$`,`u`);function r(e){return e>=65&&e<=90||e>=97&&e<=122||e===58||e===95||e===8204||e===8205||e>=192&&e<=214||e>=216&&e<=246||e>=248&&e<=767||e>=880&&e<=893||e>=895&&e<=8191||e>=8304&&e<=8591||e>=11264&&e<=12271||e>=12289&&e<=55295||e>=63744&&e<=64975||e>=65008&&e<=65533||e>=65536&&e<=983039}n.S_LIST=[32,10,13,9],n.isChar=function(e){return e>=32&&e<=55295||e===10||e===13||e===9||e>=57344&&e<=65533||e>=65536&&e<=1114111},n.isS=function(e){return e===32||e===10||e===13||e===9},n.isNameStartChar=r,n.isNameChar=function(e){return r(e)||e>=48&&e<=57||e===45||e===46||e===183||e>=768&&e<=879||e>=8255&&e<=8256}},{}],544:[function(e,t,n){Object.defineProperty(n,`__esModule`,{value:!0}),n.CHAR=`--�𐀀-`,n.RESTRICTED_CHAR=`-\b\v\f---`,n.S=` \r
|
|
38
38
|
`,n.NAME_START_CHAR=`:A-Z_a-zÀ-ÖØ-öø-˿Ͱ-ͽͿ-⁰-Ⰰ-、-豈-﷏ﷰ-�𐀀-`,n.NAME_CHAR=`-`+n.NAME_START_CHAR+`.0-9·̀-ͯ‿-⁀`,n.CHAR_RE=RegExp(`^[`+n.CHAR+`]$`,`u`),n.RESTRICTED_CHAR_RE=RegExp(`^[`+n.RESTRICTED_CHAR+`]$`,`u`),n.S_RE=RegExp(`^[`+n.S+`]+$`,`u`),n.NAME_START_CHAR_RE=RegExp(`^[`+n.NAME_START_CHAR+`]$`,`u`),n.NAME_CHAR_RE=RegExp(`^[`+n.NAME_CHAR+`]$`,`u`),n.NAME_RE=RegExp(`^[`+n.NAME_START_CHAR+`][`+n.NAME_CHAR+`]*$`,`u`),n.NMTOKEN_RE=RegExp(`^[`+n.NAME_CHAR+`]+$`,`u`);function r(e){return e>=65&&e<=90||e>=97&&e<=122||e===58||e===95||e===8204||e===8205||e>=192&&e<=214||e>=216&&e<=246||e>=248&&e<=767||e>=880&&e<=893||e>=895&&e<=8191||e>=8304&&e<=8591||e>=11264&&e<=12271||e>=12289&&e<=55295||e>=63744&&e<=64975||e>=65008&&e<=65533||e>=65536&&e<=983039}n.S_LIST=[32,10,13,9],n.isChar=function(e){return e>=1&&e<=55295||e>=57344&&e<=65533||e>=65536&&e<=1114111},n.isRestrictedChar=function(e){return e>=1&&e<=8||e===11||e===12||e>=14&&e<=31||e>=127&&e<=132||e>=134&&e<=159},n.isCharAndNotRestricted=function(e){return e===9||e===10||e===13||e>31&&e<127||e===133||e>159&&e<=55295||e>=57344&&e<=65533||e>=65536&&e<=1114111},n.isS=function(e){return e===32||e===10||e===13||e===9},n.isNameStartChar=r,n.isNameChar=function(e){return r(e)||e>=48&&e<=57||e===45||e===46||e===183||e>=768&&e<=879||e>=8255&&e<=8256}},{}],545:[function(e,t,n){function r(e){return e>=65&&e<=90||e===95||e>=97&&e<=122||e>=192&&e<=214||e>=216&&e<=246||e>=248&&e<=767||e>=880&&e<=893||e>=895&&e<=8191||e>=8204&&e<=8205||e>=8304&&e<=8591||e>=11264&&e<=12271||e>=12289&&e<=55295||e>=63744&&e<=64975||e>=65008&&e<=65533||e>=65536&&e<=983039}Object.defineProperty(n,`__esModule`,{value:!0}),n.NC_NAME_START_CHAR=`A-Z_a-zÀ-ÖØ-öø-˿Ͱ-ͽͿ--⁰-Ⰰ-、-豈-﷏ﷰ-�𐀀-`,n.NC_NAME_CHAR=`-`+n.NC_NAME_START_CHAR+`.0-9·̀-ͯ‿-⁀`,n.NC_NAME_START_CHAR_RE=RegExp(`^[`+n.NC_NAME_START_CHAR+`]$`,`u`),n.NC_NAME_CHAR_RE=RegExp(`^[`+n.NC_NAME_CHAR+`]$`,`u`),n.NC_NAME_RE=RegExp(`^[`+n.NC_NAME_START_CHAR+`][`+n.NC_NAME_CHAR+`]*$`,`u`),n.isNCNameStartChar=r,n.isNCNameChar=function(e){return r(e)||e===45||e===46||e>=48&&e<=57||e===183||e>=768&&e<=879||e>=8255&&e<=8256}},{}]},{},[15])(15)}))}))(),1);const Gn=(e,t,n=`export.csv`)=>{let r=t.map(e=>e.headerName),i=e.map(e=>t.map(t=>{let n=e[t.field];if(n==null)return``;let r=String(n);return r.includes(`,`)||r.includes(`
|
|
39
39
|
`)||r.includes(`"`)?`"${r.replace(/"/g,`""`)}"`:r}).join(`,`)),a=[r.join(`,`),...i].join(`
|
|
40
|
-
`);Jn(new Blob([a],{type:`text/csv;charset=utf-8;`}),n)},Kn=async(e,t,n={})=>{let{filename:r=`export.xlsx`,styling:i=`basic`}=n,a=new Wn.default.Workbook,o=a.addWorksheet(`Sheet1`),s=t.map(e=>e.headerName);o.addRow(s),e.forEach(e=>{let n=t.map(t=>e[t.field]??``);o.addRow(n)}),o.columns=t.map(t=>{let n=t.headerName.length,r=Math.max(...e.map(e=>String(e[t.field]??``).length)),i=Math.max(n,r)+2;return{width:Math.min(i,50)}}),i===`professional`&&qn(o,t);let c=await a.xlsx.writeBuffer();Jn(new Blob([c],{type:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`}),r)};var qn=(e,t)=>{let n=e.getRow(1);n.font={bold:!0,color:{argb:`FFFFFFFF`},size:11},n.fill={type:`pattern`,pattern:`solid`,fgColor:{argb:`FF2F5496`}},n.alignment={horizontal:`center`,vertical:`middle`,wrapText:!0},n.height=20,e.eachRow((e,t)=>{e.eachCell(e=>{e.border={top:{style:`thin`,color:{argb:`FFD3D3D3`}},left:{style:`thin`,color:{argb:`FFD3D3D3`}},bottom:{style:`thin`,color:{argb:`FFD3D3D3`}},right:{style:`thin`,color:{argb:`FFD3D3D3`}}},t>1&&t%2==0&&(e.fill={type:`pattern`,pattern:`solid`,fgColor:{argb:`FFF2F2F2`}}),t>1&&(e.alignment={horizontal:`left`,vertical:`middle`})})}),e.views=[{state:`frozen`,ySplit:1}]},Jn=(e,t)=>{let n=URL.createObjectURL(e),r=document.createElement(`a`);r.href=n,r.download=t,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)};const Yn=(e,t)=>{let n=new Date().toISOString().replace(/[:.]/g,`-`).slice(0,-5);return`data_export_${t===`all`?`full`:t}_${n}.${e}`},Xn=async(e,t,n)=>{if(e.length===0){alert(`No data to export`);return}let r=n.filename||Yn(n.format,n.scope);n.format===`csv`?Gn(e,t,r):n.format===`xlsx`&&await Kn(e,t,{filename:r,styling:n.styling})},Zn=({columns:e,fullDataset:t,filteredData:n,selectedRows:r,currentPageData:i,onExport:a})=>{let[o,s]=(0,b.useState)(!1),[c,l]=(0,b.useState)(`csv`),[u,d]=(0,b.useState)(`filtered`),[f,p]=(0,b.useState)(`basic`),[m,h]=(0,b.useState)(null),g=b.useRef(null),_=()=>{switch(u){case`all`:return t;case`filtered`:return n;case`selected`:return r.size>0?n.filter(e=>r.has(e.id)):[];case`page`:return i;default:return n}},v=()=>{let t=_();if(t.length===0){alert(`No ${u===`selected`?`selected`:u} data to export`);return}Xn(t,e,{format:c,scope:u,styling:c===`xlsx`?f:void 0}),a?.(!0),s(!1)},y=[{value:`all`,label:`Full Dataset`,disabled:!1},{value:`filtered`,label:`Filtered Data`,disabled:n.length===0},{value:`selected`,label:`Selected Rows (${r.size})`,disabled:r.size===0},{value:`page`,label:`Current Page`,disabled:i.length===0}];return(0,Y.jsxs)(`div`,{style:{position:`relative`},children:[(0,Y.jsxs)(`button`,{ref:g,onClick:()=>{if(!o){let e=g.current?.getBoundingClientRect();e&&h(e)}s(!o)},style:{padding:`8px 12px`,backgroundColor:`#2563eb`,color:`white`,borderRadius:`6px`,border:`none`,fontSize:`14px`,fontWeight:`500`,display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`,transition:`background-color 0.2s`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`#1d4ed8`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`#2563eb`},title:`Export data to CSV or XLSX format`,children:[(0,Y.jsx)(`svg`,{style:{width:`16px`,height:`16px`},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M12 19l9 2-9-18-9 18 9-2m0 0v-8m0 8l-6-4m6 4l6-4`})}),`Export`]}),o&&m&&(0,Y.jsxs)(`div`,{style:{position:`fixed`,left:`${m.left}px`,top:`${m.bottom+8}px`,backgroundColor:`#ffffff`,border:`1px solid #e5e7eb`,borderRadius:`8px`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)`,zIndex:50,padding:`20px`,width:`420px`,minWidth:`420px`,maxWidth:`420px`,maxHeight:`90vh`,overflowY:`auto`},children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`20px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`14px`,fontWeight:`600`,color:`#1f2937`,marginBottom:`12px`},children:`Format`}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`format`,value:`csv`,checked:c===`csv`,onChange:e=>l(e.target.value),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:`CSV`})]}),(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`format`,value:`xlsx`,checked:c===`xlsx`,onChange:e=>l(e.target.value),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:`XLSX (Excel)`})]})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`20px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`14px`,fontWeight:`600`,color:`#1f2937`,marginBottom:`12px`},children:`Data Scope`}),(0,Y.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`10px`},children:y.map(e=>(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`10px`,padding:`10px 12px`,borderRadius:`6px`,cursor:e.disabled?`not-allowed`:`pointer`,opacity:e.disabled?.5:1,backgroundColor:`transparent`,transition:`background-color 0.15s`,userSelect:`none`},onMouseEnter:t=>{e.disabled||(t.currentTarget.style.backgroundColor=`#f3f4f6`)},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`transparent`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`scope`,value:e.value,checked:u===e.value,onChange:e=>d(e.target.value),disabled:e.disabled,style:{width:`16px`,height:`16px`,cursor:e.disabled?`not-allowed`:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:e.label})]},e.value))})]}),c===`xlsx`&&(0,Y.jsxs)(`div`,{style:{marginBottom:`20px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`14px`,fontWeight:`600`,color:`#1f2937`,marginBottom:`12px`},children:`Styling`}),(0,Y.jsx)(`div`,{style:{marginBottom:`10px`},children:(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`styling`,value:`basic`,checked:f===`basic`,onChange:e=>p(e.target.value),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:`Basic`})]}),(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`styling`,value:`professional`,checked:f===`professional`,onChange:e=>p(e.target.value),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:`Professional`})]})]})}),(0,Y.jsx)(`p`,{style:{fontSize:`12px`,color:`#6b7280`,margin:`0`},children:`Professional adds colors, borders, and frozen header row`})]}),(0,Y.jsxs)(`div`,{style:{backgroundColor:`#f3f4f6`,borderRadius:`6px`,padding:`12px`,marginBottom:`20px`,fontSize:`13px`,color:`#4b5563`},children:[(0,Y.jsxs)(`p`,{style:{margin:`6px 0`},children:[(0,Y.jsx)(`strong`,{children:`Data to export:`}),` `,_().length,` row(s)`]}),(0,Y.jsxs)(`p`,{style:{margin:`6px 0`},children:[(0,Y.jsx)(`strong`,{children:`Columns:`}),` `,e.length]})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`10px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{onClick:()=>s(!1),style:{padding:`10px 16px`,border:`1px solid #d1d5db`,color:`#374151`,backgroundColor:`#ffffff`,borderRadius:`6px`,fontSize:`14px`,fontWeight:`500`,cursor:`pointer`,transition:`background-color 0.2s`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`#f9fafb`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`#ffffff`},children:`Cancel`}),(0,Y.jsx)(`button`,{onClick:v,disabled:_().length===0,style:{padding:`10px 16px`,backgroundColor:_().length===0?`#9ca3af`:`#2563eb`,color:`#ffffff`,borderRadius:`6px`,border:`none`,fontSize:`14px`,fontWeight:`500`,cursor:_().length===0?`not-allowed`:`pointer`,opacity:_().length===0?.6:1,transition:`background-color 0.2s`},onMouseEnter:e=>{_().length>0&&(e.currentTarget.style.backgroundColor=`#1d4ed8`)},onMouseLeave:e=>{_().length>0&&(e.currentTarget.style.backgroundColor=`#2563eb`)},children:`Export Now`})]})]}),o&&(0,Y.jsx)(`div`,{style:{position:`fixed`,inset:0,zIndex:40},onClick:()=>s(!1)})]})};var Qn=e=>{if(e.filterType)return e.filterType===`multi`?`set`:e.filterType;let t=e.field.toLowerCase();return t.includes(`date`)||t.includes(`time`)?`date`:t.includes(`salary`)||t.includes(`price`)||t.includes(`amount`)||t.includes(`count`)?`number`:t.includes(`status`)||t.includes(`department`)||t.includes(`category`)?`set`:`text`},$n=e=>{switch(e){case`text`:return[{value:`contains`,label:`Contains`},{value:`notContains`,label:`Not Contains`},{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Not Equals`},{value:`startsWith`,label:`Starts With`},{value:`endsWith`,label:`Ends With`},{value:`isEmpty`,label:`Is Empty`},{value:`isNotEmpty`,label:`Is Not Empty`}];case`number`:return[{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Not Equals`},{value:`greaterThan`,label:`Greater Than`},{value:`greaterThanOrEqual`,label:`Greater Than or Equal`},{value:`lessThan`,label:`Less Than`},{value:`lessThanOrEqual`,label:`Less Than or Equal`},{value:`inRange`,label:`In Range`},{value:`isEmpty`,label:`Is Empty`},{value:`isNotEmpty`,label:`Is Not Empty`}];case`date`:return[{value:`equals`,label:`Equals`},{value:`before`,label:`Before`},{value:`after`,label:`After`},{value:`inRange`,label:`In Range`},{value:`isEmpty`,label:`Is Empty`},{value:`isNotEmpty`,label:`Is Not Empty`}];case`set`:return[{value:`in`,label:`In`},{value:`notIn`,label:`Not In`}];default:return[]}},er=e=>![`isEmpty`,`isNotEmpty`].includes(e),tr=e=>e===`inRange`,nr=e=>[`in`,`notIn`].includes(e);const rr=({column:e,filterValue:t,onApply:n,onClose:r,rows:i,anchorEl:a})=>{let o=Qn(e),s=$n(o),c=t?.conditions||[{type:s[0]?.value||`contains`,value:``,value2:``,values:[]}],[l,u]=(0,b.useState)(t?.operator||`AND`),[d,f]=(0,b.useState)(c),[p,m]=(0,b.useState)({}),h=o===`set`?Array.from(new Set(i.map(t=>t[e.field]).filter(e=>e!=null))):[],g=()=>{f([...d,{type:s[0]?.value||`contains`,value:``,value2:``,values:[]}])},_=e=>{if(d.length>1){f(d.filter((t,n)=>n!==e));let t={...p};delete t[e],m(t)}},v=(e,t)=>{f(d.map((n,r)=>r===e?{...n,...t}:n))},y=(e,t)=>{m({...p,[e]:t})},x=()=>{let e=d.filter(e=>er(e.type)?nr(e.type)?e.values&&e.values.length>0:tr(e.type)?e.value!=null&&e.value!==``&&e.value2!=null&&e.value2!==``:e.value!=null&&e.value!==``:!0);e.length===0?n(null):n({operator:l,conditions:e}),r()},S=()=>{f([{type:s[0]?.value||`contains`,value:``,value2:``,values:[]}]),m({}),n(null)},C=()=>{f([{type:s[0]?.value||`contains`,value:``,value2:``,values:[]}]),u(`AND`),m({})},w=(e,t)=>{if(nr(e.type)){let n=new Set(e.values||[]),r=p[t]?.searchTerm||``,i=h.filter(e=>String(e).toLowerCase().includes(r.toLowerCase())),a=e=>{let r=new Set(n);r.has(e)?r.delete(e):r.add(e),v(t,{values:Array.from(r)})};return(0,Y.jsxs)(`div`,{style:{marginTop:`8px`},children:[(0,Y.jsx)(`input`,{type:`text`,style:{width:`100%`,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`,marginBottom:`8px`},value:r,onChange:e=>y(t,{searchTerm:e.target.value}),placeholder:`Search values...`}),(0,Y.jsxs)(`div`,{style:{maxHeight:`150px`,overflowY:`auto`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,padding:`4px`},children:[(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`6px`,cursor:`pointer`,padding:`4px 6px`,fontSize:`var(--grid-font-size-sm, 12px)`},children:[(0,Y.jsx)(`input`,{type:`checkbox`,checked:n.size===i.length&&i.length>0,onChange:()=>{n.size===i.length?v(t,{values:[]}):v(t,{values:i})},style:{width:`14px`,height:`14px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontWeight:500,color:`var(--grid-text)`},children:`(Select All)`})]}),i.map((e,t)=>(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`6px`,cursor:`pointer`,padding:`4px 6px`,fontSize:`var(--grid-font-size-sm, 12px)`},children:[(0,Y.jsx)(`input`,{type:`checkbox`,checked:n.has(e),onChange:()=>a(e),style:{width:`14px`,height:`14px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{color:`var(--grid-text)`},children:String(e)})]},t))]}),n.size>0&&(0,Y.jsxs)(`div`,{style:{marginTop:`6px`,fontSize:`var(--grid-font-size-sm, 12px)`,color:`var(--grid-primary)`,fontWeight:500},children:[n.size,` selected`]})]})}return er(e.type)?tr(e.type)?(0,Y.jsxs)(`div`,{style:{marginTop:`8px`,display:`flex`,gap:`8px`,alignItems:`center`},children:[(0,Y.jsx)(`input`,{type:o===`date`?`date`:o===`number`?`number`:`text`,style:{flex:1,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:e.value||``,onChange:e=>v(t,{value:e.target.value}),placeholder:`From`}),(0,Y.jsx)(`span`,{style:{color:`var(--grid-text-secondary)`,fontSize:`var(--grid-font-size-sm, 12px)`},children:`to`}),(0,Y.jsx)(`input`,{type:o===`date`?`date`:o===`number`?`number`:`text`,style:{flex:1,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:e.value2||``,onChange:e=>v(t,{value2:e.target.value}),placeholder:`To`})]}):(0,Y.jsx)(`div`,{style:{marginTop:`8px`},children:(0,Y.jsx)(`input`,{type:o===`date`?`date`:o===`number`?`number`:`text`,style:{width:`100%`,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:e.value||``,onChange:e=>v(t,{value:e.target.value}),placeholder:`Enter ${o}...`})}):null};return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:a?a.getBoundingClientRect().bottom+5:0,left:a?a.getBoundingClientRect().left:0,minWidth:`380px`,maxWidth:`450px`,maxHeight:`600px`,backgroundColor:`var(--grid-bg)`,boxShadow:`0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1)`,borderRadius:`var(--grid-border-radius, 8px)`,border:`1px solid var(--grid-border)`,padding:`16px`,zIndex:1001,display:`flex`,flexDirection:`column`,overflowY:`auto`},onClick:e=>e.stopPropagation(),children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`16px`,paddingBottom:`12px`,borderBottom:`1px solid var(--grid-border)`},children:[(0,Y.jsxs)(`h4`,{style:{margin:0,fontSize:`var(--grid-font-size, 14px)`,fontWeight:600,color:`var(--grid-text)`},children:[`Advanced Filter: `,e.headerName]}),(0,Y.jsx)(`p`,{style:{margin:`4px 0 0 0`,fontSize:`var(--grid-font-size-sm, 12px)`,color:`var(--grid-text-secondary)`},children:`Add multiple conditions with AND/OR logic`})]}),d.length>1&&(0,Y.jsxs)(`div`,{style:{marginBottom:`16px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`6px`},children:`Combine Conditions`}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`},children:[(0,Y.jsx)(`button`,{style:{flex:1,padding:`6px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:l===`AND`?`var(--grid-text-inverse)`:`var(--grid-text)`,backgroundColor:l===`AND`?`var(--grid-primary)`:`var(--grid-bg-alt)`,border:l===`AND`?`none`:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:()=>u(`AND`),children:`AND`}),(0,Y.jsx)(`button`,{style:{flex:1,padding:`6px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:l===`OR`?`var(--grid-text-inverse)`:`var(--grid-text)`,backgroundColor:l===`OR`?`var(--grid-primary)`:`var(--grid-bg-alt)`,border:l===`OR`?`none`:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:()=>u(`OR`),children:`OR`})]})]}),(0,Y.jsx)(`div`,{style:{flex:1,overflowY:`auto`,marginBottom:`12px`},children:d.map((e,t)=>(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`,padding:`12px`,backgroundColor:`var(--grid-bg-alt)`,borderRadius:`var(--grid-border-radius, 6px)`,border:`1px solid var(--grid-border)`},children:[(0,Y.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`8px`},children:[(0,Y.jsxs)(`label`,{style:{fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text)`},children:[`Condition `,t+1]}),d.length>1&&(0,Y.jsx)(`button`,{style:{padding:`2px 8px`,fontSize:`var(--grid-font-size-sm, 12px)`,color:`var(--grid-danger, #dc2626)`,backgroundColor:`transparent`,border:`none`,cursor:`pointer`,borderRadius:`var(--grid-border-radius, 4px)`},onClick:()=>_(t),onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-danger-bg, rgba(220, 38, 38, 0.1))`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,title:`Remove condition`,children:`✕`})]}),(0,Y.jsx)(`select`,{style:{width:`100%`,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:e.type,onChange:e=>v(t,{type:e.target.value,value:``,value2:``,values:[]}),children:s.map(e=>(0,Y.jsx)(`option`,{value:e.value,children:e.label},e.value))}),w(e,t),t<d.length-1&&d.length>1&&(0,Y.jsx)(`div`,{style:{marginTop:`12px`,padding:`4px 8px`,textAlign:`center`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:600,color:`var(--grid-primary)`,backgroundColor:`var(--grid-primary-bg)`,borderRadius:`var(--grid-border-radius, 4px)`},children:l})]},t))}),(0,Y.jsx)(`button`,{style:{width:`100%`,padding:`8px 12px`,marginBottom:`12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-primary)`,backgroundColor:`var(--grid-primary-bg)`,border:`1px dashed var(--grid-primary)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:g,onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover-bg)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-bg)`,children:`+ Add Condition`}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,paddingTop:`12px`,borderTop:`1px solid var(--grid-border)`},children:[(0,Y.jsx)(`button`,{style:{flex:1,padding:`8px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:C,onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Reset`}),(0,Y.jsx)(`button`,{style:{flex:1,padding:`8px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:S,onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsx)(`button`,{style:{flex:1,padding:`8px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:x,onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:`Apply`})]})]})};var ir=e=>e!=null&&`operator`in e&&`conditions`in e,ar=({filterValue:e,onApplyFilter:t,onClose:n,anchorEl:r,showAdvancedButton:i,onSwitchToAdvanced:a})=>{let o=ir(e)?null:e,s=o?.type||`contains`,c=o?.value||``,[l,u]=(0,b.useState)(s),[d,f]=(0,b.useState)(c);return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:r?r.getBoundingClientRect().bottom+5:0,left:r?r.getBoundingClientRect().left:0,minWidth:`280px`,backgroundColor:`var(--grid-bg)`,boxShadow:`var(--grid-shadow-medium, 0 10px 15px -3px rgba(0, 0, 0, 0.1))`,borderRadius:`var(--grid-border-radius, 8px)`,border:`var(--grid-border-width, 1px) solid var(--grid-border)`,padding:`16px`,zIndex:1e3},onClick:e=>e.stopPropagation(),children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Filter Type`}),(0,Y.jsxs)(`select`,{style:{width:`100%`,padding:`8px 12px`,border:`var(--grid-border-width, 1px) solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:l,onChange:e=>u(e.target.value),children:[(0,Y.jsx)(`option`,{value:`contains`,children:`Contains`}),(0,Y.jsx)(`option`,{value:`notContains`,children:`Not Contains`}),(0,Y.jsx)(`option`,{value:`equals`,children:`Equals`}),(0,Y.jsx)(`option`,{value:`startsWith`,children:`Starts With`}),(0,Y.jsx)(`option`,{value:`endsWith`,children:`Ends With`})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Value`}),(0,Y.jsx)(`input`,{type:`text`,style:{width:`100%`,padding:`8px 12px`,border:`var(--grid-border-width, 1px) solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:d,onChange:e=>f(e.target.value),placeholder:`Enter text...`,autoFocus:!0})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{f(``),t(null),n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{t(d?{type:l,value:d}:null),n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:`Apply`})]})]})},or=({filterValue:e,onApplyFilter:t,onClose:n,anchorEl:r,showAdvancedButton:i,onSwitchToAdvanced:a})=>{let o=ir(e)?null:e,s=o?.type||`equals`,c=o?.value||``,l=o?.value2||``,[u,d]=(0,b.useState)(s),[f,p]=(0,b.useState)(c),[m,h]=(0,b.useState)(l);return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:r?r.getBoundingClientRect().bottom+5:0,left:r?r.getBoundingClientRect().left:0,minWidth:`280px`,backgroundColor:`var(--grid-bg)`,boxShadow:`var(--grid-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))`,borderRadius:`var(--grid-border-radius, 8px)`,border:`1px solid var(--grid-border)`,padding:`16px`,zIndex:1e3},onClick:e=>e.stopPropagation(),children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Filter Type`}),(0,Y.jsxs)(`select`,{style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:u,onChange:e=>d(e.target.value),children:[(0,Y.jsx)(`option`,{value:`equals`,children:`Equals`}),(0,Y.jsx)(`option`,{value:`notEquals`,children:`Not Equals`}),(0,Y.jsx)(`option`,{value:`greaterThan`,children:`Greater Than`}),(0,Y.jsx)(`option`,{value:`greaterThanOrEqual`,children:`Greater Than or Equal`}),(0,Y.jsx)(`option`,{value:`lessThan`,children:`Less Than`}),(0,Y.jsx)(`option`,{value:`lessThanOrEqual`,children:`Less Than or Equal`}),(0,Y.jsx)(`option`,{value:`inRange`,children:`In Range`})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Value`}),(0,Y.jsx)(`input`,{type:`number`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:f,onChange:e=>p(e.target.value),placeholder:`Enter number...`,autoFocus:!0})]}),u===`inRange`&&(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`To`}),(0,Y.jsx)(`input`,{type:`number`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:m,onChange:e=>h(e.target.value),placeholder:`Enter max value...`})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{p(``),h(``),t(null),n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{if(f){let e={type:u,value:parseFloat(f)};u===`inRange`&&m&&(e.value2=parseFloat(m)),t(e)}else t(null);n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:`Apply`})]})]})},sr=({filterValue:e,onApplyFilter:t,onClose:n,anchorEl:r,showAdvancedButton:i,onSwitchToAdvanced:a})=>{let o=ir(e)?null:e,s=o?.type||`equals`,c=o?.value||``,l=o?.value2||``,[u,d]=(0,b.useState)(s),[f,p]=(0,b.useState)(c),[m,h]=(0,b.useState)(l);return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:r?r.getBoundingClientRect().bottom+5:0,left:r?r.getBoundingClientRect().left:0,minWidth:`280px`,backgroundColor:`var(--grid-bg)`,boxShadow:`var(--grid-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))`,borderRadius:`var(--grid-border-radius, 8px)`,border:`1px solid var(--grid-border)`,padding:`16px`,zIndex:1e3},onClick:e=>e.stopPropagation(),children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Filter Type`}),(0,Y.jsxs)(`select`,{style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:u,onChange:e=>d(e.target.value),children:[(0,Y.jsx)(`option`,{value:`equals`,children:`Equals`}),(0,Y.jsx)(`option`,{value:`before`,children:`Before`}),(0,Y.jsx)(`option`,{value:`after`,children:`After`}),(0,Y.jsx)(`option`,{value:`inRange`,children:`In Range`})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Date`}),(0,Y.jsx)(`input`,{type:`date`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:f,onChange:e=>p(e.target.value),autoFocus:!0})]}),u===`inRange`&&(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`To`}),(0,Y.jsx)(`input`,{type:`date`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:m,onChange:e=>h(e.target.value)})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{p(``),h(``),t(null),n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{if(f){let e={type:u,value:f};u===`inRange`&&m&&(e.value2=m),t(e)}else t(null);n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:`Apply`})]})]})},cr=({column:e,filterValue:t,onApplyFilter:n,onClose:r,rows:i,anchorEl:a,showAdvancedButton:o,onSwitchToAdvanced:s})=>{let c=Array.from(new Set(i.map(t=>t[e.field]).filter(e=>e!=null))),l=ir(t)?null:t,[u,d]=(0,b.useState)(l&&l.values?new Set(l.values):new Set),[f,p]=(0,b.useState)(``),m=c.filter(e=>String(e).toLowerCase().includes(f.toLowerCase())),h=e=>{let t=new Set(u);t.has(e)?t.delete(e):t.add(e),d(t)};return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:a?a.getBoundingClientRect().bottom+5:0,left:a?a.getBoundingClientRect().left:0,minWidth:`280px`,maxHeight:`400px`,backgroundColor:`var(--grid-bg)`,boxShadow:`var(--grid-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))`,borderRadius:`var(--grid-border-radius, 8px)`,border:`1px solid var(--grid-border)`,padding:`16px`,zIndex:1e3,display:`flex`,flexDirection:`column`},onClick:e=>e.stopPropagation(),children:[(0,Y.jsx)(`div`,{style:{marginBottom:`12px`},children:(0,Y.jsx)(`input`,{type:`text`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:f,onChange:e=>p(e.target.value),placeholder:`Search values...`,autoFocus:!0})}),(0,Y.jsx)(`div`,{style:{marginBottom:`8px`},children:(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`,padding:`8px`,borderRadius:`4px`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,children:[(0,Y.jsx)(`input`,{type:`checkbox`,checked:u.size===m.length&&m.length>0,onChange:()=>{u.size===m.length?d(new Set):d(new Set(m))},style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`},children:`(Select All)`})]})}),(0,Y.jsx)(`div`,{style:{flex:1,overflowY:`auto`,marginBottom:`12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,maxHeight:`200px`},children:m.map((e,t)=>(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`,padding:`8px`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,children:[(0,Y.jsx)(`input`,{type:`checkbox`,checked:u.has(e),onChange:()=>h(e),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`},children:String(e)})]},t))}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,justifyContent:`flex-end`,paddingTop:`8px`,borderTop:`1px solid var(--grid-border)`},children:[(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{d(new Set),n(null),r()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsxs)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{u.size>0?n({type:`set`,values:Array.from(u)}):n(null),r()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:[`Apply (`,u.size,`)`]})]})]})},lr=({column:e,filterValue:t,onApplyFilter:n,onClose:r,rows:i,anchorEl:a})=>(0,Y.jsx)(cr,{column:e,filterValue:t,onApplyFilter:n,onClose:r,rows:i,anchorEl:a});const ur=({columns:e,displayColumnOrder:t,columnWidths:n,filterConfig:r,dispatch:i,pinnedLeft:a,pinnedRight:o,rows:s,masterDetailConfig:c,dragRowConfig:l})=>{let[u,d]=(0,b.useState)(null),[f,p]=(0,b.useState)({}),[m,h]=(0,b.useState)(null),g=new Set(a),_=new Set(o),v={},y=0;a.forEach(e=>{v[e]=y,y+=n[e]||150});let x={},S=0;[...o].reverse().forEach(e=>{x[e]=S,S+=n[e]||150});let C=new Map(e.map(e=>[e.field,e])),w=e=>{let t={width:`${n[e]||150}px`};return g.has(e)?(t.position=`sticky`,t.left=`${v[e]}px`,t.zIndex=20,t.backgroundColor=`var(--grid-header-bg)`):_.has(e)&&(t.position=`sticky`,t.right=`${x[e]}px`,t.zIndex=20,t.backgroundColor=`var(--grid-header-bg)`),t},T=e=>{if(e.filterType)return e.filterType;let t=e.field.toLowerCase();return t.includes(`date`)||t.includes(`time`)?`date`:t.includes(`salary`)||t.includes(`price`)||t.includes(`amount`)||t.includes(`count`)?`number`:t.includes(`status`)||t.includes(`department`)||t.includes(`category`)?`set`:`text`},E=(e,t)=>{t.stopPropagation();let n=r[e];ir(n)||t.shiftKey?(p({...f,[e]:t.currentTarget}),h(e),d(null)):(p({...f,[e]:t.currentTarget}),d(e),h(null))},D=()=>{d(null),h(null)},O=(e,t)=>{i({type:`SET_FILTER`,payload:{field:e,value:t}})},k=e=>{d(null),h(e)};(0,b.useEffect)(()=>{let e=()=>{u&&d(null)};if(u)return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)},[u]);let A=e=>{let t=T(e),n={column:e,filterValue:r[e.field],onApplyFilter:t=>O(e.field,t),onClose:D,rows:s,anchorEl:f[e.field],showAdvancedButton:!0,onSwitchToAdvanced:()=>k(e.field)};switch(t){case`number`:return(0,Y.jsx)(or,{...n});case`date`:return(0,Y.jsx)(sr,{...n});case`set`:return(0,Y.jsx)(cr,{...n});case`multi`:return(0,Y.jsx)(lr,{...n});default:return(0,Y.jsx)(ar,{...n})}},j=e=>{let t=r[e.field],n=f[e.field];return(0,Y.jsx)(rr,{column:e,filterValue:ir(t)?t:null,onApply:t=>O(e.field,t),onClose:D,rows:s,anchorEl:n})},M=e=>{let t=r[e];if(!t)return``;if(ir(t)){let e=t.conditions.length;return`${e} condition${e>1?`s`:``} (${t.operator})`}return t.type===`set`&&t.values?`${t.values.length} selected`:t.type===`inRange`?`${t.value} - ${t.value2}`:String(t.value||``)},N=e=>!!r[e];return(0,Y.jsx)(Y.Fragment,{children:(0,Y.jsxs)(`div`,{style:{display:`flex`,minWidth:`100%`,borderBottom:`1px solid var(--grid-border)`,backgroundColor:`var(--grid-header-bg)`},children:[c?.enabled&&(0,Y.jsx)(`div`,{style:{width:`48px`,flexShrink:0,borderRight:`1px solid var(--grid-border)`,minHeight:`38px`}}),l?.enabled&&l.showDragHandle!==!1&&l.dragHandlePosition===`left`&&(0,Y.jsx)(`div`,{style:{width:`32px`,flexShrink:0,borderRight:`1px solid var(--grid-border)`,minHeight:`38px`}}),t.map(e=>{let t=C.get(e);if(!t||t.filterable===!1)return(0,Y.jsx)(`div`,{style:{...w(e),borderRight:`1px solid var(--grid-border)`,flexShrink:0,minHeight:`38px`}},e);let n=N(e);return(0,Y.jsxs)(`div`,{style:{...w(e),borderRight:`1px solid var(--grid-border)`,flexShrink:0,padding:`6px 8px`,position:`relative`,display:`flex`,alignItems:`center`},children:[(0,Y.jsx)(`div`,{style:{width:`100%`,cursor:`pointer`},onClick:t=>E(e,t),title:`Click to filter, Shift+Click for advanced filter`,children:(0,Y.jsxs)(`div`,{style:{width:`100%`,padding:`4px 8px`,fontSize:`var(--grid-font-size-sm, 12px)`,border:`1px solid`,borderColor:n?`var(--grid-primary)`:`var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,backgroundColor:n?`var(--grid-primary-bg)`:`var(--grid-bg)`,color:n?`var(--grid-primary)`:`var(--grid-text-secondary)`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:`6px`,transition:`border-color 0.15s`},onMouseEnter:e=>{n||(e.currentTarget.style.borderColor=`var(--grid-border-hover)`)},onMouseLeave:e=>{n||(e.currentTarget.style.borderColor=`var(--grid-border)`)},children:[(0,Y.jsx)(`span`,{style:{flex:1,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:n?M(e):`Filter...`}),(0,Y.jsx)(`svg`,{style:{flexShrink:0,color:n?`var(--grid-primary)`:`var(--grid-text-muted)`},width:`12`,height:`12`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,strokeWidth:`2.5`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,d:`M3 4h18v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V20l-4-2v-3.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z`})})]})}),u===e&&A(t),m===e&&j(t)]},e)})]})})},dr=({manager:e,currentLayout:t,onLoadPreset:n,onResetLayout:r})=>{let[i,a]=(0,b.useState)([]),[o,s]=(0,b.useState)(!1),[c,l]=(0,b.useState)(!1),[u,d]=(0,b.useState)(``),[f,p]=(0,b.useState)(``),[m,h]=(0,b.useState)(!1),[g,_]=(0,b.useState)(null),v=(0,b.useCallback)(async()=>{try{h(!0),a((await e.listPresets()).filter(e=>e.id!==`__autosave__`)),_(null)}catch(e){_(`Failed to load presets`),console.error(e)}finally{h(!1)}},[e]);(0,b.useEffect)(()=>{v()},[v]);let y=async()=>{if(!u.trim()){_(`Please enter a preset name`);return}try{h(!0);let{createPreset:n}=await w(async()=>{let{createPreset:e}=await import(`./layoutPersistence-BB--01xS.js`);return{createPreset:e}},[]),r=n(u.trim(),t,f.trim());await e.savePreset(r),await v(),l(!1),d(``),p(``),_(null)}catch(e){_(`Failed to save preset`),console.error(e)}finally{h(!1)}},x=async t=>{try{h(!0);let r=await e.loadPreset(t);r&&(n(r.layout),s(!1),_(null))}catch(e){_(`Failed to load preset`),console.error(e)}finally{h(!1)}},S=async(t,n)=>{if(n.stopPropagation(),confirm(`Are you sure you want to delete this preset?`))try{h(!0),await e.deletePreset(t),await v(),_(null)}catch(e){_(`Failed to delete preset`),console.error(e)}finally{h(!1)}},C=async(n,r)=>{if(r.stopPropagation(),confirm(`Update this preset with current layout?`))try{h(!0);let r={...n,layout:t};await e.savePreset(r),await v(),_(null)}catch(e){_(`Failed to update preset`),console.error(e)}finally{h(!1)}},T=e=>new Date(e).toLocaleString();return(0,Y.jsxs)(`div`,{className:`relative inline-block`,children:[(0,Y.jsxs)(`button`,{onClick:()=>s(!o),style:{padding:`6px 12px`,fontSize:`14px`,backgroundColor:`white`,border:`1px solid #d1d5db`,borderRadius:`4px`,cursor:`pointer`,display:`flex`,alignItems:`center`,gap:`8px`},disabled:m,children:[(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`,flexShrink:0},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M4 7h16M4 12h16M4 17h16`})}),`Layout Presets`,(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`,flexShrink:0,transform:o?`rotate(180deg)`:`rotate(0deg)`,transition:`transform 0.2s`},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M19 9l-7 7-7-7`})})]}),o&&(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(`div`,{style:{position:`fixed`,inset:0,zIndex:10},onClick:()=>s(!1)}),(0,Y.jsxs)(`div`,{style:{position:`absolute`,right:0,marginTop:`8px`,width:`320px`,backgroundColor:`white`,border:`1px solid #d1d5db`,borderRadius:`8px`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1)`,zIndex:20,maxHeight:`384px`,overflowY:`auto`},children:[(0,Y.jsx)(`div`,{style:{padding:`12px`,borderBottom:`1px solid #e5e7eb`,backgroundColor:`#f9fafb`},children:(0,Y.jsx)(`h3`,{style:{fontWeight:`600`,fontSize:`14px`,color:`#111827`},children:`Layout Presets`})}),g&&(0,Y.jsx)(`div`,{style:{padding:`12px`,backgroundColor:`#fef2f2`,borderBottom:`1px solid #fecaca`},children:(0,Y.jsx)(`p`,{style:{fontSize:`14px`,color:`#dc2626`},children:g})}),(0,Y.jsxs)(`div`,{style:{padding:`8px`,borderBottom:`1px solid #e5e7eb`,display:`flex`,gap:`8px`},children:[(0,Y.jsxs)(`button`,{onClick:()=>{l(!0),s(!1)},style:{flex:1,padding:`8px 12px`,fontSize:`14px`,backgroundColor:`#2563eb`,color:`white`,border:`none`,borderRadius:`4px`,cursor:`pointer`,display:`flex`,alignItems:`center`,justifyContent:`center`,gap:`8px`},children:[(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`,flexShrink:0},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4`})}),`Save Current`]}),(0,Y.jsxs)(`button`,{onClick:()=>{r(),s(!1)},style:{flex:1,padding:`8px 12px`,fontSize:`14px`,backgroundColor:`#4b5563`,color:`white`,border:`none`,borderRadius:`4px`,cursor:`pointer`,display:`flex`,alignItems:`center`,justifyContent:`center`,gap:`8px`},children:[(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`,flexShrink:0},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15`})}),`Reset`]})]}),(0,Y.jsx)(`div`,{style:{maxHeight:`256px`,overflowY:`auto`},children:m&&i.length===0?(0,Y.jsx)(`div`,{style:{padding:`16px`,textAlign:`center`,color:`#6b7280`,fontSize:`14px`},children:`Loading presets...`}):i.length===0?(0,Y.jsx)(`div`,{style:{padding:`16px`,textAlign:`center`,color:`#6b7280`,fontSize:`14px`},children:`No saved presets. Save your current layout to get started.`}):(0,Y.jsx)(`div`,{children:i.map(e=>(0,Y.jsx)(`div`,{style:{padding:`12px`,cursor:`pointer`,borderBottom:`1px solid #e5e7eb`},onClick:()=>x(e.id),onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`#f9fafb`;let t=e.currentTarget.querySelector(`.preset-actions`);t&&(t.style.opacity=`1`)},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`transparent`;let t=e.currentTarget.querySelector(`.preset-actions`);t&&(t.style.opacity=`0`)},children:(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`flex-start`,justifyContent:`space-between`},children:[(0,Y.jsxs)(`div`,{style:{flex:1,minWidth:0},children:[(0,Y.jsx)(`h4`,{style:{fontSize:`14px`,fontWeight:`500`,color:`#111827`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.name}),e.description&&(0,Y.jsx)(`p`,{style:{fontSize:`12px`,color:`#6b7280`,marginTop:`4px`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.description}),(0,Y.jsxs)(`p`,{style:{fontSize:`12px`,color:`#9ca3af`,marginTop:`4px`},children:[`Updated: `,T(e.updatedAt)]})]}),(0,Y.jsxs)(`div`,{className:`preset-actions`,style:{display:`flex`,gap:`4px`,marginLeft:`8px`,opacity:0,transition:`opacity 0.2s`},children:[(0,Y.jsx)(`button`,{onClick:t=>C(e,t),style:{padding:`4px`,color:`#2563eb`,backgroundColor:`transparent`,border:`none`,borderRadius:`4px`,cursor:`pointer`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`#eff6ff`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,title:`Update with current layout`,children:(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15`})})}),(0,Y.jsx)(`button`,{onClick:t=>S(e.id,t),style:{padding:`4px`,color:`#dc2626`,backgroundColor:`transparent`,border:`none`,borderRadius:`4px`,cursor:`pointer`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`#fef2f2`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,title:`Delete preset`,children:(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16`})})})]})]})},e.id))})})]})]}),c&&(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(`div`,{style:{position:`fixed`,inset:0,backgroundColor:`rgba(0, 0, 0, 0.5)`,zIndex:30,display:`flex`,alignItems:`center`,justifyContent:`center`},onClick:()=>l(!1)}),(0,Y.jsx)(`div`,{style:{position:`fixed`,inset:0,zIndex:40,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:`16px`},children:(0,Y.jsxs)(`div`,{style:{backgroundColor:`white`,borderRadius:`8px`,boxShadow:`0 25px 50px -12px rgba(0, 0, 0, 0.25)`,maxWidth:`448px`,width:`100%`,padding:`24px`},onClick:e=>e.stopPropagation(),children:[(0,Y.jsx)(`h2`,{style:{fontSize:`20px`,fontWeight:`600`,marginBottom:`16px`},children:`Save Layout Preset`}),g&&(0,Y.jsx)(`div`,{style:{marginBottom:`16px`,padding:`12px`,backgroundColor:`#fef2f2`,border:`1px solid #fecaca`,borderRadius:`4px`},children:(0,Y.jsx)(`p`,{style:{fontSize:`14px`,color:`#dc2626`},children:g})}),(0,Y.jsxs)(`div`,{children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`16px`},children:[(0,Y.jsx)(`label`,{htmlFor:`preset-name`,style:{display:`block`,fontSize:`14px`,fontWeight:`500`,color:`#374151`,marginBottom:`4px`},children:`Preset Name *`}),(0,Y.jsx)(`input`,{id:`preset-name`,type:`text`,value:u,onChange:e=>d(e.target.value),style:{width:`100%`,padding:`8px 12px`,border:`1px solid #d1d5db`,borderRadius:`4px`,fontSize:`14px`},placeholder:`e.g., Sales Dashboard Layout`,autoFocus:!0})]}),(0,Y.jsxs)(`div`,{children:[(0,Y.jsx)(`label`,{htmlFor:`preset-description`,style:{display:`block`,fontSize:`14px`,fontWeight:`500`,color:`#374151`,marginBottom:`4px`},children:`Description (optional)`}),(0,Y.jsx)(`textarea`,{id:`preset-description`,value:f,onChange:e=>p(e.target.value),style:{width:`100%`,padding:`8px 12px`,border:`1px solid #d1d5db`,borderRadius:`4px`,fontSize:`14px`},placeholder:`Add a description...`,rows:3})]})]}),(0,Y.jsxs)(`div`,{style:{marginTop:`24px`,display:`flex`,gap:`12px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{onClick:()=>{l(!1),d(``),p(``),_(null)},style:{padding:`8px 16px`,fontSize:`14px`,color:`#374151`,backgroundColor:`#f3f4f6`,border:`none`,borderRadius:`4px`,cursor:`pointer`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`#e5e7eb`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`#f3f4f6`,disabled:m,children:`Cancel`}),(0,Y.jsx)(`button`,{onClick:y,style:{padding:`8px 16px`,fontSize:`14px`,color:`white`,backgroundColor:`#2563eb`,border:`none`,borderRadius:`4px`,cursor:`pointer`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`#1d4ed8`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`#2563eb`,disabled:m,children:m?`Saving...`:`Save Preset`})]})]})})]})]})},fr=({x:e,y:t,items:n,onClose:r})=>{let i=(0,b.useRef)(null),[a,o]=b.useState(null);(0,b.useEffect)(()=>{let e=e=>{i.current&&!i.current.contains(e.target)&&r()},t=e=>{i.current&&!i.current.contains(e.target)&&(e.preventDefault(),r())},n=setTimeout(()=>{document.addEventListener(`mousedown`,e),document.addEventListener(`contextmenu`,t)},100);return()=>{clearTimeout(n),document.removeEventListener(`mousedown`,e),document.removeEventListener(`contextmenu`,t)}},[r]),(0,b.useEffect)(()=>{let e=e=>{e.key===`Escape`&&r()};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[r]),(0,b.useEffect)(()=>{if(i.current){let n=i.current,r=n.getBoundingClientRect(),a=window.innerWidth,o=window.innerHeight,s=e,c=t;r.right>a&&(s=a-r.width-10),r.bottom>o&&(c=o-r.height-10),(s!==e||c!==t)&&(n.style.left=`${s}px`,n.style.top=`${c}px`)}},[e,t]);let s=(0,b.useCallback)(e=>{if(!e.disabled){if(e.submenu){o(a===e.id?null:e.id||null);return}e.onClick&&e.onClick(),r()}},[r,a]),c=(e,t)=>e.type===`separator`?(0,Y.jsx)(`div`,{className:`context-menu-separator`,role:`separator`},`separator-${t}`):(0,Y.jsxs)(`div`,{className:`context-menu-item-wrapper`,children:[(0,Y.jsxs)(`div`,{className:`context-menu-item ${e.disabled?`disabled`:``} ${e.danger?`danger`:``} ${e.submenu?`has-submenu`:``}`,onClick:()=>s(e),role:`menuitem`,"aria-disabled":e.disabled,tabIndex:e.disabled?-1:0,children:[e.icon&&(0,Y.jsx)(`span`,{className:`context-menu-icon`,children:e.icon}),(0,Y.jsx)(`span`,{className:`context-menu-label`,children:e.label}),e.shortcut&&(0,Y.jsx)(`span`,{className:`context-menu-shortcut`,children:e.shortcut}),e.submenu&&(0,Y.jsx)(`span`,{className:`context-menu-arrow`,children:`▶`})]}),e.submenu&&a===e.id&&(0,Y.jsx)(`div`,{className:`context-menu-submenu`,children:e.submenu.map((e,t)=>c(e,t))})]},e.id||t);return(0,Y.jsx)(`div`,{ref:i,className:`context-menu`,style:{left:e,top:t},role:`menu`,"aria-label":`Context menu`,children:n.map((e,t)=>c(e,t))})},pr=async(e,t,n,r=!1)=>{let i=Array.from(e),a=n.filter(e=>i.includes(e.id));if(a.length===0)return;let o=``;r&&(o+=t.map(e=>e.headerName).join(` `)+`
|
|
40
|
+
`);Jn(new Blob([a],{type:`text/csv;charset=utf-8;`}),n)},Kn=async(e,t,n={})=>{let{filename:r=`export.xlsx`,styling:i=`basic`}=n,a=new Wn.default.Workbook,o=a.addWorksheet(`Sheet1`),s=t.map(e=>e.headerName);o.addRow(s),e.forEach(e=>{let n=t.map(t=>e[t.field]??``);o.addRow(n)}),o.columns=t.map(t=>{let n=t.headerName.length,r=Math.max(...e.map(e=>String(e[t.field]??``).length)),i=Math.max(n,r)+2;return{width:Math.min(i,50)}}),i===`professional`&&qn(o,t);let c=await a.xlsx.writeBuffer();Jn(new Blob([c],{type:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`}),r)};var qn=(e,t)=>{let n=e.getRow(1);n.font={bold:!0,color:{argb:`FFFFFFFF`},size:11},n.fill={type:`pattern`,pattern:`solid`,fgColor:{argb:`FF2F5496`}},n.alignment={horizontal:`center`,vertical:`middle`,wrapText:!0},n.height=20,e.eachRow((e,t)=>{e.eachCell(e=>{e.border={top:{style:`thin`,color:{argb:`FFD3D3D3`}},left:{style:`thin`,color:{argb:`FFD3D3D3`}},bottom:{style:`thin`,color:{argb:`FFD3D3D3`}},right:{style:`thin`,color:{argb:`FFD3D3D3`}}},t>1&&t%2==0&&(e.fill={type:`pattern`,pattern:`solid`,fgColor:{argb:`FFF2F2F2`}}),t>1&&(e.alignment={horizontal:`left`,vertical:`middle`})})}),e.views=[{state:`frozen`,ySplit:1}]},Jn=(e,t)=>{let n=URL.createObjectURL(e),r=document.createElement(`a`);r.href=n,r.download=t,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(n)};const Yn=(e,t)=>{let n=new Date().toISOString().replace(/[:.]/g,`-`).slice(0,-5);return`data_export_${t===`all`?`full`:t}_${n}.${e}`},Xn=async(e,t,n)=>{if(e.length===0){alert(`No data to export`);return}let r=n.filename||Yn(n.format,n.scope);n.format===`csv`?Gn(e,t,r):n.format===`xlsx`&&await Kn(e,t,{filename:r,styling:n.styling})},Zn=({columns:e,fullDataset:t,filteredData:n,selectedRows:r,currentPageData:i,onExport:a})=>{let[o,s]=(0,b.useState)(!1),[c,l]=(0,b.useState)(`csv`),[u,d]=(0,b.useState)(`filtered`),[f,p]=(0,b.useState)(`basic`),[m,h]=(0,b.useState)(null),g=b.useRef(null),_=()=>{switch(u){case`all`:return t;case`filtered`:return n;case`selected`:return r.size>0?n.filter(e=>r.has(e.id)):[];case`page`:return i;default:return n}},v=()=>{let t=_();if(t.length===0){alert(`No ${u===`selected`?`selected`:u} data to export`);return}Xn(t,e,{format:c,scope:u,styling:c===`xlsx`?f:void 0}),a?.(!0),s(!1)},y=[{value:`all`,label:`Full Dataset`,disabled:!1},{value:`filtered`,label:`Filtered Data`,disabled:n.length===0},{value:`selected`,label:`Selected Rows (${r.size})`,disabled:r.size===0},{value:`page`,label:`Current Page`,disabled:i.length===0}];return(0,Y.jsxs)(`div`,{style:{position:`relative`},children:[(0,Y.jsxs)(`button`,{ref:g,onClick:()=>{if(!o){let e=g.current?.getBoundingClientRect();e&&h(e)}s(!o)},style:{padding:`8px 12px`,backgroundColor:`#2563eb`,color:`white`,borderRadius:`6px`,border:`none`,fontSize:`14px`,fontWeight:`500`,display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`,transition:`background-color 0.2s`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`#1d4ed8`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`#2563eb`},title:`Export data to CSV or XLSX format`,children:[(0,Y.jsx)(`svg`,{style:{width:`16px`,height:`16px`},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M12 19l9 2-9-18-9 18 9-2m0 0v-8m0 8l-6-4m6 4l6-4`})}),`Export`]}),o&&m&&(0,Y.jsxs)(`div`,{style:{position:`fixed`,left:`${m.left}px`,top:`${m.bottom+8}px`,backgroundColor:`#ffffff`,border:`1px solid #e5e7eb`,borderRadius:`8px`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)`,zIndex:50,padding:`20px`,width:`420px`,minWidth:`420px`,maxWidth:`420px`,maxHeight:`90vh`,overflowY:`auto`},children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`20px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`14px`,fontWeight:`600`,color:`#1f2937`,marginBottom:`12px`},children:`Format`}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`format`,value:`csv`,checked:c===`csv`,onChange:e=>l(e.target.value),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:`CSV`})]}),(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`format`,value:`xlsx`,checked:c===`xlsx`,onChange:e=>l(e.target.value),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:`XLSX (Excel)`})]})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`20px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`14px`,fontWeight:`600`,color:`#1f2937`,marginBottom:`12px`},children:`Data Scope`}),(0,Y.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`10px`},children:y.map(e=>(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`10px`,padding:`10px 12px`,borderRadius:`6px`,cursor:e.disabled?`not-allowed`:`pointer`,opacity:e.disabled?.5:1,backgroundColor:`transparent`,transition:`background-color 0.15s`,userSelect:`none`},onMouseEnter:t=>{e.disabled||(t.currentTarget.style.backgroundColor=`#f3f4f6`)},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`transparent`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`scope`,value:e.value,checked:u===e.value,onChange:e=>d(e.target.value),disabled:e.disabled,style:{width:`16px`,height:`16px`,cursor:e.disabled?`not-allowed`:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:e.label})]},e.value))})]}),c===`xlsx`&&(0,Y.jsxs)(`div`,{style:{marginBottom:`20px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`14px`,fontWeight:`600`,color:`#1f2937`,marginBottom:`12px`},children:`Styling`}),(0,Y.jsx)(`div`,{style:{marginBottom:`10px`},children:(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`styling`,value:`basic`,checked:f===`basic`,onChange:e=>p(e.target.value),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:`Basic`})]}),(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`},children:[(0,Y.jsx)(`input`,{type:`radio`,name:`styling`,value:`professional`,checked:f===`professional`,onChange:e=>p(e.target.value),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`14px`,color:`#374151`},children:`Professional`})]})]})}),(0,Y.jsx)(`p`,{style:{fontSize:`12px`,color:`#6b7280`,margin:`0`},children:`Professional adds colors, borders, and frozen header row`})]}),(0,Y.jsxs)(`div`,{style:{backgroundColor:`#f3f4f6`,borderRadius:`6px`,padding:`12px`,marginBottom:`20px`,fontSize:`13px`,color:`#4b5563`},children:[(0,Y.jsxs)(`p`,{style:{margin:`6px 0`},children:[(0,Y.jsx)(`strong`,{children:`Data to export:`}),` `,_().length,` row(s)`]}),(0,Y.jsxs)(`p`,{style:{margin:`6px 0`},children:[(0,Y.jsx)(`strong`,{children:`Columns:`}),` `,e.length]})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`10px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{onClick:()=>s(!1),style:{padding:`10px 16px`,border:`1px solid #d1d5db`,color:`#374151`,backgroundColor:`#ffffff`,borderRadius:`6px`,fontSize:`14px`,fontWeight:`500`,cursor:`pointer`,transition:`background-color 0.2s`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`#f9fafb`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`#ffffff`},children:`Cancel`}),(0,Y.jsx)(`button`,{onClick:v,disabled:_().length===0,style:{padding:`10px 16px`,backgroundColor:_().length===0?`#9ca3af`:`#2563eb`,color:`#ffffff`,borderRadius:`6px`,border:`none`,fontSize:`14px`,fontWeight:`500`,cursor:_().length===0?`not-allowed`:`pointer`,opacity:_().length===0?.6:1,transition:`background-color 0.2s`},onMouseEnter:e=>{_().length>0&&(e.currentTarget.style.backgroundColor=`#1d4ed8`)},onMouseLeave:e=>{_().length>0&&(e.currentTarget.style.backgroundColor=`#2563eb`)},children:`Export Now`})]})]}),o&&(0,Y.jsx)(`div`,{style:{position:`fixed`,inset:0,zIndex:40},onClick:()=>s(!1)})]})};var Qn=e=>{if(e.filterType)return e.filterType===`multi`?`set`:e.filterType;let t=e.field.toLowerCase();return t.includes(`date`)||t.includes(`time`)?`date`:t.includes(`salary`)||t.includes(`price`)||t.includes(`amount`)||t.includes(`count`)?`number`:t.includes(`status`)||t.includes(`department`)||t.includes(`category`)?`set`:`text`},$n=e=>{switch(e){case`text`:return[{value:`contains`,label:`Contains`},{value:`notContains`,label:`Not Contains`},{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Not Equals`},{value:`startsWith`,label:`Starts With`},{value:`endsWith`,label:`Ends With`},{value:`isEmpty`,label:`Is Empty`},{value:`isNotEmpty`,label:`Is Not Empty`}];case`number`:return[{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Not Equals`},{value:`greaterThan`,label:`Greater Than`},{value:`greaterThanOrEqual`,label:`Greater Than or Equal`},{value:`lessThan`,label:`Less Than`},{value:`lessThanOrEqual`,label:`Less Than or Equal`},{value:`inRange`,label:`In Range`},{value:`isEmpty`,label:`Is Empty`},{value:`isNotEmpty`,label:`Is Not Empty`}];case`date`:return[{value:`equals`,label:`Equals`},{value:`before`,label:`Before`},{value:`after`,label:`After`},{value:`inRange`,label:`In Range`},{value:`isEmpty`,label:`Is Empty`},{value:`isNotEmpty`,label:`Is Not Empty`}];case`set`:return[{value:`in`,label:`In`},{value:`notIn`,label:`Not In`}];default:return[]}},er=e=>![`isEmpty`,`isNotEmpty`].includes(e),tr=e=>e===`inRange`,nr=e=>[`in`,`notIn`].includes(e);const rr=({column:e,filterValue:t,onApply:n,onClose:r,rows:i,anchorEl:a})=>{let o=Qn(e),s=$n(o),c=t?.conditions||[{type:s[0]?.value||`contains`,value:``,value2:``,values:[]}],[l,u]=(0,b.useState)(t?.operator||`AND`),[d,f]=(0,b.useState)(c),[p,m]=(0,b.useState)({}),h=o===`set`?Array.from(new Set(i.map(t=>t[e.field]).filter(e=>e!=null))):[],g=()=>{f([...d,{type:s[0]?.value||`contains`,value:``,value2:``,values:[]}])},_=e=>{if(d.length>1){f(d.filter((t,n)=>n!==e));let t={...p};delete t[e],m(t)}},v=(e,t)=>{f(d.map((n,r)=>r===e?{...n,...t}:n))},y=(e,t)=>{m({...p,[e]:t})},x=()=>{let e=d.filter(e=>er(e.type)?nr(e.type)?e.values&&e.values.length>0:tr(e.type)?e.value!=null&&e.value!==``&&e.value2!=null&&e.value2!==``:e.value!=null&&e.value!==``:!0);e.length===0?n(null):n({operator:l,conditions:e}),r()},S=()=>{f([{type:s[0]?.value||`contains`,value:``,value2:``,values:[]}]),m({}),n(null)},C=()=>{f([{type:s[0]?.value||`contains`,value:``,value2:``,values:[]}]),u(`AND`),m({})},w=(e,t)=>{if(nr(e.type)){let n=new Set(e.values||[]),r=p[t]?.searchTerm||``,i=h.filter(e=>String(e).toLowerCase().includes(r.toLowerCase())),a=e=>{let r=new Set(n);r.has(e)?r.delete(e):r.add(e),v(t,{values:Array.from(r)})};return(0,Y.jsxs)(`div`,{style:{marginTop:`8px`},children:[(0,Y.jsx)(`input`,{type:`text`,style:{width:`100%`,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`,marginBottom:`8px`},value:r,onChange:e=>y(t,{searchTerm:e.target.value}),placeholder:`Search values...`}),(0,Y.jsxs)(`div`,{style:{maxHeight:`150px`,overflowY:`auto`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,padding:`4px`},children:[(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`6px`,cursor:`pointer`,padding:`4px 6px`,fontSize:`var(--grid-font-size-sm, 12px)`},children:[(0,Y.jsx)(`input`,{type:`checkbox`,checked:n.size===i.length&&i.length>0,onChange:()=>{n.size===i.length?v(t,{values:[]}):v(t,{values:i})},style:{width:`14px`,height:`14px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontWeight:500,color:`var(--grid-text)`},children:`(Select All)`})]}),i.map((e,t)=>(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`6px`,cursor:`pointer`,padding:`4px 6px`,fontSize:`var(--grid-font-size-sm, 12px)`},children:[(0,Y.jsx)(`input`,{type:`checkbox`,checked:n.has(e),onChange:()=>a(e),style:{width:`14px`,height:`14px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{color:`var(--grid-text)`},children:String(e)})]},t))]}),n.size>0&&(0,Y.jsxs)(`div`,{style:{marginTop:`6px`,fontSize:`var(--grid-font-size-sm, 12px)`,color:`var(--grid-primary)`,fontWeight:500},children:[n.size,` selected`]})]})}return er(e.type)?tr(e.type)?(0,Y.jsxs)(`div`,{style:{marginTop:`8px`,display:`flex`,gap:`8px`,alignItems:`center`},children:[(0,Y.jsx)(`input`,{type:o===`date`?`date`:o===`number`?`number`:`text`,style:{flex:1,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:e.value||``,onChange:e=>v(t,{value:e.target.value}),placeholder:`From`}),(0,Y.jsx)(`span`,{style:{color:`var(--grid-text-secondary)`,fontSize:`var(--grid-font-size-sm, 12px)`},children:`to`}),(0,Y.jsx)(`input`,{type:o===`date`?`date`:o===`number`?`number`:`text`,style:{flex:1,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:e.value2||``,onChange:e=>v(t,{value2:e.target.value}),placeholder:`To`})]}):(0,Y.jsx)(`div`,{style:{marginTop:`8px`},children:(0,Y.jsx)(`input`,{type:o===`date`?`date`:o===`number`?`number`:`text`,style:{width:`100%`,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:e.value||``,onChange:e=>v(t,{value:e.target.value}),placeholder:`Enter ${o}...`})}):null};return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:a?a.getBoundingClientRect().bottom+5:0,left:a?a.getBoundingClientRect().left:0,minWidth:`380px`,maxWidth:`450px`,maxHeight:`600px`,backgroundColor:`var(--grid-bg)`,boxShadow:`0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1)`,borderRadius:`var(--grid-border-radius, 8px)`,border:`1px solid var(--grid-border)`,padding:`16px`,zIndex:1001,display:`flex`,flexDirection:`column`,overflowY:`auto`},onClick:e=>e.stopPropagation(),children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`16px`,paddingBottom:`12px`,borderBottom:`1px solid var(--grid-border)`},children:[(0,Y.jsxs)(`h4`,{style:{margin:0,fontSize:`var(--grid-font-size, 14px)`,fontWeight:600,color:`var(--grid-text)`},children:[`Advanced Filter: `,e.headerName]}),(0,Y.jsx)(`p`,{style:{margin:`4px 0 0 0`,fontSize:`var(--grid-font-size-sm, 12px)`,color:`var(--grid-text-secondary)`},children:`Add multiple conditions with AND/OR logic`})]}),d.length>1&&(0,Y.jsxs)(`div`,{style:{marginBottom:`16px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`6px`},children:`Combine Conditions`}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`},children:[(0,Y.jsx)(`button`,{style:{flex:1,padding:`6px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:l===`AND`?`var(--grid-text-inverse)`:`var(--grid-text)`,backgroundColor:l===`AND`?`var(--grid-primary)`:`var(--grid-bg-alt)`,border:l===`AND`?`none`:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:()=>u(`AND`),children:`AND`}),(0,Y.jsx)(`button`,{style:{flex:1,padding:`6px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:l===`OR`?`var(--grid-text-inverse)`:`var(--grid-text)`,backgroundColor:l===`OR`?`var(--grid-primary)`:`var(--grid-bg-alt)`,border:l===`OR`?`none`:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:()=>u(`OR`),children:`OR`})]})]}),(0,Y.jsx)(`div`,{style:{flex:1,overflowY:`auto`,marginBottom:`12px`},children:d.map((e,t)=>(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`,padding:`12px`,backgroundColor:`var(--grid-bg-alt)`,borderRadius:`var(--grid-border-radius, 6px)`,border:`1px solid var(--grid-border)`},children:[(0,Y.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`8px`},children:[(0,Y.jsxs)(`label`,{style:{fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text)`},children:[`Condition `,t+1]}),d.length>1&&(0,Y.jsx)(`button`,{style:{padding:`2px 8px`,fontSize:`var(--grid-font-size-sm, 12px)`,color:`var(--grid-danger, #dc2626)`,backgroundColor:`transparent`,border:`none`,cursor:`pointer`,borderRadius:`var(--grid-border-radius, 4px)`},onClick:()=>_(t),onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-danger-bg, rgba(220, 38, 38, 0.1))`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,title:`Remove condition`,children:`✕`})]}),(0,Y.jsx)(`select`,{style:{width:`100%`,padding:`6px 10px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,fontSize:`var(--grid-font-size-sm, 12px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:e.type,onChange:e=>v(t,{type:e.target.value,value:``,value2:``,values:[]}),children:s.map(e=>(0,Y.jsx)(`option`,{value:e.value,children:e.label},e.value))}),w(e,t),t<d.length-1&&d.length>1&&(0,Y.jsx)(`div`,{style:{marginTop:`12px`,padding:`4px 8px`,textAlign:`center`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:600,color:`var(--grid-primary)`,backgroundColor:`var(--grid-primary-bg)`,borderRadius:`var(--grid-border-radius, 4px)`},children:l})]},t))}),(0,Y.jsx)(`button`,{style:{width:`100%`,padding:`8px 12px`,marginBottom:`12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-primary)`,backgroundColor:`var(--grid-primary-bg)`,border:`1px dashed var(--grid-primary)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:g,onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover-bg)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-bg)`,children:`+ Add Condition`}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,paddingTop:`12px`,borderTop:`1px solid var(--grid-border)`},children:[(0,Y.jsx)(`button`,{style:{flex:1,padding:`8px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:C,onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Reset`}),(0,Y.jsx)(`button`,{style:{flex:1,padding:`8px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:S,onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsx)(`button`,{style:{flex:1,padding:`8px 12px`,fontSize:`var(--grid-font-size-sm, 12px)`,fontWeight:500,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`,transition:`all 0.15s`},onClick:x,onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:`Apply`})]})]})};var ir=e=>e!=null&&`operator`in e&&`conditions`in e,ar=({filterValue:e,onApplyFilter:t,onClose:n,anchorEl:r,showAdvancedButton:i,onSwitchToAdvanced:a})=>{let o=ir(e)?null:e,s=o?.type||`contains`,c=o?.value||``,[l,u]=(0,b.useState)(s),[d,f]=(0,b.useState)(c);return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:r?r.getBoundingClientRect().bottom+5:0,left:r?r.getBoundingClientRect().left:0,minWidth:`280px`,backgroundColor:`var(--grid-bg)`,boxShadow:`var(--grid-shadow-medium, 0 10px 15px -3px rgba(0, 0, 0, 0.1))`,borderRadius:`var(--grid-border-radius, 8px)`,border:`var(--grid-border-width, 1px) solid var(--grid-border)`,padding:`16px`,zIndex:1e3},onClick:e=>e.stopPropagation(),children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Filter Type`}),(0,Y.jsxs)(`select`,{style:{width:`100%`,padding:`8px 12px`,border:`var(--grid-border-width, 1px) solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:l,onChange:e=>u(e.target.value),children:[(0,Y.jsx)(`option`,{value:`contains`,children:`Contains`}),(0,Y.jsx)(`option`,{value:`notContains`,children:`Not Contains`}),(0,Y.jsx)(`option`,{value:`equals`,children:`Equals`}),(0,Y.jsx)(`option`,{value:`startsWith`,children:`Starts With`}),(0,Y.jsx)(`option`,{value:`endsWith`,children:`Ends With`})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Value`}),(0,Y.jsx)(`input`,{type:`text`,style:{width:`100%`,padding:`8px 12px`,border:`var(--grid-border-width, 1px) solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:d,onChange:e=>f(e.target.value),placeholder:`Enter text...`,autoFocus:!0})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{f(``),t(null),n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{t(d?{type:l,value:d}:null),n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:`Apply`})]})]})},or=({filterValue:e,onApplyFilter:t,onClose:n,anchorEl:r,showAdvancedButton:i,onSwitchToAdvanced:a})=>{let o=ir(e)?null:e,s=o?.type||`equals`,c=o?.value||``,l=o?.value2||``,[u,d]=(0,b.useState)(s),[f,p]=(0,b.useState)(c),[m,h]=(0,b.useState)(l);return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:r?r.getBoundingClientRect().bottom+5:0,left:r?r.getBoundingClientRect().left:0,minWidth:`280px`,backgroundColor:`var(--grid-bg)`,boxShadow:`var(--grid-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))`,borderRadius:`var(--grid-border-radius, 8px)`,border:`1px solid var(--grid-border)`,padding:`16px`,zIndex:1e3},onClick:e=>e.stopPropagation(),children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Filter Type`}),(0,Y.jsxs)(`select`,{style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:u,onChange:e=>d(e.target.value),children:[(0,Y.jsx)(`option`,{value:`equals`,children:`Equals`}),(0,Y.jsx)(`option`,{value:`notEquals`,children:`Not Equals`}),(0,Y.jsx)(`option`,{value:`greaterThan`,children:`Greater Than`}),(0,Y.jsx)(`option`,{value:`greaterThanOrEqual`,children:`Greater Than or Equal`}),(0,Y.jsx)(`option`,{value:`lessThan`,children:`Less Than`}),(0,Y.jsx)(`option`,{value:`lessThanOrEqual`,children:`Less Than or Equal`}),(0,Y.jsx)(`option`,{value:`inRange`,children:`In Range`})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Value`}),(0,Y.jsx)(`input`,{type:`number`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:f,onChange:e=>p(e.target.value),placeholder:`Enter number...`,autoFocus:!0})]}),u===`inRange`&&(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`To`}),(0,Y.jsx)(`input`,{type:`number`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:m,onChange:e=>h(e.target.value),placeholder:`Enter max value...`})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{p(``),h(``),t(null),n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{if(f){let e={type:u,value:parseFloat(f)};u===`inRange`&&m&&(e.value2=parseFloat(m)),t(e)}else t(null);n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:`Apply`})]})]})},sr=({filterValue:e,onApplyFilter:t,onClose:n,anchorEl:r,showAdvancedButton:i,onSwitchToAdvanced:a})=>{let o=ir(e)?null:e,s=o?.type||`equals`,c=o?.value||``,l=o?.value2||``,[u,d]=(0,b.useState)(s),[f,p]=(0,b.useState)(c),[m,h]=(0,b.useState)(l);return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:r?r.getBoundingClientRect().bottom+5:0,left:r?r.getBoundingClientRect().left:0,minWidth:`280px`,backgroundColor:`var(--grid-bg)`,boxShadow:`var(--grid-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))`,borderRadius:`var(--grid-border-radius, 8px)`,border:`1px solid var(--grid-border)`,padding:`16px`,zIndex:1e3},onClick:e=>e.stopPropagation(),children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Filter Type`}),(0,Y.jsxs)(`select`,{style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:u,onChange:e=>d(e.target.value),children:[(0,Y.jsx)(`option`,{value:`equals`,children:`Equals`}),(0,Y.jsx)(`option`,{value:`before`,children:`Before`}),(0,Y.jsx)(`option`,{value:`after`,children:`After`}),(0,Y.jsx)(`option`,{value:`inRange`,children:`In Range`})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`Date`}),(0,Y.jsx)(`input`,{type:`date`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:f,onChange:e=>p(e.target.value),autoFocus:!0})]}),u===`inRange`&&(0,Y.jsxs)(`div`,{style:{marginBottom:`12px`},children:[(0,Y.jsx)(`label`,{style:{display:`block`,fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`,marginBottom:`4px`},children:`To`}),(0,Y.jsx)(`input`,{type:`date`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:m,onChange:e=>h(e.target.value)})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{p(``),h(``),t(null),n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{if(f){let e={type:u,value:f};u===`inRange`&&m&&(e.value2=m),t(e)}else t(null);n()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:`Apply`})]})]})},cr=({column:e,filterValue:t,onApplyFilter:n,onClose:r,rows:i,anchorEl:a,showAdvancedButton:o,onSwitchToAdvanced:s})=>{let c=Array.from(new Set(i.map(t=>t[e.field]).filter(e=>e!=null))),l=ir(t)?null:t,[u,d]=(0,b.useState)(l&&l.values?new Set(l.values):new Set),[f,p]=(0,b.useState)(``),m=c.filter(e=>String(e).toLowerCase().includes(f.toLowerCase())),h=e=>{let t=new Set(u);t.has(e)?t.delete(e):t.add(e),d(t)};return(0,Y.jsxs)(`div`,{style:{position:`fixed`,top:a?a.getBoundingClientRect().bottom+5:0,left:a?a.getBoundingClientRect().left:0,minWidth:`280px`,maxHeight:`400px`,backgroundColor:`var(--grid-bg)`,boxShadow:`var(--grid-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))`,borderRadius:`var(--grid-border-radius, 8px)`,border:`1px solid var(--grid-border)`,padding:`16px`,zIndex:1e3,display:`flex`,flexDirection:`column`},onClick:e=>e.stopPropagation(),children:[(0,Y.jsx)(`div`,{style:{marginBottom:`12px`},children:(0,Y.jsx)(`input`,{type:`text`,style:{width:`100%`,padding:`8px 12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,fontSize:`var(--grid-font-size, 14px)`,outline:`none`,backgroundColor:`var(--grid-bg)`,color:`var(--grid-text)`},value:f,onChange:e=>p(e.target.value),placeholder:`Search values...`,autoFocus:!0})}),(0,Y.jsx)(`div`,{style:{marginBottom:`8px`},children:(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`,padding:`8px`,borderRadius:`4px`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,children:[(0,Y.jsx)(`input`,{type:`checkbox`,checked:u.size===m.length&&m.length>0,onChange:()=>{u.size===m.length?d(new Set):d(new Set(m))},style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`var(--grid-font-size, 14px)`,fontWeight:500,color:`var(--grid-text)`},children:`(Select All)`})]})}),(0,Y.jsx)(`div`,{style:{flex:1,overflowY:`auto`,marginBottom:`12px`,border:`1px solid var(--grid-border)`,borderRadius:`var(--grid-border-radius, 6px)`,maxHeight:`200px`},children:m.map((e,t)=>(0,Y.jsxs)(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`,padding:`8px`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,children:[(0,Y.jsx)(`input`,{type:`checkbox`,checked:u.has(e),onChange:()=>h(e),style:{width:`16px`,height:`16px`,cursor:`pointer`}}),(0,Y.jsx)(`span`,{style:{fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`},children:String(e)})]},t))}),(0,Y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`,justifyContent:`flex-end`,paddingTop:`8px`,borderTop:`1px solid var(--grid-border)`},children:[(0,Y.jsx)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text)`,backgroundColor:`var(--grid-bg-alt)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{d(new Set),n(null),r()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-bg-alt)`,children:`Clear`}),(0,Y.jsxs)(`button`,{style:{padding:`6px 12px`,fontSize:`var(--grid-font-size, 14px)`,color:`var(--grid-text-inverse)`,backgroundColor:`var(--grid-primary)`,border:`none`,borderRadius:`var(--grid-border-radius, 6px)`,cursor:`pointer`},onClick:()=>{u.size>0?n({type:`set`,values:Array.from(u)}):n(null),r()},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary-hover)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`var(--grid-primary)`,children:[`Apply (`,u.size,`)`]})]})]})},lr=({column:e,filterValue:t,onApplyFilter:n,onClose:r,rows:i,anchorEl:a})=>(0,Y.jsx)(cr,{column:e,filterValue:t,onApplyFilter:n,onClose:r,rows:i,anchorEl:a});const ur=({columns:e,displayColumnOrder:t,columnWidths:n,filterConfig:r,dispatch:i,pinnedLeft:a,pinnedRight:o,rows:s,masterDetailConfig:c,dragRowConfig:l})=>{let[u,d]=(0,b.useState)(null),[f,p]=(0,b.useState)({}),[m,h]=(0,b.useState)(null),g=new Set(a),_=new Set(o),v={},y=0;a.forEach(e=>{v[e]=y,y+=n[e]||150});let x={},S=0;[...o].reverse().forEach(e=>{x[e]=S,S+=n[e]||150});let C=new Map(e.map(e=>[e.field,e])),w=e=>{let t={width:`${n[e]||150}px`};return g.has(e)?(t.position=`sticky`,t.left=`${v[e]}px`,t.zIndex=20,t.backgroundColor=`var(--grid-header-bg)`):_.has(e)&&(t.position=`sticky`,t.right=`${x[e]}px`,t.zIndex=20,t.backgroundColor=`var(--grid-header-bg)`),t},T=e=>{if(e.filterType)return e.filterType;let t=e.field.toLowerCase();return t.includes(`date`)||t.includes(`time`)?`date`:t.includes(`salary`)||t.includes(`price`)||t.includes(`amount`)||t.includes(`count`)?`number`:t.includes(`status`)||t.includes(`department`)||t.includes(`category`)?`set`:`text`},E=(e,t)=>{t.stopPropagation();let n=r[e];ir(n)||t.shiftKey?(p({...f,[e]:t.currentTarget}),h(e),d(null)):(p({...f,[e]:t.currentTarget}),d(e),h(null))},D=()=>{d(null),h(null)},O=(e,t)=>{i({type:`SET_FILTER`,payload:{field:e,value:t}})},k=e=>{d(null),h(e)};(0,b.useEffect)(()=>{let e=()=>{u&&d(null)};if(u)return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)},[u]);let A=e=>{let t=T(e),n={column:e,filterValue:r[e.field],onApplyFilter:t=>O(e.field,t),onClose:D,rows:s,anchorEl:f[e.field],showAdvancedButton:!0,onSwitchToAdvanced:()=>k(e.field)};switch(t){case`number`:return(0,Y.jsx)(or,{...n});case`date`:return(0,Y.jsx)(sr,{...n});case`set`:return(0,Y.jsx)(cr,{...n});case`multi`:return(0,Y.jsx)(lr,{...n});default:return(0,Y.jsx)(ar,{...n})}},j=e=>{let t=r[e.field],n=f[e.field];return(0,Y.jsx)(rr,{column:e,filterValue:ir(t)?t:null,onApply:t=>O(e.field,t),onClose:D,rows:s,anchorEl:n})},M=e=>{let t=r[e];if(!t)return``;if(ir(t)){let e=t.conditions.length;return`${e} condition${e>1?`s`:``} (${t.operator})`}return t.type===`set`&&t.values?`${t.values.length} selected`:t.type===`inRange`?`${t.value} - ${t.value2}`:String(t.value||``)},N=e=>!!r[e];return(0,Y.jsx)(Y.Fragment,{children:(0,Y.jsxs)(`div`,{style:{display:`flex`,minWidth:`100%`,borderBottom:`1px solid var(--grid-border)`,backgroundColor:`var(--grid-header-bg)`},children:[c?.enabled&&(0,Y.jsx)(`div`,{style:{width:`48px`,flexShrink:0,borderRight:`1px solid var(--grid-border)`,minHeight:`38px`}}),l?.enabled&&l.showDragHandle!==!1&&l.dragHandlePosition===`left`&&(0,Y.jsx)(`div`,{style:{width:`32px`,flexShrink:0,borderRight:`1px solid var(--grid-border)`,minHeight:`38px`}}),t.map(e=>{let t=C.get(e);if(!t||t.filterable===!1)return(0,Y.jsx)(`div`,{style:{...w(e),borderRight:`1px solid var(--grid-border)`,flexShrink:0,minHeight:`38px`}},e);let n=N(e);return(0,Y.jsxs)(`div`,{style:{...w(e),borderRight:`1px solid var(--grid-border)`,flexShrink:0,padding:`6px 8px`,position:`relative`,display:`flex`,alignItems:`center`},children:[(0,Y.jsx)(`div`,{style:{width:`100%`,cursor:`pointer`},onClick:t=>E(e,t),title:`Click to filter, Shift+Click for advanced filter`,children:(0,Y.jsxs)(`div`,{style:{width:`100%`,padding:`4px 8px`,fontSize:`var(--grid-font-size-sm, 12px)`,border:`1px solid`,borderColor:n?`var(--grid-primary)`:`var(--grid-border)`,borderRadius:`var(--grid-border-radius, 4px)`,backgroundColor:n?`var(--grid-primary-bg)`:`var(--grid-bg)`,color:n?`var(--grid-primary)`:`var(--grid-text-secondary)`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:`6px`,transition:`border-color 0.15s`},onMouseEnter:e=>{n||(e.currentTarget.style.borderColor=`var(--grid-border-hover)`)},onMouseLeave:e=>{n||(e.currentTarget.style.borderColor=`var(--grid-border)`)},children:[(0,Y.jsx)(`span`,{style:{flex:1,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:n?M(e):`Filter...`}),(0,Y.jsx)(`svg`,{style:{flexShrink:0,color:n?`var(--grid-primary)`:`var(--grid-text-muted)`},width:`12`,height:`12`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,strokeWidth:`2.5`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,d:`M3 4h18v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V20l-4-2v-3.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z`})})]})}),u===e&&A(t),m===e&&j(t)]},e)})]})})},dr=({manager:e,currentLayout:t,onLoadPreset:n,onResetLayout:r})=>{let[i,a]=(0,b.useState)([]),[o,s]=(0,b.useState)(!1),[c,l]=(0,b.useState)(!1),[u,d]=(0,b.useState)(``),[f,p]=(0,b.useState)(``),[m,h]=(0,b.useState)(!1),[g,_]=(0,b.useState)(null),v=(0,b.useCallback)(async()=>{try{h(!0),a((await e.listPresets()).filter(e=>e.id!==`__autosave__`)),_(null)}catch(e){_(`Failed to load presets`),console.error(e)}finally{h(!1)}},[e]);(0,b.useEffect)(()=>{v()},[v]);let y=async()=>{if(!u.trim()){_(`Please enter a preset name`);return}try{h(!0);let{createPreset:n}=await w(async()=>{let{createPreset:e}=await import(`./layoutPersistence-C509RwQB.js`);return{createPreset:e}},[]),r=n(u.trim(),t,f.trim());await e.savePreset(r),await v(),l(!1),d(``),p(``),_(null)}catch(e){_(`Failed to save preset`),console.error(e)}finally{h(!1)}},x=async t=>{try{h(!0);let r=await e.loadPreset(t);r&&(n(r.layout),s(!1),_(null))}catch(e){_(`Failed to load preset`),console.error(e)}finally{h(!1)}},S=async(t,n)=>{if(n.stopPropagation(),confirm(`Are you sure you want to delete this preset?`))try{h(!0),await e.deletePreset(t),await v(),_(null)}catch(e){_(`Failed to delete preset`),console.error(e)}finally{h(!1)}},C=async(n,r)=>{if(r.stopPropagation(),confirm(`Update this preset with current layout?`))try{h(!0);let r={...n,layout:t};await e.savePreset(r),await v(),_(null)}catch(e){_(`Failed to update preset`),console.error(e)}finally{h(!1)}},T=e=>new Date(e).toLocaleString();return(0,Y.jsxs)(`div`,{className:`relative inline-block`,children:[(0,Y.jsxs)(`button`,{onClick:()=>s(!o),style:{padding:`6px 12px`,fontSize:`14px`,backgroundColor:`white`,border:`1px solid #d1d5db`,borderRadius:`4px`,cursor:`pointer`,display:`flex`,alignItems:`center`,gap:`8px`},disabled:m,children:[(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`,flexShrink:0},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M4 7h16M4 12h16M4 17h16`})}),`Layout Presets`,(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`,flexShrink:0,transform:o?`rotate(180deg)`:`rotate(0deg)`,transition:`transform 0.2s`},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M19 9l-7 7-7-7`})})]}),o&&(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(`div`,{style:{position:`fixed`,inset:0,zIndex:10},onClick:()=>s(!1)}),(0,Y.jsxs)(`div`,{style:{position:`absolute`,right:0,marginTop:`8px`,width:`320px`,backgroundColor:`white`,border:`1px solid #d1d5db`,borderRadius:`8px`,boxShadow:`0 10px 15px -3px rgba(0, 0, 0, 0.1)`,zIndex:20,maxHeight:`384px`,overflowY:`auto`},children:[(0,Y.jsx)(`div`,{style:{padding:`12px`,borderBottom:`1px solid #e5e7eb`,backgroundColor:`#f9fafb`},children:(0,Y.jsx)(`h3`,{style:{fontWeight:`600`,fontSize:`14px`,color:`#111827`},children:`Layout Presets`})}),g&&(0,Y.jsx)(`div`,{style:{padding:`12px`,backgroundColor:`#fef2f2`,borderBottom:`1px solid #fecaca`},children:(0,Y.jsx)(`p`,{style:{fontSize:`14px`,color:`#dc2626`},children:g})}),(0,Y.jsxs)(`div`,{style:{padding:`8px`,borderBottom:`1px solid #e5e7eb`,display:`flex`,gap:`8px`},children:[(0,Y.jsxs)(`button`,{onClick:()=>{l(!0),s(!1)},style:{flex:1,padding:`8px 12px`,fontSize:`14px`,backgroundColor:`#2563eb`,color:`white`,border:`none`,borderRadius:`4px`,cursor:`pointer`,display:`flex`,alignItems:`center`,justifyContent:`center`,gap:`8px`},children:[(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`,flexShrink:0},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4`})}),`Save Current`]}),(0,Y.jsxs)(`button`,{onClick:()=>{r(),s(!1)},style:{flex:1,padding:`8px 12px`,fontSize:`14px`,backgroundColor:`#4b5563`,color:`white`,border:`none`,borderRadius:`4px`,cursor:`pointer`,display:`flex`,alignItems:`center`,justifyContent:`center`,gap:`8px`},children:[(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`,flexShrink:0},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15`})}),`Reset`]})]}),(0,Y.jsx)(`div`,{style:{maxHeight:`256px`,overflowY:`auto`},children:m&&i.length===0?(0,Y.jsx)(`div`,{style:{padding:`16px`,textAlign:`center`,color:`#6b7280`,fontSize:`14px`},children:`Loading presets...`}):i.length===0?(0,Y.jsx)(`div`,{style:{padding:`16px`,textAlign:`center`,color:`#6b7280`,fontSize:`14px`},children:`No saved presets. Save your current layout to get started.`}):(0,Y.jsx)(`div`,{children:i.map(e=>(0,Y.jsx)(`div`,{style:{padding:`12px`,cursor:`pointer`,borderBottom:`1px solid #e5e7eb`},onClick:()=>x(e.id),onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`#f9fafb`;let t=e.currentTarget.querySelector(`.preset-actions`);t&&(t.style.opacity=`1`)},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`transparent`;let t=e.currentTarget.querySelector(`.preset-actions`);t&&(t.style.opacity=`0`)},children:(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`flex-start`,justifyContent:`space-between`},children:[(0,Y.jsxs)(`div`,{style:{flex:1,minWidth:0},children:[(0,Y.jsx)(`h4`,{style:{fontSize:`14px`,fontWeight:`500`,color:`#111827`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.name}),e.description&&(0,Y.jsx)(`p`,{style:{fontSize:`12px`,color:`#6b7280`,marginTop:`4px`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.description}),(0,Y.jsxs)(`p`,{style:{fontSize:`12px`,color:`#9ca3af`,marginTop:`4px`},children:[`Updated: `,T(e.updatedAt)]})]}),(0,Y.jsxs)(`div`,{className:`preset-actions`,style:{display:`flex`,gap:`4px`,marginLeft:`8px`,opacity:0,transition:`opacity 0.2s`},children:[(0,Y.jsx)(`button`,{onClick:t=>C(e,t),style:{padding:`4px`,color:`#2563eb`,backgroundColor:`transparent`,border:`none`,borderRadius:`4px`,cursor:`pointer`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`#eff6ff`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,title:`Update with current layout`,children:(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15`})})}),(0,Y.jsx)(`button`,{onClick:t=>S(e.id,t),style:{padding:`4px`,color:`#dc2626`,backgroundColor:`transparent`,border:`none`,borderRadius:`4px`,cursor:`pointer`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`#fef2f2`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,title:`Delete preset`,children:(0,Y.jsx)(`svg`,{style:{width:`14px`,height:`14px`},fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16`})})})]})]})},e.id))})})]})]}),c&&(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(`div`,{style:{position:`fixed`,inset:0,backgroundColor:`rgba(0, 0, 0, 0.5)`,zIndex:30,display:`flex`,alignItems:`center`,justifyContent:`center`},onClick:()=>l(!1)}),(0,Y.jsx)(`div`,{style:{position:`fixed`,inset:0,zIndex:40,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:`16px`},children:(0,Y.jsxs)(`div`,{style:{backgroundColor:`white`,borderRadius:`8px`,boxShadow:`0 25px 50px -12px rgba(0, 0, 0, 0.25)`,maxWidth:`448px`,width:`100%`,padding:`24px`},onClick:e=>e.stopPropagation(),children:[(0,Y.jsx)(`h2`,{style:{fontSize:`20px`,fontWeight:`600`,marginBottom:`16px`},children:`Save Layout Preset`}),g&&(0,Y.jsx)(`div`,{style:{marginBottom:`16px`,padding:`12px`,backgroundColor:`#fef2f2`,border:`1px solid #fecaca`,borderRadius:`4px`},children:(0,Y.jsx)(`p`,{style:{fontSize:`14px`,color:`#dc2626`},children:g})}),(0,Y.jsxs)(`div`,{children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`16px`},children:[(0,Y.jsx)(`label`,{htmlFor:`preset-name`,style:{display:`block`,fontSize:`14px`,fontWeight:`500`,color:`#374151`,marginBottom:`4px`},children:`Preset Name *`}),(0,Y.jsx)(`input`,{id:`preset-name`,type:`text`,value:u,onChange:e=>d(e.target.value),style:{width:`100%`,padding:`8px 12px`,border:`1px solid #d1d5db`,borderRadius:`4px`,fontSize:`14px`},placeholder:`e.g., Sales Dashboard Layout`,autoFocus:!0})]}),(0,Y.jsxs)(`div`,{children:[(0,Y.jsx)(`label`,{htmlFor:`preset-description`,style:{display:`block`,fontSize:`14px`,fontWeight:`500`,color:`#374151`,marginBottom:`4px`},children:`Description (optional)`}),(0,Y.jsx)(`textarea`,{id:`preset-description`,value:f,onChange:e=>p(e.target.value),style:{width:`100%`,padding:`8px 12px`,border:`1px solid #d1d5db`,borderRadius:`4px`,fontSize:`14px`},placeholder:`Add a description...`,rows:3})]})]}),(0,Y.jsxs)(`div`,{style:{marginTop:`24px`,display:`flex`,gap:`12px`,justifyContent:`flex-end`},children:[(0,Y.jsx)(`button`,{onClick:()=>{l(!1),d(``),p(``),_(null)},style:{padding:`8px 16px`,fontSize:`14px`,color:`#374151`,backgroundColor:`#f3f4f6`,border:`none`,borderRadius:`4px`,cursor:`pointer`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`#e5e7eb`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`#f3f4f6`,disabled:m,children:`Cancel`}),(0,Y.jsx)(`button`,{onClick:y,style:{padding:`8px 16px`,fontSize:`14px`,color:`white`,backgroundColor:`#2563eb`,border:`none`,borderRadius:`4px`,cursor:`pointer`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`#1d4ed8`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`#2563eb`,disabled:m,children:m?`Saving...`:`Save Preset`})]})]})})]})]})},fr=({x:e,y:t,items:n,onClose:r})=>{let i=(0,b.useRef)(null),[a,o]=b.useState(null);(0,b.useEffect)(()=>{let e=e=>{i.current&&!i.current.contains(e.target)&&r()},t=e=>{i.current&&!i.current.contains(e.target)&&(e.preventDefault(),r())},n=setTimeout(()=>{document.addEventListener(`mousedown`,e),document.addEventListener(`contextmenu`,t)},100);return()=>{clearTimeout(n),document.removeEventListener(`mousedown`,e),document.removeEventListener(`contextmenu`,t)}},[r]),(0,b.useEffect)(()=>{let e=e=>{e.key===`Escape`&&r()};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[r]),(0,b.useEffect)(()=>{if(i.current){let n=i.current,r=n.getBoundingClientRect(),a=window.innerWidth,o=window.innerHeight,s=e,c=t;r.right>a&&(s=a-r.width-10),r.bottom>o&&(c=o-r.height-10),(s!==e||c!==t)&&(n.style.left=`${s}px`,n.style.top=`${c}px`)}},[e,t]);let s=(0,b.useCallback)(e=>{if(!e.disabled){if(e.submenu){o(a===e.id?null:e.id||null);return}e.onClick&&e.onClick(),r()}},[r,a]),c=(e,t)=>e.type===`separator`?(0,Y.jsx)(`div`,{className:`context-menu-separator`,role:`separator`},`separator-${t}`):(0,Y.jsxs)(`div`,{className:`context-menu-item-wrapper`,children:[(0,Y.jsxs)(`div`,{className:`context-menu-item ${e.disabled?`disabled`:``} ${e.danger?`danger`:``} ${e.submenu?`has-submenu`:``}`,onClick:()=>s(e),role:`menuitem`,"aria-disabled":e.disabled,tabIndex:e.disabled?-1:0,children:[e.icon&&(0,Y.jsx)(`span`,{className:`context-menu-icon`,children:e.icon}),(0,Y.jsx)(`span`,{className:`context-menu-label`,children:e.label}),e.shortcut&&(0,Y.jsx)(`span`,{className:`context-menu-shortcut`,children:e.shortcut}),e.submenu&&(0,Y.jsx)(`span`,{className:`context-menu-arrow`,children:`▶`})]}),e.submenu&&a===e.id&&(0,Y.jsx)(`div`,{className:`context-menu-submenu`,children:e.submenu.map((e,t)=>c(e,t))})]},e.id||t);return(0,Y.jsx)(`div`,{ref:i,className:`context-menu`,style:{left:e,top:t},role:`menu`,"aria-label":`Context menu`,children:n.map((e,t)=>c(e,t))})},pr=async(e,t,n,r=!1)=>{let i=Array.from(e),a=n.filter(e=>i.includes(e.id));if(a.length===0)return;let o=``;r&&(o+=t.map(e=>e.headerName).join(` `)+`
|
|
41
41
|
`),o+=a.map(e=>t.map(t=>{let n=e[t.field];return n==null?``:typeof n==`object`?JSON.stringify(n):String(n)}).join(` `)).join(`
|
|
42
42
|
`);try{await navigator.clipboard.writeText(o)}catch(e){console.error(`Failed to copy to clipboard:`,e);let t=document.createElement(`textarea`);t.value=o,t.style.position=`fixed`,t.style.opacity=`0`,document.body.appendChild(t),t.select(),document.execCommand(`copy`),document.body.removeChild(t)}},mr=(e,t,n,r=`export.csv`)=>{let i=Array.from(e),a=n.filter(e=>i.includes(e.id));if(a.length===0)return;let o=``;o+=t.map(e=>`"${e.headerName}"`).join(`,`)+`
|
|
43
43
|
`,o+=a.map(e=>t.map(t=>{let n=e[t.field];return n==null?`""`:typeof n==`object`?`"${JSON.stringify(n).replace(/"/g,`""`)}"`:`"${String(n).replace(/"/g,`""`)}"`}).join(`,`)).join(`
|
|
@@ -2212,4 +2212,62 @@ function App() {
|
|
|
2212
2212
|
/>
|
|
2213
2213
|
</div>
|
|
2214
2214
|
);
|
|
2215
|
-
}`,language:`jsx`}]})})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`24px`,backgroundColor:`#fef3c7`,border:`1px solid #fcd34d`,padding:`20px`,borderRadius:`8px`},children:[(0,Y.jsx)(`h3`,{style:{fontSize:`16px`,fontWeight:`600`,color:`#92400e`,marginBottom:`12px`},children:`💡 Pro Tips`}),(0,Y.jsxs)(`ul`,{style:{fontSize:`14px`,color:`#78350f`,paddingLeft:`20px`,lineHeight:`1.8`,margin:0},children:[(0,Y.jsx)(`li`,{children:`Group by lower cardinality columns first (e.g., Department before Employee Name) for better performance`}),(0,Y.jsxs)(`li`,{children:[`Use `,(0,Y.jsx)(`code`,{style:{padding:`2px 6px`,backgroundColor:`#fed7aa`,borderRadius:`3px`,fontFamily:`monospace`,fontSize:`13px`},children:`showGroupFooters: true`}),` to display aggregations for each group`]}),(0,Y.jsx)(`li`,{children:`Combine grouping with sorting and filtering for powerful data analysis`}),(0,Y.jsx)(`li`,{children:`The Group By panel supports keyboard navigation for accessibility`}),(0,Y.jsx)(`li`,{children:`Grouped state persists across data updates automatically`})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`24px`,backgroundColor:`white`,padding:`24px`,borderRadius:`8px`,boxShadow:`0 1px 2px rgba(0,0,0,0.05)`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`h2`,{style:{fontSize:`18px`,fontWeight:`600`,marginBottom:`16px`,color:`#111827`},children:`🎯 Common Use Cases`}),(0,Y.jsxs)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(250px, 1fr))`,gap:`16px`,fontSize:`14px`},children:[(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`📊 Sales Analysis`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Region → Country → Sales Rep to analyze sales hierarchy`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`👥 HR Reports`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Department → Position to view organizational structure`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`💰 Financial Data`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Category → Sub-category to analyze expenses`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`📦 Inventory`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Warehouse → Category → Product for stock overview`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`📅 Project Management`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Status → Priority → Assignee for task organization`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`🛒 E-commerce`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Category → Brand → Product for catalog management`})]})]})]})]})})},ZY=()=>[{field:`id`,headerName:`ID`,width:80,sortable:!0,filterable:!0},{field:`firstName`,headerName:`First Name`,width:150,sortable:!0,filterable:!0,editable:!0},{field:`lastName`,headerName:`Last Name`,width:150,sortable:!0,filterable:!0,editable:!0},{field:`email`,headerName:`Email`,width:220,sortable:!0,filterable:!0},{field:`phone`,headerName:`Phone`,width:160,sortable:!0,filterable:!0},{field:`department`,headerName:`Department`,width:160,sortable:!0,filterable:!0},{field:`position`,headerName:`Position`,width:180,sortable:!0,filterable:!0},{field:`salary`,headerName:`Salary`,width:120,sortable:!0,filterable:!0},{field:`startDate`,headerName:`Start Date`,width:140,sortable:!0,filterable:!0},{field:`city`,headerName:`City`,width:140,sortable:!0,filterable:!0},{field:`state`,headerName:`State`,width:120,sortable:!0,filterable:!0},{field:`country`,headerName:`Country`,width:140,sortable:!0,filterable:!0},{field:`zipCode`,headerName:`Zip Code`,width:120,sortable:!0,filterable:!0},{field:`manager`,headerName:`Manager`,width:160,sortable:!0,filterable:!0},{field:`team`,headerName:`Team`,width:150,sortable:!0,filterable:!0},{field:`level`,headerName:`Level`,width:100,sortable:!0,filterable:!0},{field:`rating`,headerName:`Rating`,width:100,sortable:!0,filterable:!0},{field:`projects`,headerName:`Projects`,width:120,sortable:!0,filterable:!0},{field:`skills`,headerName:`Skills`,width:200,sortable:!0,filterable:!0},{field:`notes`,headerName:`Notes`,width:250,sortable:!0,filterable:!0}],QY=[`Engineering`,`Marketing`,`Sales`,`HR`,`Finance`,`Legal`,`Operations`,`Support`],$Y=[`Engineer`,`Manager`,`Director`,`VP`,`Analyst`,`Lead`,`Coordinator`,`Specialist`],eX=[`New York`,`San Francisco`,`Chicago`,`Austin`,`Seattle`,`Boston`,`Denver`,`Portland`],tX=[`NY`,`CA`,`IL`,`TX`,`WA`,`MA`,`CO`,`OR`],nX=[`Alpha`,`Beta`,`Gamma`,`Delta`,`Epsilon`,`Zeta`,`Eta`,`Theta`],rX=[`React`,`TypeScript`,`Node.js`,`Python`,`SQL`,`AWS`,`Docker`,`GraphQL`],iX=e=>Array.from({length:e},(e,t)=>({id:t+1,firstName:`First${t+1}`,lastName:`Last${t+1}`,email:`user${t+1}@example.com`,phone:`(555) ${String(100+t%900).padStart(3,`0`)}-${String(1e3+t%9e3).padStart(4,`0`)}`,department:QY[t%QY.length],position:$Y[t%$Y.length],salary:5e4+t*2500%1e5,startDate:`202${t%5}-${String(t%12+1).padStart(2,`0`)}-${String(t%28+1).padStart(2,`0`)}`,city:eX[t%eX.length],state:tX[t%tX.length],country:`USA`,zipCode:String(1e4+t*111%89999),manager:`Manager${t%5+1}`,team:nX[t%nX.length],level:`L${t%6+1}`,rating:(t%5+1).toFixed(1),projects:t%10+1,skills:rX.slice(0,t%rX.length+1).join(`, `),notes:`Employee notes for row ${t+1} - Lorem ipsum dolor sit amet`})),aX=ZY(),oX=iX(50);const sX=()=>(0,Y.jsxs)(`div`,{style:{padding:`24px`},children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`24px`},children:[(0,Y.jsx)(`h1`,{style:{fontSize:`24px`,fontWeight:700,marginBottom:`8px`},children:`🐛 Bug #1: Header Does Not Scroll Horizontally With Body`}),(0,Y.jsx)(`p`,{style:{color:`#64748b`,fontSize:`14px`,lineHeight:`1.6`},children:`This demo reproduces the bug where the table header stays fixed while the body scrolls horizontally. With 20 columns, horizontal overflow is guaranteed. Try scrolling the table body to the right — the header should follow but doesn't.`}),(0,Y.jsxs)(`div`,{style:{marginTop:`12px`,padding:`12px 16px`,backgroundColor:`#fef3c7`,border:`1px solid #f59e0b`,borderRadius:`6px`,fontSize:`13px`,color:`#92400e`},children:[(0,Y.jsx)(`strong`,{children:`Steps to reproduce:`}),` Scroll the grid body horizontally using the scrollbar or trackpad. Observe that the column headers become misaligned with the data columns.`]})]}),(0,Y.jsx)(bi,{columns:aX,rows:oX,pageSize:20})]});var cX={"/":`home`,"/demo/standard":`standard`,"/demo/virtual-scrolling":`virtual`,"/demo/cell-renderers":`renderers`,"/demo/column-filters":`filters`,"/demo/faceted-search":`faceted`,"/demo/filtered-search":`filtered-search`,"/demo/layout-persistence":`persistence`,"/demo/infinite-scroll":`infinite`,"/demo/themes":`themes`,"/demo/density-mode":`density`,"/demo/tree-data":`tree`,"/demo/row-dragging":`drag`,"/demo/row-pinning":`rowpin`,"/demo/market-data":`market`,"/demo/accessibility":`accessibility`,"/demo/context-menu":`contextmenu`,"/demo/tooltip":`tooltip`,"/demo/benchmark":`benchmark`,"/demo/feature-gallery":`gallery`,"/api/reference":`api-reference`,"/api/demo":`api-demo`,"/demo/pivot-table":`pivot`,"/demo/advanced-editors":`advanced-editors`,"/demo/charts":`charts`,"/demo/master-detail":`master-detail`,"/demo/group-by":`groupby`,"/demo/horizontal-scroll-bug":`horizontal-scroll-bug`};function lX(){let e=Pe(),t=je(),[n,r]=(0,b.useState)(new Set([`gettingstarted`,`performance`,`datafeatures`,`customization`,`documentation`])),[i,a]=(0,b.useState)(``),o=cX[t.pathname]||`home`,s=[{label:`Getting Started`,icon:`🏠`,items:[{id:`home`,label:`Home`,icon:`🏠`,description:`Overview and installation`,path:`/`},{id:`standard`,label:`Standard Demo`,icon:`📊`,description:`Basic features with pagination`,path:`/demo/standard`}]},{label:`Performance`,icon:`⚡`,items:[{id:`virtual`,label:`Virtual Scrolling`,icon:`🚀`,description:`High-performance rendering`,path:`/demo/virtual-scrolling`},{id:`infinite`,label:`Infinite Scroll`,icon:`♾️`,description:`Server-side 100M rows`,path:`/demo/infinite-scroll`},{id:`market`,label:`Market Data`,icon:`📈`,description:`Live streaming with 1000+ updates/sec`,path:`/demo/market-data`}]},{label:`Data Features`,icon:`🌲`,items:[{id:`pivot`,label:`Pivot Table`,icon:`📊`,description:`Dynamic pivot tables with aggregation`,path:`/demo/pivot-table`},{id:`groupby`,label:`Group By`,icon:`🗂️`,description:`Drag & drop columns to group rows hierarchically`,path:`/demo/group-by`},{id:`tree`,label:`Tree Data`,icon:`🌲`,description:`Hierarchical rows & expand/collapse`,path:`/demo/tree-data`},{id:`drag`,label:`Row Dragging`,icon:`↕️`,description:`Drag & drop row reordering`,path:`/demo/row-dragging`},{id:`rowpin`,label:`Row Pinning`,icon:`📌`,description:`Pin rows to top/bottom (sticky)`,path:`/demo/row-pinning`},{id:`filters`,label:`Column Filters`,icon:`🔍`,description:`Advanced filtering options`,path:`/demo/column-filters`},{id:`faceted`,label:`Faceted Search`,icon:`🎯`,description:`Filter panel with value counts`,path:`/demo/faceted-search`},{id:`filtered-search`,label:`Filtered Search Bar`,icon:`🔍`,description:`GitLab-style token-based search`,path:`/demo/filtered-search`},{id:`contextmenu`,label:`Context Menu`,icon:`📋`,description:`Right-click menu with copy, export, & more`,path:`/demo/context-menu`},{id:`advanced-editors`,label:`Advanced Editors`,icon:`✏️`,description:`5 enterprise cell editors (Select, Date, Numeric, Multi-Select, Markdown)`,path:`/demo/advanced-editors`},{id:`charts`,label:`Integrated Charts`,icon:`📊`,description:`Quick charts from grid selections`,path:`/demo/charts`},{id:`master-detail`,label:`Master/Detail`,icon:`🔽`,description:`Expandable rows with nested content`,path:`/demo/master-detail`}]},{label:`Customization`,icon:`🎨`,items:[{id:`renderers`,label:`Cell Renderers`,icon:`🎭`,description:`Custom cell components`,path:`/demo/cell-renderers`},{id:`themes`,label:`Theme System`,icon:`🎨`,description:`10 built-in themes: Quartz, Alpine, Material, Dark, Nord, Dracula, Solarized, Monokai, One Dark`,path:`/demo/themes`},{id:`density`,label:`Density Modes`,icon:`📏`,description:`Compact/Normal/Comfortable spacing`,path:`/demo/density-mode`},{id:`persistence`,label:`Layout Persistence`,icon:`💾`,description:`Save & restore layouts`,path:`/demo/layout-persistence`},{id:`tooltip`,label:`Tooltips`,icon:`💬`,description:`Cell & row tooltips with smart placement`,path:`/demo/tooltip`}]},{label:`Accessibility`,icon:`♿`,items:[{id:`accessibility`,label:`Accessibility (A11y)`,icon:`♿`,description:`Keyboard navigation & ARIA support`,path:`/demo/accessibility`}]},{label:`Documentation`,icon:`📚`,items:[{id:`api-reference`,label:`Grid API Reference`,icon:`📖`,description:`100+ methods for programmatic control`,path:`/api/reference`},{id:`api-demo`,label:`Interactive API Demo`,icon:`🎮`,description:`Try all API methods with live examples`,path:`/api/demo`}]},{label:`Playground`,icon:`🧪`,items:[{id:`gallery`,label:`Feature Gallery`,icon:`🎯`,description:`Browse all features with live demos`,path:`/demo/feature-gallery`},{id:`benchmark`,label:`Benchmark (1M rows)`,icon:`🚀`,description:`Test performance with massive datasets`,path:`/demo/benchmark`},{id:`horizontal-scroll-bug`,label:`Bug #1: Scroll Sync`,icon:`🐛`,description:`Header misalignment on horizontal scroll`,path:`/demo/horizontal-scroll-bug`}]}],c=e=>{let t=new Set(n);t.has(e)?t.delete(e):t.add(e),r(t)},l=s.map(e=>({...e,items:e.items.filter(e=>e.label.toLowerCase().includes(i.toLowerCase())||e.description.toLowerCase().includes(i.toLowerCase()))})).filter(e=>e.items.length>0),u=i?l:s,d=e=>i?!0:n.has(e.toLowerCase().replace(/\s+/g,``));return(0,Y.jsxs)(`div`,{style:{display:`flex`,height:`100vh`,backgroundColor:`#ffffff`},children:[(0,Y.jsxs)(`aside`,{style:{width:`280px`,backgroundColor:`#1e293b`,color:`white`,display:`flex`,flexDirection:`column`,flexShrink:0,boxShadow:`2px 0 8px rgba(0, 0, 0, 0.1)`},children:[(0,Y.jsxs)(`div`,{style:{padding:`20px 20px`,borderBottom:`1px solid rgba(255, 255, 255, 0.1)`,backgroundColor:`#0f172a`},children:[(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,marginBottom:`8px`},children:[(0,Y.jsx)(`img`,{src:`/logo.png`,alt:`Logo`,style:{width:`32px`,height:`32px`,objectFit:`contain`}}),(0,Y.jsx)(`span`,{style:{fontSize:`24px`,fontWeight:`bold`},children:`React DataGrid`})]}),(0,Y.jsx)(`div`,{style:{fontSize:`12px`,color:`rgba(255, 255, 255, 0.6)`},children:`Enterprise-grade data grid`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px 20px`,borderBottom:`1px solid rgba(255, 255, 255, 0.1)`},children:[(0,Y.jsxs)(`div`,{style:{position:`relative`},children:[(0,Y.jsx)(`input`,{type:`text`,placeholder:`Search features...`,value:i,onChange:e=>a(e.target.value),style:{width:`100%`,padding:`8px 12px 8px 36px`,fontSize:`13px`,backgroundColor:`rgba(255, 255, 255, 0.1)`,color:`white`,border:`1px solid rgba(255, 255, 255, 0.2)`,borderRadius:`6px`,outline:`none`,transition:`all 0.15s`},onFocus:e=>{e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.15)`,e.currentTarget.style.borderColor=`rgba(96, 165, 250, 0.5)`},onBlur:e=>{e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.1)`,e.currentTarget.style.borderColor=`rgba(255, 255, 255, 0.2)`}}),(0,Y.jsx)(`svg`,{style:{position:`absolute`,left:`12px`,top:`50%`,transform:`translateY(-50%)`,width:`16px`,height:`16px`,fill:`rgba(255, 255, 255, 0.5)`,pointerEvents:`none`},viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{d:`M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z`})}),i&&(0,Y.jsx)(`button`,{onClick:()=>a(``),style:{position:`absolute`,right:`8px`,top:`50%`,transform:`translateY(-50%)`,backgroundColor:`transparent`,border:`none`,color:`rgba(255, 255, 255, 0.6)`,cursor:`pointer`,padding:`4px`,display:`flex`,alignItems:`center`,borderRadius:`3px`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.1)`,e.currentTarget.style.color=`white`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`transparent`,e.currentTarget.style.color=`rgba(255, 255, 255, 0.6)`},children:(0,Y.jsx)(`svg`,{style:{width:`16px`,height:`16px`},fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{d:`M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z`})})})]}),i&&l.length===0&&(0,Y.jsx)(`div`,{style:{marginTop:`8px`,fontSize:`12px`,color:`rgba(255, 255, 255, 0.5)`,textAlign:`center`},children:`No features found`})]}),(0,Y.jsx)(`nav`,{style:{flex:1,overflowY:`auto`,padding:`16px 0`,scrollbarWidth:`thin`,scrollbarColor:`rgba(255, 255, 255, 0.3) transparent`},children:u.map(t=>{let n=d(t.label);return(0,Y.jsxs)(`div`,{style:{marginBottom:`8px`},children:[(0,Y.jsxs)(`button`,{onClick:()=>c(t.label.toLowerCase().replace(/\s+/g,``)),style:{width:`100%`,display:`flex`,alignItems:`center`,gap:`8px`,padding:`10px 20px`,fontSize:`13px`,fontWeight:600,backgroundColor:`transparent`,color:`rgba(255, 255, 255, 0.8)`,border:`none`,cursor:`pointer`,transition:`all 0.15s`,textAlign:`left`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.05)`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`transparent`},children:[(0,Y.jsx)(`span`,{style:{fontSize:`16px`,transition:`transform 0.2s`,transform:n?`rotate(90deg)`:`rotate(0deg)`},children:`▶`}),(0,Y.jsx)(`span`,{style:{fontSize:`16px`},children:t.icon}),(0,Y.jsx)(`span`,{style:{flex:1},children:t.label})]}),n&&(0,Y.jsx)(`div`,{style:{paddingLeft:`24px`},children:t.items.map(t=>(0,Y.jsxs)(`button`,{onClick:()=>e(t.path),style:{width:`100%`,display:`flex`,alignItems:`flex-start`,gap:`8px`,padding:`10px 16px`,fontSize:`13px`,backgroundColor:o===t.id?`rgba(59, 130, 246, 0.2)`:`transparent`,color:o===t.id?`#60a5fa`:`rgba(255, 255, 255, 0.8)`,border:`none`,borderLeft:o===t.id?`3px solid #60a5fa`:`3px solid transparent`,cursor:`pointer`,transition:`all 0.15s`,textAlign:`left`},onMouseEnter:e=>{o!==t.id&&(e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.05)`)},onMouseLeave:e=>{o!==t.id&&(e.currentTarget.style.backgroundColor=`transparent`)},children:[(0,Y.jsx)(`span`,{style:{fontSize:`16px`,marginTop:`1px`},children:t.icon}),(0,Y.jsxs)(`div`,{style:{flex:1},children:[(0,Y.jsx)(`div`,{style:{fontWeight:o===t.id?600:500},children:t.label}),(0,Y.jsx)(`div`,{style:{fontSize:`11px`,color:o===t.id?`rgba(96, 165, 250, 0.8)`:`rgba(255, 255, 255, 0.5)`,marginTop:`2px`,lineHeight:`1.3`},children:t.description})]})]},t.id))})]},t.label)})}),(0,Y.jsxs)(`div`,{style:{padding:`16px 20px`,borderTop:`1px solid rgba(255, 255, 255, 0.1)`,backgroundColor:`#0f172a`},children:[(0,Y.jsxs)(`a`,{href:`https://github.com/bhushanpoojary/react-open-source-datagrid/issues`,target:`_blank`,rel:`noopener noreferrer`,style:{display:`flex`,alignItems:`center`,gap:`8px`,color:`rgba(255, 255, 255, 0.8)`,textDecoration:`none`,fontSize:`13px`,transition:`color 0.15s`,marginBottom:`12px`},onMouseEnter:e=>{e.currentTarget.style.color=`#60a5fa`},onMouseLeave:e=>{e.currentTarget.style.color=`rgba(255, 255, 255, 0.8)`},children:[(0,Y.jsx)(`svg`,{style:{width:`18px`,height:`18px`},fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{d:`M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z`})}),(0,Y.jsx)(`span`,{children:`Report Issue / Feature`})]}),(0,Y.jsxs)(`a`,{href:`https://github.com/bhushanpoojary/react-open-source-datagrid`,target:`_blank`,rel:`noopener noreferrer`,style:{display:`flex`,alignItems:`center`,gap:`8px`,color:`rgba(255, 255, 255, 0.8)`,textDecoration:`none`,fontSize:`13px`,transition:`color 0.15s`},onMouseEnter:e=>{e.currentTarget.style.color=`white`},onMouseLeave:e=>{e.currentTarget.style.color=`rgba(255, 255, 255, 0.8)`},children:[(0,Y.jsx)(`svg`,{style:{width:`18px`,height:`18px`},fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{fillRule:`evenodd`,d:`M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z`,clipRule:`evenodd`})}),(0,Y.jsx)(`span`,{children:`View on GitHub`})]})]})]}),(0,Y.jsx)(`main`,{style:{flex:1,overflow:`auto`,backgroundColor:`#f8fafc`},children:(0,Y.jsxs)(at,{children:[(0,Y.jsx)(rt,{path:`/`,element:(0,Y.jsx)(dn,{})}),(0,Y.jsx)(rt,{path:`/demo/standard`,element:(0,Y.jsx)(lp,{})}),(0,Y.jsx)(rt,{path:`/demo/virtual-scrolling`,element:(0,Y.jsx)(up,{})}),(0,Y.jsx)(rt,{path:`/demo/infinite-scroll`,element:(0,Y.jsx)(bp,{})}),(0,Y.jsx)(rt,{path:`/demo/market-data`,element:(0,Y.jsx)(Ip,{})}),(0,Y.jsx)(rt,{path:`/demo/accessibility`,element:(0,Y.jsx)(Lp,{})}),(0,Y.jsx)(rt,{path:`/demo/pivot-table`,element:(0,Y.jsx)(pm,{})}),(0,Y.jsx)(rt,{path:`/demo/group-by`,element:(0,Y.jsx)(XY,{})}),(0,Y.jsx)(rt,{path:`/demo/tree-data`,element:(0,Y.jsx)(kp,{})}),(0,Y.jsx)(rt,{path:`/demo/row-dragging`,element:(0,Y.jsx)(Fp,{})}),(0,Y.jsx)(rt,{path:`/demo/row-pinning`,element:(0,Y.jsx)(Vp,{})}),(0,Y.jsx)(rt,{path:`/demo/cell-renderers`,element:(0,Y.jsx)(dp,{})}),(0,Y.jsx)(rt,{path:`/demo/column-filters`,element:(0,Y.jsx)(fp,{})}),(0,Y.jsx)(rt,{path:`/demo/faceted-search`,element:(0,Y.jsx)(hp,{})}),(0,Y.jsx)(rt,{path:`/demo/filtered-search`,element:(0,Y.jsx)(gp,{})}),(0,Y.jsx)(rt,{path:`/demo/context-menu`,element:(0,Y.jsx)(Bp,{})}),(0,Y.jsx)(rt,{path:`/demo/tooltip`,element:(0,Y.jsx)(Up,{})}),(0,Y.jsx)(rt,{path:`/demo/layout-persistence`,element:(0,Y.jsx)(yp,{})}),(0,Y.jsx)(rt,{path:`/demo/themes`,element:(0,Y.jsx)(xp,{})}),(0,Y.jsx)(rt,{path:`/demo/density-mode`,element:(0,Y.jsx)(Sp,{})}),(0,Y.jsx)(rt,{path:`/demo/feature-gallery`,element:(0,Y.jsx)(Gp,{})}),(0,Y.jsx)(rt,{path:`/demo/benchmark`,element:(0,Y.jsx)(Wp,{})}),(0,Y.jsx)(rt,{path:`/demo/advanced-editors`,element:(0,Y.jsx)(Mm,{})}),(0,Y.jsx)(rt,{path:`/demo/charts`,element:(0,Y.jsx)(WY,{})}),(0,Y.jsx)(rt,{path:`/demo/master-detail`,element:(0,Y.jsx)(JY,{})}),(0,Y.jsx)(rt,{path:`/api/reference`,element:(0,Y.jsx)(Kp,{})}),(0,Y.jsx)(rt,{path:`/api/demo`,element:(0,Y.jsx)(dm,{})}),(0,Y.jsx)(rt,{path:`/demo/horizontal-scroll-bug`,element:(0,Y.jsx)(sX,{})})]})})]})}var uX=lX;(0,v.createRoot)(document.getElementById(`root`)).render((0,Y.jsx)(b.StrictMode,{children:(0,Y.jsx)(Ht,{children:(0,Y.jsx)(uX,{})})}));export{qr as a,Gr as c,Wr as i,Hr as n,Yr as o,Ur as r,Kr as s,Jr as t};
|
|
2215
|
+
}`,language:`jsx`}]})})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`24px`,backgroundColor:`#fef3c7`,border:`1px solid #fcd34d`,padding:`20px`,borderRadius:`8px`},children:[(0,Y.jsx)(`h3`,{style:{fontSize:`16px`,fontWeight:`600`,color:`#92400e`,marginBottom:`12px`},children:`💡 Pro Tips`}),(0,Y.jsxs)(`ul`,{style:{fontSize:`14px`,color:`#78350f`,paddingLeft:`20px`,lineHeight:`1.8`,margin:0},children:[(0,Y.jsx)(`li`,{children:`Group by lower cardinality columns first (e.g., Department before Employee Name) for better performance`}),(0,Y.jsxs)(`li`,{children:[`Use `,(0,Y.jsx)(`code`,{style:{padding:`2px 6px`,backgroundColor:`#fed7aa`,borderRadius:`3px`,fontFamily:`monospace`,fontSize:`13px`},children:`showGroupFooters: true`}),` to display aggregations for each group`]}),(0,Y.jsx)(`li`,{children:`Combine grouping with sorting and filtering for powerful data analysis`}),(0,Y.jsx)(`li`,{children:`The Group By panel supports keyboard navigation for accessibility`}),(0,Y.jsx)(`li`,{children:`Grouped state persists across data updates automatically`})]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`24px`,backgroundColor:`white`,padding:`24px`,borderRadius:`8px`,boxShadow:`0 1px 2px rgba(0,0,0,0.05)`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`h2`,{style:{fontSize:`18px`,fontWeight:`600`,marginBottom:`16px`,color:`#111827`},children:`🎯 Common Use Cases`}),(0,Y.jsxs)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(250px, 1fr))`,gap:`16px`,fontSize:`14px`},children:[(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`📊 Sales Analysis`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Region → Country → Sales Rep to analyze sales hierarchy`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`👥 HR Reports`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Department → Position to view organizational structure`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`💰 Financial Data`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Category → Sub-category to analyze expenses`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`📦 Inventory`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Warehouse → Category → Product for stock overview`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`📅 Project Management`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Status → Priority → Assignee for task organization`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px`,backgroundColor:`#f9fafb`,borderRadius:`6px`,border:`1px solid #e5e7eb`},children:[(0,Y.jsx)(`div`,{style:{fontWeight:`600`,color:`#111827`,marginBottom:`8px`},children:`🛒 E-commerce`}),(0,Y.jsx)(`div`,{style:{color:`#6b7280`,fontSize:`13px`},children:`Group by Category → Brand → Product for catalog management`})]})]})]})]})})},ZY=()=>[{field:`id`,headerName:`ID`,width:80,sortable:!0,filterable:!0},{field:`firstName`,headerName:`First Name`,width:150,sortable:!0,filterable:!0,editable:!0},{field:`lastName`,headerName:`Last Name`,width:150,sortable:!0,filterable:!0,editable:!0},{field:`email`,headerName:`Email`,width:220,sortable:!0,filterable:!0},{field:`phone`,headerName:`Phone`,width:160,sortable:!0,filterable:!0},{field:`department`,headerName:`Department`,width:160,sortable:!0,filterable:!0},{field:`position`,headerName:`Position`,width:180,sortable:!0,filterable:!0},{field:`salary`,headerName:`Salary`,width:120,sortable:!0,filterable:!0},{field:`startDate`,headerName:`Start Date`,width:140,sortable:!0,filterable:!0},{field:`city`,headerName:`City`,width:140,sortable:!0,filterable:!0},{field:`state`,headerName:`State`,width:120,sortable:!0,filterable:!0},{field:`country`,headerName:`Country`,width:140,sortable:!0,filterable:!0},{field:`zipCode`,headerName:`Zip Code`,width:120,sortable:!0,filterable:!0},{field:`manager`,headerName:`Manager`,width:160,sortable:!0,filterable:!0},{field:`team`,headerName:`Team`,width:150,sortable:!0,filterable:!0},{field:`level`,headerName:`Level`,width:100,sortable:!0,filterable:!0},{field:`rating`,headerName:`Rating`,width:100,sortable:!0,filterable:!0},{field:`projects`,headerName:`Projects`,width:120,sortable:!0,filterable:!0},{field:`skills`,headerName:`Skills`,width:200,sortable:!0,filterable:!0},{field:`notes`,headerName:`Notes`,width:250,sortable:!0,filterable:!0}],QY=[`Engineering`,`Marketing`,`Sales`,`HR`,`Finance`,`Legal`,`Operations`,`Support`],$Y=[`Engineer`,`Manager`,`Director`,`VP`,`Analyst`,`Lead`,`Coordinator`,`Specialist`],eX=[`New York`,`San Francisco`,`Chicago`,`Austin`,`Seattle`,`Boston`,`Denver`,`Portland`],tX=[`NY`,`CA`,`IL`,`TX`,`WA`,`MA`,`CO`,`OR`],nX=[`Alpha`,`Beta`,`Gamma`,`Delta`,`Epsilon`,`Zeta`,`Eta`,`Theta`],rX=[`React`,`TypeScript`,`Node.js`,`Python`,`SQL`,`AWS`,`Docker`,`GraphQL`],iX=e=>Array.from({length:e},(e,t)=>({id:t+1,firstName:`First${t+1}`,lastName:`Last${t+1}`,email:`user${t+1}@example.com`,phone:`(555) ${String(100+t%900).padStart(3,`0`)}-${String(1e3+t%9e3).padStart(4,`0`)}`,department:QY[t%QY.length],position:$Y[t%$Y.length],salary:5e4+t*2500%1e5,startDate:`202${t%5}-${String(t%12+1).padStart(2,`0`)}-${String(t%28+1).padStart(2,`0`)}`,city:eX[t%eX.length],state:tX[t%tX.length],country:`USA`,zipCode:String(1e4+t*111%89999),manager:`Manager${t%5+1}`,team:nX[t%nX.length],level:`L${t%6+1}`,rating:(t%5+1).toFixed(1),projects:t%10+1,skills:rX.slice(0,t%rX.length+1).join(`, `),notes:`Employee notes for row ${t+1} - Lorem ipsum dolor sit amet`})),aX=ZY(),oX=iX(50);const sX=()=>(0,Y.jsxs)(`div`,{style:{padding:`24px`},children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`24px`},children:[(0,Y.jsx)(`h1`,{style:{fontSize:`24px`,fontWeight:700,marginBottom:`8px`},children:`🐛 Bug #1: Header Does Not Scroll Horizontally With Body`}),(0,Y.jsx)(`p`,{style:{color:`#64748b`,fontSize:`14px`,lineHeight:`1.6`},children:`This demo reproduces the bug where the table header stays fixed while the body scrolls horizontally. With 20 columns, horizontal overflow is guaranteed. Try scrolling the table body to the right — the header should follow but doesn't.`}),(0,Y.jsxs)(`div`,{style:{marginTop:`12px`,padding:`12px 16px`,backgroundColor:`#fef3c7`,border:`1px solid #f59e0b`,borderRadius:`6px`,fontSize:`13px`,color:`#92400e`},children:[(0,Y.jsx)(`strong`,{children:`Steps to reproduce:`}),` Scroll the grid body horizontally using the scrollbar or trackpad. Observe that the column headers become misaligned with the data columns.`]})]}),(0,Y.jsx)(bi,{columns:aX,rows:oX,pageSize:20})]});var cX=[`Engineering`,`Sales`,`Marketing`,`Finance`,`HR`,`Operations`,`Legal`,`Support`],lX=[`Active`,`Inactive`,`On Leave`,`Probation`],uX=[`USA`,`UK`,`Canada`,`Germany`,`France`,`Australia`,`Japan`,`India`,`Brazil`];function dX(e){let t=[];for(let n=0;n<e;n++)t.push({id:n+1,name:`Employee ${n+1}`,position:[`Software Engineer`,`Senior Engineer`,`Tech Lead`,`Manager`,`Director`,`VP`,`Analyst`,`Designer`][n%8],department:cX[n%cX.length],salary:4e4+n*7919%16e4,joinDate:`${2015+n%10}-${String(n%12+1).padStart(2,`0`)}-${String(n%28+1).padStart(2,`0`)}`,status:lX[n%lX.length],country:uX[n%uX.length],email:`employee${n+1}@example.com`});return t}var fX=1e4,pX=null;function mX(){return pX||=dX(fX),pX}async function hX(e){let t=80+Math.random()*120;await new Promise(e=>setTimeout(e,t));let n=[...mX()];for(let[t,r]of Object.entries(e.filters)){if(!r)continue;let e=r.toLowerCase();n=n.filter(n=>{let r=n[t];return r==null?!1:String(r).toLowerCase().includes(e)})}if(e.sortField){let t=e.sortDirection===`desc`?-1:1,r=e.sortField;n.sort((e,n)=>{let i=e[r],a=n[r];return i==null&&a==null?0:i==null?1:a==null?-1:typeof i==`number`&&typeof a==`number`?(i-a)*t:String(i).localeCompare(String(a))*t})}let r=n.length,i=Math.max(1,Math.ceil(r/e.pageSize)),a=e.page*e.pageSize;return{rows:n.slice(a,a+e.pageSize),totalRows:r,page:e.page,pageSize:e.pageSize,totalPages:i}}const gX=()=>{let e=(0,b.useMemo)(()=>[{field:`id`,headerName:`ID`,width:80,sortable:!0,filterable:!0},{field:`name`,headerName:`Name`,width:180,sortable:!0,filterable:!0},{field:`position`,headerName:`Position`,width:170,sortable:!0,filterable:!0},{field:`department`,headerName:`Department`,width:140,sortable:!0,filterable:!0},{field:`salary`,headerName:`Salary`,width:120,sortable:!0,filterable:!0},{field:`country`,headerName:`Country`,width:120,sortable:!0,filterable:!0},{field:`joinDate`,headerName:`Join Date`,width:130,sortable:!0,filterable:!0},{field:`status`,headerName:`Status`,width:110,sortable:!0,filterable:!0},{field:`email`,headerName:`Email`,width:220,sortable:!0,filterable:!0}],[]),[t,n]=(0,b.useState)(0),[r,i]=(0,b.useState)(20),[a,o]=(0,b.useState)(void 0),[s,c]=(0,b.useState)(`asc`),[l,u]=(0,b.useState)({}),[d,f]=(0,b.useState)([]),[p,m]=(0,b.useState)(0),[h,g]=(0,b.useState)(1),[_,v]=(0,b.useState)(!1),[y,x]=(0,b.useState)(e.map(e=>e.field)),[S,C]=(0,b.useState)([]),[w,T]=(0,b.useState)([]),E=(0,b.useRef)(0),D=(0,b.useRef)(null);(0,b.useEffect)(()=>{let e=!1,n={page:t,pageSize:r,sortField:a,sortDirection:s,filters:l};v(!0);let i=performance.now();return hX(n).then(t=>{if(e)return;let r=Math.round(performance.now()-i);f(t.rows),m(t.totalRows),g(t.totalPages),v(!1);let a={id:++E.current,timestamp:new Date().toLocaleTimeString(),request:n,response:{totalRows:t.totalRows,returnedRows:t.rows.length,totalPages:t.totalPages},durationMs:r};T(e=>[...e.slice(-49),a])}),()=>{e=!0}},[t,r,a,s,l]),(0,b.useEffect)(()=>{D.current&&(D.current.scrollTop=D.current.scrollHeight)},[w]);let O=e=>{a===e?s===`asc`?c(`desc`):o(void 0):(o(e),c(`asc`)),n(0)},k=(e,t)=>{u(n=>({...n,[e]:t})),n(0)},A=e=>{i(e),n(0)},j=e=>{C(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},M=(e,t)=>{x(n=>{let r=[...n],[i]=r.splice(e,1);return r.splice(t,0,i),r})},N=()=>{x(e.map(e=>e.field)),C([])},P=(0,b.useMemo)(()=>y.filter(e=>!S.includes(e)).map(t=>e.find(e=>e.field===t)).filter(Boolean),[y,S,e]);return(0,Y.jsxs)(`div`,{style:{padding:`20px`},children:[(0,Y.jsxs)(`div`,{style:{marginBottom:`20px`},children:[(0,Y.jsx)(`h1`,{style:{fontSize:`24px`,fontWeight:`bold`,marginBottom:`8px`},children:`Server-Side Features Demo`}),(0,Y.jsxs)(`p`,{style:{color:`#64748b`,marginBottom:`16px`},children:[`This demo showcases `,(0,Y.jsx)(`strong`,{children:`server-side sorting, pagination, and column filtering`}),` with a traditional paginated grid backed by `,(0,Y.jsxs)(`strong`,{children:[fX.toLocaleString(),` rows`]}),`. Every sort, filter, and page change triggers a real server request — watch the request log below.`]}),(0,Y.jsxs)(`div`,{style:{backgroundColor:`#f1f5f9`,padding:`16px`,borderRadius:`6px`,marginBottom:`20px`},children:[(0,Y.jsx)(`h2`,{style:{fontSize:`16px`,fontWeight:`600`,marginBottom:`8px`},children:`Features:`}),(0,Y.jsxs)(`ul`,{style:{listStyle:`disc`,paddingLeft:`20px`,color:`#475569`,lineHeight:`1.6`},children:[(0,Y.jsxs)(`li`,{children:[(0,Y.jsx)(`strong`,{children:`Server-side pagination:`}),` Fetches only the current page from the server`]}),(0,Y.jsxs)(`li`,{children:[(0,Y.jsx)(`strong`,{children:`Server-side sorting:`}),` Click column headers — sorting is applied on the server`]}),(0,Y.jsxs)(`li`,{children:[(0,Y.jsx)(`strong`,{children:`Server-side filtering:`}),` Type in filter boxes — filters are applied on the server`]}),(0,Y.jsxs)(`li`,{children:[(0,Y.jsx)(`strong`,{children:`Column chooser:`}),` Show/hide & reorder columns (client-side — no server round-trip needed)`]}),(0,Y.jsxs)(`li`,{children:[(0,Y.jsx)(`strong`,{children:`Request log:`}),` Watch live server requests and response times`]})]})]}),(0,Y.jsxs)(`div`,{style:{backgroundColor:`#dbeafe`,padding:`16px`,borderRadius:`6px`,marginBottom:`20px`,border:`1px solid #93c5fd`},children:[(0,Y.jsx)(`h2`,{style:{fontSize:`16px`,fontWeight:`600`,marginBottom:`8px`,color:`#1e40af`},children:`Try it out:`}),(0,Y.jsxs)(`ul`,{style:{listStyle:`disc`,paddingLeft:`20px`,color:`#1e3a8a`,lineHeight:`1.6`},children:[(0,Y.jsx)(`li`,{children:`Click column headers to sort (watch the request log update)`}),(0,Y.jsx)(`li`,{children:`Type in the filter boxes below each header`}),(0,Y.jsx)(`li`,{children:`Navigate between pages using the pagination controls`}),(0,Y.jsxs)(`li`,{children:[`Use the `,(0,Y.jsx)(`strong`,{children:`Columns`}),` button to show/hide and reorder columns`]})]})]}),(0,Y.jsxs)(`div`,{style:{backgroundColor:`#fef3c7`,padding:`16px`,borderRadius:`6px`,marginBottom:`20px`,border:`1px solid #fcd34d`},children:[(0,Y.jsx)(`h2`,{style:{fontSize:`16px`,fontWeight:`600`,marginBottom:`8px`,color:`#92400e`},children:`Why column chooser doesn't need server-side handling:`}),(0,Y.jsxs)(`p`,{style:{color:`#78350f`,lineHeight:`1.6`},children:[`Column visibility is purely a `,(0,Y.jsx)(`strong`,{children:`UI concern`}),`. The server returns all fields for each row, and the client simply decides which columns to render. This keeps the API simple and avoids unnecessary coupling between the frontend layout and backend queries.`]})]})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,marginBottom:`12px`,flexWrap:`wrap`},children:[(0,Y.jsx)(Un,{columns:e,columnOrder:y,hiddenColumns:S,onToggleVisibility:j,onReorderColumns:M,onResetLayout:N}),(0,Y.jsxs)(`span`,{style:{color:`#64748b`,fontSize:`13px`},children:[p.toLocaleString(),` total rows · Page `,t+1,` of `,h,_&&(0,Y.jsx)(`span`,{style:{marginLeft:`8px`,color:`#3b82f6`},children:`⏳ Loading...`})]})]}),(0,Y.jsx)(`div`,{style:{border:`1px solid #e2e8f0`,borderRadius:`8px`,overflow:`hidden`,marginBottom:`16px`},children:(0,Y.jsx)(`div`,{style:{overflowX:`auto`},children:(0,Y.jsxs)(`table`,{style:{width:`100%`,borderCollapse:`collapse`,fontSize:`14px`},children:[(0,Y.jsxs)(`thead`,{children:[(0,Y.jsx)(`tr`,{style:{backgroundColor:`#f8fafc`},children:P.map(e=>{let t=a===e.field;return(0,Y.jsxs)(`th`,{onClick:()=>e.sortable!==!1&&O(e.field),style:{padding:`10px 12px`,textAlign:`left`,fontWeight:600,color:`#334155`,borderBottom:`2px solid #e2e8f0`,cursor:e.sortable===!1?`default`:`pointer`,userSelect:`none`,whiteSpace:`nowrap`,width:e.width,minWidth:e.width,position:`relative`},children:[e.headerName,t&&(0,Y.jsx)(`span`,{style:{marginLeft:`4px`,fontSize:`12px`},children:s===`asc`?`▲`:`▼`})]},e.field)})}),(0,Y.jsx)(`tr`,{style:{backgroundColor:`#f1f5f9`},children:P.map(e=>(0,Y.jsx)(`th`,{style:{padding:`4px 8px`,borderBottom:`1px solid #e2e8f0`},children:e.filterable!==!1&&(0,Y.jsx)(`input`,{type:`text`,placeholder:`Filter ${e.headerName}...`,value:l[e.field]||``,onChange:t=>k(e.field,t.target.value),style:{width:`100%`,padding:`4px 8px`,fontSize:`12px`,border:`1px solid #cbd5e1`,borderRadius:`4px`,outline:`none`,boxSizing:`border-box`}})},`filter-${e.field}`))})]}),(0,Y.jsx)(`tbody`,{children:d.length===0?(0,Y.jsx)(`tr`,{children:(0,Y.jsx)(`td`,{colSpan:P.length,style:{textAlign:`center`,padding:`40px`,color:`#94a3b8`},children:_?`Loading...`:`No rows match the current filters`})}):d.map((e,t)=>(0,Y.jsx)(`tr`,{style:{backgroundColor:t%2==0?`#ffffff`:`#f8fafc`,transition:`background-color 0.15s`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`#eff6ff`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=t%2==0?`#ffffff`:`#f8fafc`},children:P.map(t=>(0,Y.jsx)(`td`,{style:{padding:`8px 12px`,borderBottom:`1px solid #f1f5f9`,color:`#475569`,whiteSpace:`nowrap`},children:t.field===`salary`?`$${Number(e[t.field]).toLocaleString()}`:t.field===`status`?(0,Y.jsx)(vX,{status:String(e[t.field])}):String(e[t.field]??``)},t.field))},e.id))})]})})}),(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,flexWrap:`wrap`,gap:`12px`,marginBottom:`24px`},children:[(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`6px`},children:[(0,Y.jsx)(`span`,{style:{fontSize:`13px`,color:`#64748b`},children:`Rows per page:`}),(0,Y.jsx)(`select`,{value:r,onChange:e=>A(Number(e.target.value)),style:{padding:`4px 8px`,borderRadius:`4px`,border:`1px solid #cbd5e1`,fontSize:`13px`},children:[10,20,50,100].map(e=>(0,Y.jsx)(`option`,{value:e,children:e},e))})]}),(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`4px`},children:[(0,Y.jsx)(_X,{disabled:t===0,onClick:()=>n(0),label:`«`}),(0,Y.jsx)(_X,{disabled:t===0,onClick:()=>n(t-1),label:`‹`}),(()=>{let e=[];if(h<=7)for(let t=0;t<h;t++)e.push(t);else{e.push(0),t>2&&e.push(`...`);for(let n=Math.max(1,t-1);n<=Math.min(h-2,t+1);n++)e.push(n);t<h-3&&e.push(`...`),e.push(h-1)}return e})().map((e,r)=>typeof e==`string`?(0,Y.jsx)(`span`,{style:{padding:`0 4px`,color:`#94a3b8`},children:`…`},`ellipsis-${r}`):(0,Y.jsx)(_X,{active:e===t,onClick:()=>n(e),label:String(e+1)},e)),(0,Y.jsx)(_X,{disabled:t>=h-1,onClick:()=>n(t+1),label:`›`}),(0,Y.jsx)(_X,{disabled:t>=h-1,onClick:()=>n(h-1),label:`»`})]}),(0,Y.jsxs)(`span`,{style:{fontSize:`13px`,color:`#64748b`},children:[`Showing `,t*r+1,`–`,Math.min((t+1)*r,p),` of `,p.toLocaleString()]})]}),(0,Y.jsxs)(`div`,{style:{marginBottom:`40px`},children:[(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,justifyContent:`space-between`,marginBottom:`8px`},children:[(0,Y.jsx)(`h2`,{style:{fontSize:`18px`,fontWeight:`600`},children:`📡 Server Request Log`}),(0,Y.jsx)(`button`,{onClick:()=>T([]),style:{padding:`4px 12px`,fontSize:`12px`,border:`1px solid #cbd5e1`,borderRadius:`4px`,background:`#fff`,cursor:`pointer`},children:`Clear`})]}),(0,Y.jsx)(`div`,{ref:D,style:{maxHeight:`240px`,overflowY:`auto`,border:`1px solid #e2e8f0`,borderRadius:`8px`,backgroundColor:`#1e293b`,padding:`12px`,fontFamily:`monospace`,fontSize:`12px`,lineHeight:`1.6`,color:`#e2e8f0`},children:w.length===0?(0,Y.jsx)(`div`,{style:{color:`#64748b`},children:`No requests yet — interact with the grid to see server requests appear here.`}):w.map(e=>(0,Y.jsxs)(`div`,{style:{marginBottom:`6px`},children:[(0,Y.jsxs)(`span`,{style:{color:`#94a3b8`},children:[`[`,e.timestamp,`]`]}),` `,(0,Y.jsx)(`span`,{style:{color:`#38bdf8`},children:`GET`}),` `,(0,Y.jsxs)(`span`,{style:{color:`#a5f3fc`},children:[`/api/employees?page=`,e.request.page+1,`&pageSize=`,e.request.pageSize,e.request.sortField&&`&sort=${e.request.sortField}:${e.request.sortDirection}`,Object.entries(e.request.filters).filter(([,e])=>e).map(([e,t])=>`&${e}=${t}`).join(``)]}),` → `,(0,Y.jsxs)(`span`,{style:{color:`#4ade80`},children:[e.response.returnedRows,` rows / `,e.response.totalRows.toLocaleString(),` total`]}),` `,(0,Y.jsxs)(`span`,{style:{color:`#fbbf24`},children:[`(`,e.durationMs,`ms)`]})]},e.id))})]}),(0,Y.jsxs)(`div`,{style:{marginTop:`40px`,position:`relative`,zIndex:0},children:[(0,Y.jsx)(`h2`,{style:{fontSize:`20px`,fontWeight:`bold`,marginBottom:`16px`},children:`Implementation Example`}),(0,Y.jsx)(op,{title:`Connecting to your backend`,examples:[{label:`React`,language:`tsx`,code:`import { useState, useEffect, useCallback } from 'react';
|
|
2216
|
+
import { DataGrid } from 'react-open-source-grid';
|
|
2217
|
+
|
|
2218
|
+
function ServerSideGrid() {
|
|
2219
|
+
const [rows, setRows] = useState([]);
|
|
2220
|
+
const [page, setPage] = useState(0);
|
|
2221
|
+
const [pageSize] = useState(20);
|
|
2222
|
+
const [sort, setSort] = useState({ field: 'id', dir: 'asc' });
|
|
2223
|
+
const [filters, setFilters] = useState({});
|
|
2224
|
+
const [totalRows, setTotalRows] = useState(0);
|
|
2225
|
+
|
|
2226
|
+
// Fetch data from your API whenever page/sort/filter changes
|
|
2227
|
+
const fetchData = useCallback(async () => {
|
|
2228
|
+
const params = new URLSearchParams({
|
|
2229
|
+
page: String(page + 1),
|
|
2230
|
+
pageSize: String(pageSize),
|
|
2231
|
+
...(sort.field && { sortField: sort.field, sortDir: sort.dir }),
|
|
2232
|
+
...filters,
|
|
2233
|
+
});
|
|
2234
|
+
|
|
2235
|
+
const res = await fetch(\`/api/employees?\${params}\`);
|
|
2236
|
+
const data = await res.json();
|
|
2237
|
+
|
|
2238
|
+
setRows(data.rows);
|
|
2239
|
+
setTotalRows(data.totalRows);
|
|
2240
|
+
}, [page, pageSize, sort, filters]);
|
|
2241
|
+
|
|
2242
|
+
useEffect(() => { fetchData(); }, [fetchData]);
|
|
2243
|
+
|
|
2244
|
+
return (
|
|
2245
|
+
<DataGrid
|
|
2246
|
+
columns={columns}
|
|
2247
|
+
rows={rows}
|
|
2248
|
+
pageSize={pageSize}
|
|
2249
|
+
// Hook into grid events to trigger server requests
|
|
2250
|
+
onSortChange={(field, dir) => {
|
|
2251
|
+
setSort({ field, dir });
|
|
2252
|
+
setPage(0);
|
|
2253
|
+
}}
|
|
2254
|
+
onFilterChange={(newFilters) => {
|
|
2255
|
+
setFilters(newFilters);
|
|
2256
|
+
setPage(0);
|
|
2257
|
+
}}
|
|
2258
|
+
onPageChange={(newPage) => setPage(newPage)}
|
|
2259
|
+
/>
|
|
2260
|
+
);
|
|
2261
|
+
}`},{label:`REST API`,language:`json`,code:`// GET /api/employees?page=1&pageSize=20&sortField=name&sortDir=asc&department=Engineering
|
|
2262
|
+
|
|
2263
|
+
// Response:
|
|
2264
|
+
{
|
|
2265
|
+
"rows": [
|
|
2266
|
+
{ "id": 42, "name": "Alice Chen", "department": "Engineering", ... },
|
|
2267
|
+
{ "id": 87, "name": "Bob Park", "department": "Engineering", ... }
|
|
2268
|
+
],
|
|
2269
|
+
"totalRows": 3420,
|
|
2270
|
+
"page": 1,
|
|
2271
|
+
"pageSize": 20,
|
|
2272
|
+
"totalPages": 171
|
|
2273
|
+
}`}]})]})]})};var _X=({label:e,onClick:t,disabled:n,active:r})=>(0,Y.jsx)(`button`,{onClick:t,disabled:n,style:{padding:`4px 10px`,fontSize:`13px`,border:r?`1px solid #3b82f6`:`1px solid #cbd5e1`,borderRadius:`4px`,background:r?`#3b82f6`:n?`#f1f5f9`:`#fff`,color:r?`#fff`:n?`#94a3b8`:`#334155`,cursor:n?`not-allowed`:`pointer`,fontWeight:r?600:400,minWidth:`32px`},children:e}),vX=({status:e})=>{let t={Active:{bg:`#dcfce7`,text:`#16a34a`},Inactive:{bg:`#fee2e2`,text:`#dc2626`},"On Leave":{bg:`#fef9c3`,text:`#ca8a04`},Probation:{bg:`#dbeafe`,text:`#2563eb`}}[e]||{bg:`#f1f5f9`,text:`#475569`};return(0,Y.jsx)(`span`,{style:{padding:`2px 8px`,borderRadius:`9999px`,fontSize:`12px`,fontWeight:500,backgroundColor:t.bg,color:t.text},children:e})},yX=gX,bX={"/":`home`,"/demo/standard":`standard`,"/demo/virtual-scrolling":`virtual`,"/demo/cell-renderers":`renderers`,"/demo/column-filters":`filters`,"/demo/faceted-search":`faceted`,"/demo/filtered-search":`filtered-search`,"/demo/layout-persistence":`persistence`,"/demo/infinite-scroll":`infinite`,"/demo/themes":`themes`,"/demo/density-mode":`density`,"/demo/tree-data":`tree`,"/demo/row-dragging":`drag`,"/demo/row-pinning":`rowpin`,"/demo/market-data":`market`,"/demo/accessibility":`accessibility`,"/demo/context-menu":`contextmenu`,"/demo/tooltip":`tooltip`,"/demo/benchmark":`benchmark`,"/demo/feature-gallery":`gallery`,"/api/reference":`api-reference`,"/api/demo":`api-demo`,"/demo/pivot-table":`pivot`,"/demo/advanced-editors":`advanced-editors`,"/demo/charts":`charts`,"/demo/master-detail":`master-detail`,"/demo/group-by":`groupby`,"/demo/horizontal-scroll-bug":`horizontal-scroll-bug`,"/demo/server-side":`server-side`};function xX(){let e=Pe(),t=je(),[n,r]=(0,b.useState)(new Set([`gettingstarted`,`performance`,`datafeatures`,`customization`,`documentation`])),[i,a]=(0,b.useState)(``),o=bX[t.pathname]||`home`,s=[{label:`Getting Started`,icon:`🏠`,items:[{id:`home`,label:`Home`,icon:`🏠`,description:`Overview and installation`,path:`/`},{id:`standard`,label:`Standard Demo`,icon:`📊`,description:`Basic features with pagination`,path:`/demo/standard`}]},{label:`Performance`,icon:`⚡`,items:[{id:`virtual`,label:`Virtual Scrolling`,icon:`🚀`,description:`High-performance rendering`,path:`/demo/virtual-scrolling`},{id:`infinite`,label:`Infinite Scroll`,icon:`♾️`,description:`Server-side 100M rows`,path:`/demo/infinite-scroll`},{id:`market`,label:`Market Data`,icon:`📈`,description:`Live streaming with 1000+ updates/sec`,path:`/demo/market-data`},{id:`server-side`,label:`Server-Side Features`,icon:`🖥️`,description:`Server-side sort, filter & pagination`,path:`/demo/server-side`}]},{label:`Data Features`,icon:`🌲`,items:[{id:`pivot`,label:`Pivot Table`,icon:`📊`,description:`Dynamic pivot tables with aggregation`,path:`/demo/pivot-table`},{id:`groupby`,label:`Group By`,icon:`🗂️`,description:`Drag & drop columns to group rows hierarchically`,path:`/demo/group-by`},{id:`tree`,label:`Tree Data`,icon:`🌲`,description:`Hierarchical rows & expand/collapse`,path:`/demo/tree-data`},{id:`drag`,label:`Row Dragging`,icon:`↕️`,description:`Drag & drop row reordering`,path:`/demo/row-dragging`},{id:`rowpin`,label:`Row Pinning`,icon:`📌`,description:`Pin rows to top/bottom (sticky)`,path:`/demo/row-pinning`},{id:`filters`,label:`Column Filters`,icon:`🔍`,description:`Advanced filtering options`,path:`/demo/column-filters`},{id:`faceted`,label:`Faceted Search`,icon:`🎯`,description:`Filter panel with value counts`,path:`/demo/faceted-search`},{id:`filtered-search`,label:`Filtered Search Bar`,icon:`🔍`,description:`GitLab-style token-based search`,path:`/demo/filtered-search`},{id:`contextmenu`,label:`Context Menu`,icon:`📋`,description:`Right-click menu with copy, export, & more`,path:`/demo/context-menu`},{id:`advanced-editors`,label:`Advanced Editors`,icon:`✏️`,description:`5 enterprise cell editors (Select, Date, Numeric, Multi-Select, Markdown)`,path:`/demo/advanced-editors`},{id:`charts`,label:`Integrated Charts`,icon:`📊`,description:`Quick charts from grid selections`,path:`/demo/charts`},{id:`master-detail`,label:`Master/Detail`,icon:`🔽`,description:`Expandable rows with nested content`,path:`/demo/master-detail`}]},{label:`Customization`,icon:`🎨`,items:[{id:`renderers`,label:`Cell Renderers`,icon:`🎭`,description:`Custom cell components`,path:`/demo/cell-renderers`},{id:`themes`,label:`Theme System`,icon:`🎨`,description:`10 built-in themes: Quartz, Alpine, Material, Dark, Nord, Dracula, Solarized, Monokai, One Dark`,path:`/demo/themes`},{id:`density`,label:`Density Modes`,icon:`📏`,description:`Compact/Normal/Comfortable spacing`,path:`/demo/density-mode`},{id:`persistence`,label:`Layout Persistence`,icon:`💾`,description:`Save & restore layouts`,path:`/demo/layout-persistence`},{id:`tooltip`,label:`Tooltips`,icon:`💬`,description:`Cell & row tooltips with smart placement`,path:`/demo/tooltip`}]},{label:`Accessibility`,icon:`♿`,items:[{id:`accessibility`,label:`Accessibility (A11y)`,icon:`♿`,description:`Keyboard navigation & ARIA support`,path:`/demo/accessibility`}]},{label:`Documentation`,icon:`📚`,items:[{id:`api-reference`,label:`Grid API Reference`,icon:`📖`,description:`100+ methods for programmatic control`,path:`/api/reference`},{id:`api-demo`,label:`Interactive API Demo`,icon:`🎮`,description:`Try all API methods with live examples`,path:`/api/demo`}]},{label:`Playground`,icon:`🧪`,items:[{id:`gallery`,label:`Feature Gallery`,icon:`🎯`,description:`Browse all features with live demos`,path:`/demo/feature-gallery`},{id:`benchmark`,label:`Benchmark (1M rows)`,icon:`🚀`,description:`Test performance with massive datasets`,path:`/demo/benchmark`},{id:`horizontal-scroll-bug`,label:`Bug #1: Scroll Sync`,icon:`🐛`,description:`Header misalignment on horizontal scroll`,path:`/demo/horizontal-scroll-bug`}]}],c=e=>{let t=new Set(n);t.has(e)?t.delete(e):t.add(e),r(t)},l=s.map(e=>({...e,items:e.items.filter(e=>e.label.toLowerCase().includes(i.toLowerCase())||e.description.toLowerCase().includes(i.toLowerCase()))})).filter(e=>e.items.length>0),u=i?l:s,d=e=>i?!0:n.has(e.toLowerCase().replace(/\s+/g,``));return(0,Y.jsxs)(`div`,{style:{display:`flex`,height:`100vh`,backgroundColor:`#ffffff`},children:[(0,Y.jsxs)(`aside`,{style:{width:`280px`,backgroundColor:`#1e293b`,color:`white`,display:`flex`,flexDirection:`column`,flexShrink:0,boxShadow:`2px 0 8px rgba(0, 0, 0, 0.1)`},children:[(0,Y.jsxs)(`div`,{style:{padding:`20px 20px`,borderBottom:`1px solid rgba(255, 255, 255, 0.1)`,backgroundColor:`#0f172a`},children:[(0,Y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,marginBottom:`8px`},children:[(0,Y.jsx)(`img`,{src:`/logo.png`,alt:`Logo`,style:{width:`32px`,height:`32px`,objectFit:`contain`}}),(0,Y.jsx)(`span`,{style:{fontSize:`24px`,fontWeight:`bold`},children:`React DataGrid`})]}),(0,Y.jsx)(`div`,{style:{fontSize:`12px`,color:`rgba(255, 255, 255, 0.6)`},children:`Enterprise-grade data grid`})]}),(0,Y.jsxs)(`div`,{style:{padding:`16px 20px`,borderBottom:`1px solid rgba(255, 255, 255, 0.1)`},children:[(0,Y.jsxs)(`div`,{style:{position:`relative`},children:[(0,Y.jsx)(`input`,{type:`text`,placeholder:`Search features...`,value:i,onChange:e=>a(e.target.value),style:{width:`100%`,padding:`8px 12px 8px 36px`,fontSize:`13px`,backgroundColor:`rgba(255, 255, 255, 0.1)`,color:`white`,border:`1px solid rgba(255, 255, 255, 0.2)`,borderRadius:`6px`,outline:`none`,transition:`all 0.15s`},onFocus:e=>{e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.15)`,e.currentTarget.style.borderColor=`rgba(96, 165, 250, 0.5)`},onBlur:e=>{e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.1)`,e.currentTarget.style.borderColor=`rgba(255, 255, 255, 0.2)`}}),(0,Y.jsx)(`svg`,{style:{position:`absolute`,left:`12px`,top:`50%`,transform:`translateY(-50%)`,width:`16px`,height:`16px`,fill:`rgba(255, 255, 255, 0.5)`,pointerEvents:`none`},viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{d:`M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z`})}),i&&(0,Y.jsx)(`button`,{onClick:()=>a(``),style:{position:`absolute`,right:`8px`,top:`50%`,transform:`translateY(-50%)`,backgroundColor:`transparent`,border:`none`,color:`rgba(255, 255, 255, 0.6)`,cursor:`pointer`,padding:`4px`,display:`flex`,alignItems:`center`,borderRadius:`3px`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.1)`,e.currentTarget.style.color=`white`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`transparent`,e.currentTarget.style.color=`rgba(255, 255, 255, 0.6)`},children:(0,Y.jsx)(`svg`,{style:{width:`16px`,height:`16px`},fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{d:`M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z`})})})]}),i&&l.length===0&&(0,Y.jsx)(`div`,{style:{marginTop:`8px`,fontSize:`12px`,color:`rgba(255, 255, 255, 0.5)`,textAlign:`center`},children:`No features found`})]}),(0,Y.jsx)(`nav`,{style:{flex:1,overflowY:`auto`,padding:`16px 0`,scrollbarWidth:`thin`,scrollbarColor:`rgba(255, 255, 255, 0.3) transparent`},children:u.map(t=>{let n=d(t.label);return(0,Y.jsxs)(`div`,{style:{marginBottom:`8px`},children:[(0,Y.jsxs)(`button`,{onClick:()=>c(t.label.toLowerCase().replace(/\s+/g,``)),style:{width:`100%`,display:`flex`,alignItems:`center`,gap:`8px`,padding:`10px 20px`,fontSize:`13px`,fontWeight:600,backgroundColor:`transparent`,color:`rgba(255, 255, 255, 0.8)`,border:`none`,cursor:`pointer`,transition:`all 0.15s`,textAlign:`left`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.05)`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`transparent`},children:[(0,Y.jsx)(`span`,{style:{fontSize:`16px`,transition:`transform 0.2s`,transform:n?`rotate(90deg)`:`rotate(0deg)`},children:`▶`}),(0,Y.jsx)(`span`,{style:{fontSize:`16px`},children:t.icon}),(0,Y.jsx)(`span`,{style:{flex:1},children:t.label})]}),n&&(0,Y.jsx)(`div`,{style:{paddingLeft:`24px`},children:t.items.map(t=>(0,Y.jsxs)(`button`,{onClick:()=>e(t.path),style:{width:`100%`,display:`flex`,alignItems:`flex-start`,gap:`8px`,padding:`10px 16px`,fontSize:`13px`,backgroundColor:o===t.id?`rgba(59, 130, 246, 0.2)`:`transparent`,color:o===t.id?`#60a5fa`:`rgba(255, 255, 255, 0.8)`,border:`none`,borderLeft:o===t.id?`3px solid #60a5fa`:`3px solid transparent`,cursor:`pointer`,transition:`all 0.15s`,textAlign:`left`},onMouseEnter:e=>{o!==t.id&&(e.currentTarget.style.backgroundColor=`rgba(255, 255, 255, 0.05)`)},onMouseLeave:e=>{o!==t.id&&(e.currentTarget.style.backgroundColor=`transparent`)},children:[(0,Y.jsx)(`span`,{style:{fontSize:`16px`,marginTop:`1px`},children:t.icon}),(0,Y.jsxs)(`div`,{style:{flex:1},children:[(0,Y.jsx)(`div`,{style:{fontWeight:o===t.id?600:500},children:t.label}),(0,Y.jsx)(`div`,{style:{fontSize:`11px`,color:o===t.id?`rgba(96, 165, 250, 0.8)`:`rgba(255, 255, 255, 0.5)`,marginTop:`2px`,lineHeight:`1.3`},children:t.description})]})]},t.id))})]},t.label)})}),(0,Y.jsxs)(`div`,{style:{padding:`16px 20px`,borderTop:`1px solid rgba(255, 255, 255, 0.1)`,backgroundColor:`#0f172a`},children:[(0,Y.jsxs)(`a`,{href:`https://github.com/bhushanpoojary/react-open-source-datagrid/issues`,target:`_blank`,rel:`noopener noreferrer`,style:{display:`flex`,alignItems:`center`,gap:`8px`,color:`rgba(255, 255, 255, 0.8)`,textDecoration:`none`,fontSize:`13px`,transition:`color 0.15s`,marginBottom:`12px`},onMouseEnter:e=>{e.currentTarget.style.color=`#60a5fa`},onMouseLeave:e=>{e.currentTarget.style.color=`rgba(255, 255, 255, 0.8)`},children:[(0,Y.jsx)(`svg`,{style:{width:`18px`,height:`18px`},fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{d:`M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z`})}),(0,Y.jsx)(`span`,{children:`Report Issue / Feature`})]}),(0,Y.jsxs)(`a`,{href:`https://github.com/bhushanpoojary/react-open-source-datagrid`,target:`_blank`,rel:`noopener noreferrer`,style:{display:`flex`,alignItems:`center`,gap:`8px`,color:`rgba(255, 255, 255, 0.8)`,textDecoration:`none`,fontSize:`13px`,transition:`color 0.15s`},onMouseEnter:e=>{e.currentTarget.style.color=`white`},onMouseLeave:e=>{e.currentTarget.style.color=`rgba(255, 255, 255, 0.8)`},children:[(0,Y.jsx)(`svg`,{style:{width:`18px`,height:`18px`},fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,Y.jsx)(`path`,{fillRule:`evenodd`,d:`M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z`,clipRule:`evenodd`})}),(0,Y.jsx)(`span`,{children:`View on GitHub`})]})]})]}),(0,Y.jsx)(`main`,{style:{flex:1,overflow:`auto`,backgroundColor:`#f8fafc`},children:(0,Y.jsxs)(at,{children:[(0,Y.jsx)(rt,{path:`/`,element:(0,Y.jsx)(dn,{})}),(0,Y.jsx)(rt,{path:`/demo/standard`,element:(0,Y.jsx)(lp,{})}),(0,Y.jsx)(rt,{path:`/demo/virtual-scrolling`,element:(0,Y.jsx)(up,{})}),(0,Y.jsx)(rt,{path:`/demo/infinite-scroll`,element:(0,Y.jsx)(bp,{})}),(0,Y.jsx)(rt,{path:`/demo/market-data`,element:(0,Y.jsx)(Ip,{})}),(0,Y.jsx)(rt,{path:`/demo/accessibility`,element:(0,Y.jsx)(Lp,{})}),(0,Y.jsx)(rt,{path:`/demo/pivot-table`,element:(0,Y.jsx)(pm,{})}),(0,Y.jsx)(rt,{path:`/demo/group-by`,element:(0,Y.jsx)(XY,{})}),(0,Y.jsx)(rt,{path:`/demo/tree-data`,element:(0,Y.jsx)(kp,{})}),(0,Y.jsx)(rt,{path:`/demo/row-dragging`,element:(0,Y.jsx)(Fp,{})}),(0,Y.jsx)(rt,{path:`/demo/row-pinning`,element:(0,Y.jsx)(Vp,{})}),(0,Y.jsx)(rt,{path:`/demo/cell-renderers`,element:(0,Y.jsx)(dp,{})}),(0,Y.jsx)(rt,{path:`/demo/column-filters`,element:(0,Y.jsx)(fp,{})}),(0,Y.jsx)(rt,{path:`/demo/faceted-search`,element:(0,Y.jsx)(hp,{})}),(0,Y.jsx)(rt,{path:`/demo/filtered-search`,element:(0,Y.jsx)(gp,{})}),(0,Y.jsx)(rt,{path:`/demo/context-menu`,element:(0,Y.jsx)(Bp,{})}),(0,Y.jsx)(rt,{path:`/demo/tooltip`,element:(0,Y.jsx)(Up,{})}),(0,Y.jsx)(rt,{path:`/demo/layout-persistence`,element:(0,Y.jsx)(yp,{})}),(0,Y.jsx)(rt,{path:`/demo/themes`,element:(0,Y.jsx)(xp,{})}),(0,Y.jsx)(rt,{path:`/demo/density-mode`,element:(0,Y.jsx)(Sp,{})}),(0,Y.jsx)(rt,{path:`/demo/feature-gallery`,element:(0,Y.jsx)(Gp,{})}),(0,Y.jsx)(rt,{path:`/demo/benchmark`,element:(0,Y.jsx)(Wp,{})}),(0,Y.jsx)(rt,{path:`/demo/advanced-editors`,element:(0,Y.jsx)(Mm,{})}),(0,Y.jsx)(rt,{path:`/demo/charts`,element:(0,Y.jsx)(WY,{})}),(0,Y.jsx)(rt,{path:`/demo/master-detail`,element:(0,Y.jsx)(JY,{})}),(0,Y.jsx)(rt,{path:`/api/reference`,element:(0,Y.jsx)(Kp,{})}),(0,Y.jsx)(rt,{path:`/api/demo`,element:(0,Y.jsx)(dm,{})}),(0,Y.jsx)(rt,{path:`/demo/horizontal-scroll-bug`,element:(0,Y.jsx)(sX,{})}),(0,Y.jsx)(rt,{path:`/demo/server-side`,element:(0,Y.jsx)(yX,{})})]})})]})}var SX=xX;(0,v.createRoot)(document.getElementById(`root`)).render((0,Y.jsx)(b.StrictMode,{children:(0,Y.jsx)(Ht,{children:(0,Y.jsx)(SX,{})})}));export{qr as a,Gr as c,Wr as i,Hr as n,Yr as o,Ur as r,Kr as s,Jr as t};
|
package/dist/assets/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './index-
|
|
1
|
+
export * from './index-DHtd8tTR.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-
|
|
1
|
+
import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-DHtd8tTR.js";export{e as createPreset};
|
package/dist/index.html
CHANGED
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
}
|
|
71
71
|
})();
|
|
72
72
|
</script>
|
|
73
|
-
<script type="module" crossorigin src="/assets/index-
|
|
73
|
+
<script type="module" crossorigin src="/assets/index-DHtd8tTR.js"></script>
|
|
74
74
|
<link rel="stylesheet" crossorigin href="/assets/index-BzDbdtZY.css">
|
|
75
75
|
</head>
|
|
76
76
|
<body>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ServerSideFeaturesDemo Component
|
|
3
|
+
*
|
|
4
|
+
* Showcases server-side sorting, pagination, and column filtering
|
|
5
|
+
* with a traditional paginated grid. Includes a live request log
|
|
6
|
+
* so users can observe each server request/response.
|
|
7
|
+
*/
|
|
8
|
+
import React from 'react';
|
|
9
|
+
export declare const ServerSideFeaturesDemo: React.FC;
|
|
10
|
+
export default ServerSideFeaturesDemo;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-open-source-grid",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.7.
|
|
4
|
+
"version": "1.7.23",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, integrated charts with context menu, and more",
|
|
7
7
|
"main": "./dist/lib/index.cjs",
|