@vuu-ui/vuu-table 0.8.12 → 0.8.13-debug

package/esm/index.js

@@ -1,2 +1,3512 @@
-import{useCallback as bt,useRef as pr}from"react";import{jsx as fr}from"react/jsx-runtime";var uo=()=>{},dr="vuuColumnResizer",_e=({onDrag:e,onDragEnd:t=uo,onDragStart:o=uo})=>{let n=pr(0),r=bt(i=>{i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault();let a=Math.round(i.clientX),c=a-n.current;n.current=a,c!==0&&e(i,c)},[e]),l=bt(i=>{window.removeEventListener("mouseup",l),window.removeEventListener("mousemove",r),t(i)},[t,r]),s=bt(i=>{o(i),n.current=Math.round(i.clientX),window.addEventListener("mouseup",l),window.addEventListener("mousemove",r),i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault()},[o,r,l]);return fr("div",{className:dr,"data-align":"end",onMouseDown:s})};import{isNumericColumn as Cr}from"@vuu-ui/vuu-utils";var Je=e=>(t,o)=>{let n=[];if(e===void 0)return n;if(t==="header"||t==="column-menu")n.push(...br(o,e)),n.push(...vr(o,e)),n.push(...gr(o,e)),n.push(...hr(o)),n.push({action:"column-settings",icon:"cog",label:"Column Settings",options:o}),n.push({action:"table-settings",icon:"cog",label:"DataGrid Settings",options:o});else if(t==="filter"){let{column:r,filter:l}=o,s=(l==null?void 0:l.column)===(r==null?void 0:r.name);n.push({label:"Edit filter",action:"filter-edit",options:o}),n.push({label:"Remove filter",action:"filter-remove-column",options:o}),r&&!s&&n.push({label:"Remove all filters",action:"remove-filters",options:o})}return n};function br(e,{sort:{sortDefs:t}}){let{column:o}=e,n=[];if(o===void 0)return n;let r=t.length>0;return o.sorted==="A"?n.push({label:"Reverse Sort (DSC)",action:"sort-dsc",options:e}):o.sorted==="D"?n.push({label:"Reverse Sort (ASC)",action:"sort-asc",options:e}):typeof o.sorted=="number"?(o.sorted>0?n.push({label:"Reverse Sort (DSC)",action:"sort-add-dsc",options:e}):n.push({label:"Reverse Sort (ASC)",action:"sort-add-asc",options:e}),r&&Math.abs(o.sorted)<t.length&&n.push({label:"Remove from sort",action:"sort-remove",options:e}),n.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):r?(n.push({label:"Add to sort",children:[{label:"Ascending",action:"sort-add-asc",options:e},{label:"Descending",action:"sort-add-dsc",options:e}]}),n.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):n.push({label:"Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]}),n}function gr(e,t){let{column:o}=e;if(o===void 0||t.groupBy.length===0)return[];let{name:n,label:r=n}=o;return[{label:`Aggregate ${r}`,children:[{label:"Count",action:"agg-count",options:e},{label:"Distinct",action:"agg-distinct",options:e}].concat(Cr(o)?[{label:"Sum",action:"agg-sum",options:e},{label:"Avg",action:"agg-avg",options:e},{label:"High",action:"agg-high",options:e},{label:"Low",action:"agg-low",options:e}]:[])}]}var yt=(e,t)=>({label:`Pin ${t}`,action:`column-pin-${t}`,options:e}),gt=e=>yt(e,"left"),ht=e=>yt(e,"floating"),vt=e=>yt(e,"right");function hr(e){let{column:t}=e;if(t===void 0)return[];let{pin:o}=t,n=[{label:"Hide column",action:"column-hide",options:e},{label:"Remove column",action:"column-remove",options:e}];return o===void 0?n.push({label:"Pin column",children:[gt(e),ht(e),vt(e)]}):o==="left"?n.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[ht(e),vt(e)]}):o==="right"?n.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[gt(e),ht(e)]}):o==="floating"&&n.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[gt(e),vt(e)]}),n}function vr(e,{groupBy:t}){let{column:o}=e,n=[];if(o===void 0)return n;let{name:r,label:l=r}=o;return t.length===0?n.push({label:`Group by ${l}`,action:"group",options:e}):n.push({label:`Add ${l} to group by`,action:"group-add",options:e}),n}import{removeColumnFromFilter as yr}from"@vuu-ui/vuu-utils";import{addGroupColumn as mo,addSortColumn as po,AggregationType as Tr,setAggregations as ge,setSortColumn as fo}from"@vuu-ui/vuu-utils";var wr=(e,t)=>{if(e.filterStruct&&t){let[o,n]=yr(t,e.filterStruct);return{filter:n,filterStruct:o}}else return e},{Average:Dr,Count:Mr,Distinct:Rr,High:xr,Low:Pr,Sum:Hr}=Tr,Xe=({dataSource:e,onPersistentColumnOperation:t})=>n=>{let r=n.options;if(r.column&&e){let{column:l}=r;switch(n.menuId){case"sort-asc":return e.sort=fo(e.sort,l,"A"),!0;case"sort-dsc":return e.sort=fo(e.sort,l,"D"),!0;case"sort-add-asc":return e.sort=po(e.sort,l,"A"),!0;case"sort-add-dsc":return e.sort=po(e.sort,l,"D"),!0;case"group":return e.groupBy=mo(e.groupBy,l),!0;case"group-add":return e.groupBy=mo(e.groupBy,l),!0;case"column-hide":return t({type:"hideColumns",columns:[l]}),!0;case"column-remove":return e.columns=e.columns.filter(s=>s!==l.name),!0;case"filter-remove-column":return e.filter=wr(e.filter,l),!0;case"remove-filters":return e.filter={filter:""},!0;case"agg-avg":return e.aggregations=ge(e.aggregations,l,Dr),!0;case"agg-high":return e.aggregations=ge(e.aggregations,l,xr),!0;case"agg-low":return e.aggregations=ge(e.aggregations,l,Pr),!0;case"agg-count":return e.aggregations=ge(e.aggregations,l,Mr),!0;case"agg-distinct":return e.aggregations=ge(e.aggregations,l,Rr),!0;case"agg-sum":return e.aggregations=ge(e.aggregations,l,Hr),!0;case"column-pin-floating":return t({type:"pinColumn",column:l,pin:"floating"}),!0;case"column-pin-left":return t({type:"pinColumn",column:l,pin:"left"}),!0;case"column-pin-right":return t({type:"pinColumn",column:l,pin:"right"}),!0;case"column-unpin":return t({type:"pinColumn",column:l,pin:void 0}),!0;case"column-settings":return t({type:"columnSettings",column:l}),!0;case"table-settings":return t({type:"tableSettings"}),!0;default:}}return!1};import{ContextMenuProvider as ei}from"@vuu-ui/vuu-popups";import{Button as ti,useIdMemo as oi}from"@salt-ds/core";import{buildColumnMap as pl,getColumnStyle as dl,isGroupColumn as fl,metadataKeys as Cl,notHidden as bl,visibleColumnAtIndex as gl}from"@vuu-ui/vuu-utils";import{useCallback as ko,useMemo as No}from"react";import{isGroupColumn as ho,isJsonColumn as Wr,isJsonGroup as Br,metadataKeys as Ur,notHidden as _r,RowSelected as Jr}from"@vuu-ui/vuu-utils";import Xr from"classnames";import{memo as Qr,useCallback as vo}from"react";import{getColumnStyle as Er,metadataKeys as Sr}from"@vuu-ui/vuu-utils";import{EditableLabel as Ar}from"@vuu-ui/vuu-ui-controls";import Lr from"classnames";import{memo as Kr,useCallback as kr,useRef as Nr,useState as Co}from"react";import{jsx as Qe}from"react/jsx-runtime";var{KEY:bo}=Sr,Tt=Kr(({className:e,column:t,columnMap:o,onClick:n,row:r})=>{let l=Nr(null),{align:s,CellRenderer:i,key:a,pin:c,editable:u,resizing:p,valueFormatter:m}=t,[C,h]=Co(!1),v=m(r[a]),[T,x]=Co(v),g=()=>{var H;(H=l.current)==null||H.focus()},f=H=>{H.key==="Enter"&&h(!0)},M=kr(H=>{n==null||n(H,t)},[t,n]),D=()=>{h(!0)},w=(H="",y="",R=!0,S=!1)=>{var E;h(!1),S?x(H):y!==H&&x(y),R===!1&&((E=l.current)==null||E.focus())},d=Lr(e,{vuuAlignRight:s==="right",vuuPinFloating:c==="floating",vuuPinLeft:c==="left",vuuPinRight:c==="right","vuuTableCell-resizing":p})||void 0,b=Er(t);return u?Qe("div",{className:d,"data-editable":!0,role:"cell",style:b,onKeyDown:f,children:Qe(Ar,{editing:C,value:T,onChange:x,onMouseDownCapture:g,onEnterEditMode:D,onExitEditMode:w,onKeyDown:f,ref:l,tabIndex:0},"title")}):Qe("div",{className:d,role:"cell",style:b,onClick:M,children:i?Qe(i,{column:t,columnMap:o,row:r}):v})},zr);Tt.displayName="TableCell";function zr(e,t){return e.column===t.column&&e.onClick===t.onClick&&e.row[bo]===t.row[bo]&&e.row[e.column.key]===t.row[t.column.key]}import{getColumnStyle as Ir,getGroupValueAndOffset as Vr,metadataKeys as $r}from"@vuu-ui/vuu-utils";import{useCallback as Fr}from"react";import{jsx as wt,jsxs as Gr}from"react/jsx-runtime";var{IS_LEAF:Or}=$r,go=({column:e,onClick:t,row:o})=>{let{columns:n}=e,[r,l]=Vr(n,o),s=Fr(u=>{t==null||t(u,e)},[e,t]),i=Ir(e),a=o[Or],c=Array(l).fill(0).map((u,p)=>wt("span",{className:"vuuTableGroupCell-spacer"},p));return Gr("div",{className:"vuuTableGroupCell vuuPinLeft",onClick:a?void 0:s,role:"cell",style:i,children:[c,a?null:wt("span",{className:"vuuTableGroupCell-toggle","data-icon":"triangle-right"}),wt("span",{children:r})]})};import{jsx as To,jsxs as tl}from"react/jsx-runtime";var{IDX:Yr,IS_EXPANDED:Zr,SELECTED:jr}=Ur,{True:yo,First:qr,Last:el}=Jr,he="vuuTableRow",wo=Qr(function({columnMap:t,columns:o,offset:n,onClick:r,onToggleGroup:l,virtualColSpan:s=0,row:i}){let{[Yr]:a,[Zr]:c,[jr]:u}=i,p=Xr(he,{[`${he}-even`]:a%2===0,[`${he}-expanded`]:c,[`${he}-selected`]:u&yo,[`${he}-selectedStart`]:u&qr,[`${he}-selectedEnd`]:u&el}),m=vo(h=>{let v=h.shiftKey,T=h.ctrlKey||h.metaKey;r==null||r(i,v,T)},[r,i]),C=vo((h,v)=>{(ho(v)||Br(v,i))&&(h.stopPropagation(),l==null||l(i,v))},[l,i]);return tl("div",{"aria-selected":u&yo?!0:void 0,"aria-rowindex":a,className:p,onClick:m,role:"row",style:{transform:`translate3d(0px, ${n}px, 0px)`},children:[s>0?To("div",{role:"cell",style:{width:s}}):null,o.filter(_r).map(h=>{let v=ho(h),T=Wr(h);return To(v?go:Tt,{column:h,columnMap:t,onClick:v||T?C:void 0,row:i},h.name)})]})});import Ro from"classnames";import{useRef as ol}from"react";import{useCallback as Dt,useRef as Do}from"react";var Ye=({column:e,onResize:t,rootRef:o})=>{let n=Do(0),r=Do(!1),{name:l}=e,s=Dt(()=>{if(t&&o.current){console.log("handleResizeStart");let{width:c}=o.current.getBoundingClientRect();n.current=Math.round(c),r.current=!0,t==null||t("begin",l)}},[l,t,o]),i=Dt((c,u)=>{if(o.current&&t){let{width:p}=o.current.getBoundingClientRect(),m=Math.round(p)+u;m!==n.current&&m>0&&(t("resize",l,m),n.current=m)}},[l,t,o]),a=Dt(()=>{t&&(t("end",l,n.current),setTimeout(()=>{r.current=!1},100))},[l,t]);return{isResizing:r.current,onDrag:i,onDragStart:s,onDragEnd:a}};import{jsx as ce,jsxs as Po}from"react/jsx-runtime";var oe="vuuTable-groupHeaderCell",Mo=({column:e,onClick:t,...o})=>ce("span",{...o,className:`${oe}-close`,"data-icon":"close-circle",onClick:()=>t==null?void 0:t(e)}),nl=e=>{let{children:t,column:o,className:n}=e;return Po("div",{className:Ro(`${oe}-col`,n),role:"columnheader",children:[ce("span",{className:`${oe}-label`,children:o.name}),t]})},xo=({column:e,className:t,onRemoveColumn:o,onResize:n,...r})=>{let l=ol(null),{isResizing:s,...i}=Ye({column:e,onResize:n,rootRef:l}),a=Ro(oe,t,{vuuPinLeft:e.pin==="left",[`${oe}-right`]:e.align==="right",[`${oe}-resizing`]:e.resizing,[`${oe}-pending`]:e.groupConfirmed===!1}),{columns:c}=e;return ce("div",{className:a,ref:l,...r,children:Po("div",{className:`${oe}-inner`,children:[c.map(u=>ce(nl,{column:u,children:c.length>1?ce(Mo,{column:u,onClick:o}):null},u.key)),ce(Mo,{"data-align":"end",onClick:o}),e.resizeable!==!1?ce(_e,{...i}):null]})})};import cl from"classnames";import{useCallback as Mt,useRef as Lo}from"react";import Ho from"classnames";import{jsx as Ze,jsxs as rl}from"react/jsx-runtime";var Eo="vuuSortIndicator",So=({sorted:e})=>{if(!e)return null;let t=typeof e=="number"?e<0?"dsc":"asc":e==="A"?"asc":"dsc";return typeof e=="number"?rl("div",{className:Ho(Eo,"multi-col",t),children:[Ze("span",{"data-icon":`sorted-${t}`}),Ze("span",{className:"vuuSortPosition",children:Math.abs(e)})]}):Ze("div",{className:Ho(Eo,"single-col"),children:Ze("span",{"data-icon":`sorted-${t}`})})};import{useContextMenu as ul}from"@vuu-ui/vuu-popups";import{useContextMenu as ll}from"@vuu-ui/vuu-popups";import sl from"classnames";import{useCallback as il}from"react";import{jsx as al}from"react/jsx-runtime";var Ao=({column:e,filter:t})=>{let[o]=ll(),n=il(r=>{r.stopPropagation(),o(r,"filter",{column:e,filter:t})},[e,t,o]);return e.filter?al("div",{className:sl("vuuFilterIndicator"),"data-icon":"filter",onClick:n}):null};import{jsx as Ee,jsxs as ml}from"react/jsx-runtime";var He="vuuTable-headerCell",Ko=({column:e,className:t,onClick:o,onDragStart:n,onResize:r,...l})=>{let s=Lo(null),{isResizing:i,...a}=Ye({column:e,onResize:r,rootRef:s}),[c]=ul(),u=Lo(null),p=T=>{c(T,"header",{column:e})},m=Mt(T=>!i&&(o==null?void 0:o(T)),[i,o]),C=Mt(T=>{u.current=window.setTimeout(()=>{n==null||n(T),u.current=null},500)},[n]),h=Mt(()=>{u.current!==null&&(window.clearTimeout(u.current),u.current=null)},[]),v=cl(He,t,{vuuPinFloating:e.pin==="floating",vuuPinLeft:e.pin==="left",vuuPinRight:e.pin==="right",vuuEndPin:e.endPin,[`${He}-resizing`]:e.resizing,[`${He}-right`]:e.align==="right"});return Ee("div",{className:v,...l,onClick:m,onContextMenu:p,onMouseDown:C,onMouseUp:h,ref:s,children:ml("div",{className:`${He}-inner`,children:[Ee(Ao,{column:e}),Ee("div",{className:`${He}-label`,children:e.label}),Ee(So,{sorted:e.sorted}),e.resizeable!==!1?Ee(_e,{...a}):null]})})};import{jsx as ue,jsxs as zo}from"react/jsx-runtime";var Rt="vuuTable",{RENDER_IDX:hl}=Cl,Io=({columns:e,columnsWithinViewport:t,data:o,getRowOffset:n,headings:r,onColumnResize:l,onHeaderCellDragStart:s,onContextMenu:i,onRemoveColumnFromGroupBy:a,onRowClick:c,onSort:u,onToggleGroup:p,tableId:m,virtualColSpan:C=0,rowCount:h})=>{let v=ko(f=>{s==null||s(f)},[s]),T=No(()=>e.filter(bl),[e]),x=No(()=>pl(e),[e]),g=ko(f=>{var H;let D=f.target.closest(".vuuTable-headerCell"),w=parseInt((H=D==null?void 0:D.dataset.idx)!=null?H:"-1"),d=gl(e,w),b=f.shiftKey;d&&u(d,b)},[e,u]);return zo("div",{"aria-rowcount":h,className:`${Rt}-table`,role:"table",children:[zo("div",{className:`${Rt}-headers`,role:"rowGroup",children:[r.map((f,M)=>ue("div",{className:"vuuTable-heading",children:f.map(({label:D,width:w},d)=>ue("div",{className:"vuuTable-headingCell",style:{width:w},children:D},d))},M)),ue("div",{role:"row",children:T.map((f,M)=>{let D=dl(f);return fl(f)?ue(xo,{column:f,"data-idx":M,onRemoveColumn:a,onResize:l,role:"columnHeader",style:D},M):ue(Ko,{column:f,"data-idx":M,id:`${m}-${M}`,onClick:g,onDragStart:v,onResize:l,role:"columnHeader",style:D},M)})})]}),ue("div",{className:`${Rt}-body`,onContextMenu:i,role:"rowGroup",children:o==null?void 0:o.map(f=>ue(wo,{columnMap:x,columns:t,offset:n(f),onClick:c,virtualColSpan:C,onToggleGroup:p,row:f},f[hl]))})]})};import{useContextMenu as Bs}from"@vuu-ui/vuu-popups";import{applySort as Us,buildColumnMap as _s,isJsonGroup as Js,metadataKeys as Xs,moveItemDeprecated as Qs}from"@vuu-ui/vuu-utils";import{useCallback as J,useEffect as Cn,useMemo as Ys,useRef as $t,useState as Zs}from"react";import{isVuuFeatureAction as vl,isVuuFeatureInvocation as yl}from"@vuu-ui/vuu-data-react";import{getFullRange as xt,metadataKeys as Tl,WindowRange as wl}from"@vuu-ui/vuu-utils";import{useCallback as ve,useEffect as je,useMemo as Dl,useRef as Se,useState as Ml}from"react";var{SELECTED:Ae}=Tl;function Vo({dataSource:e,onConfigChange:t,onFeatureEnabled:o,onFeatureInvocation:n,onSizeChange:r,onSubscribed:l,range:s={from:0,to:0},renderBufferSize:i=0,viewportRowCount:a}){let[,c]=Ml(null),u=Se(!0),p=Se(!1),m=Se({from:0,to:0}),C=Se(null),h=Se([]),v=Dl(()=>new Pt(xt(s)),[]),T=ve(w=>{for(let d of w)v.add(d);h.current=v.data,p.current=!0},[v]),x=ve(w=>{w.type==="subscribed"?l==null||l(w):w.type==="viewport-update"?(typeof w.size=="number"&&(r==null||r(w.size),v.setRowCount(w.size)),w.rows?T(w.rows):typeof w.size=="number"&&(h.current=v.data,p.current=!0)):vl(w)?o==null||o(w):yl(w)?n==null||n(w):console.log(`useDataSource unexpected message ${w.type}`)},[v,o,n,r,l,T]);je(()=>()=>{C.current&&(cancelAnimationFrame(C.current),C.current=null),u.current=!1},[]);let g=ve(()=>{u.current&&(p.current&&(c({}),p.current=!1),C.current=requestAnimationFrame(g))},[c]);je(()=>{C.current=requestAnimationFrame(g)},[g]);let f=ve(w=>{let{from:d}=e.range,b={from:d,to:d+w},H=xt(b,i);v.setRange(H),e.range=m.current=H,e.emit("range",b)},[e,v,i]),M=ve(w=>{let d=xt(w,i);v.setRange(d),e.range=m.current=d,e.emit("range",w)},[e,v,i]),D=ve(()=>v.getSelectedRows(),[v]);return je(()=>{e==null||e.subscribe({range:m.current},x)},[e,x,t]),je(()=>{console.log(`adjust range as rowCount chnaged ${a}`),f(a)},[f,a]),{data:h.current,getSelectedRows:D,range:m.current,setRange:M,dataSource:e}}var Pt=class{constructor({from:t,to:o}){this.rowCount=0;this.setRowCount=t=>{t<this.data.length&&(this.data.length=t),this.rowCount=t};this.range=new wl(t,o),this.data=new Array(o-t),this.rowCount=0}add(t){var n;let[o]=t;if(this.isWithinRange(o)){let r=o-this.range.from;this.data[r]=t;let l=t[Ae],s=(n=this.data[r-1])==null?void 0:n[Ae];s===0&&l?this.data[r-1][Ae]=2:s===2&&!l&&(this.data[r-1][Ae]=0)}}getAtIndex(t){return this.range.isWithin(t)&&this.data[t-this.range.from]!=null?this.data[t-this.range.from]:void 0}isWithinRange(t){return this.range.isWithin(t)}setRange({from:t,to:o}){if(t!==this.range.from||o!==this.range.to){let[n,r]=this.range.overlap(t,o),l=new Array(Math.max(0,o-t));for(let s=n;s<r;s++){let i=this.getAtIndex(s);if(i){let a=s-t;l[a]=i}}this.data=l,this.range.from=t,this.range.to=o}}getSelectedRows(){return this.data.filter(t=>t[Ae]!==0)}};import{useDragDropNext as Rl}from"@vuu-ui/vuu-ui-controls";import{useCallback as $o,useRef as Fo}from"react";var Oo=({onDrop:e})=>{let t=Fo(),o=Fo(null),n=$o(()=>{console.log("handleDropSettle"),t.current=void 0,o.current=null},[]),{draggable:r,draggedItemIndex:l,onMouseDown:s}=Rl({allowDragDrop:!0,draggableClassName:"vuuTable-headerCell",orientation:"horizontal",containerRef:o,itemQuery:".vuuTable-headerCell",onDrop:e,onDropSettle:n}),i=$o(a=>{let{clientX:c,clientY:u}=a;console.log("useDraggableColumn handleHeaderCellDragStart means mouseDown fired on a column in RowBasedTable");let m=a.target.closest(".vuuTable-headerCell");o.current=m==null?void 0:m.closest("[role='row']");let{dataset:{idx:C="-1"}}=m;t.current={clientX:c,clientY:u,idx:C},s==null||s(a)},[s]);return{draggable:r,draggedItemIndex:l,onHeaderCellDragStart:i}};import{withinRange as Ll}from"@vuu-ui/vuu-utils";import{useCallback as ee,useEffect as Kl,useLayoutEffect as kl,useMemo as Nl,useRef as zt}from"react";function xl(e,...t){let o=new Set(e);for(let n of t)for(let r of n)o.add(r);return o}var Ht="ArrowUp",Et="ArrowDown",St="ArrowLeft",At="ArrowRight";var Lt="Home",Kt="End",kt="PageUp",Nt="PageDown";var Pl=new Set(["Enter","Delete"," "]),Hl=new Set(["Tab"]),El=new Set(["ArrowRight","ArrowLeft"]),Go=new Set([Lt,Kt,kt,Nt,Et,St,At,Ht]),Sl=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),rp=xl(Pl,Go,El,Sl,Hl);var Al=["Home","End","PageUp","PageDown"],Wo=e=>Al.includes(e),Bo=e=>Go.has(e);var Uo=e=>`.vuuTable-headers .vuuTable-headerCell:nth-child(${e+1})`,zl=(e,t)=>`.vuuTable-body > [aria-rowindex='${e}'] > [role='cell']:nth-child(${t+1})`,Il=[-1,-1];function Vl(e,[t,o],n,r){return e===Ht?t>-1?[t-1,o]:[t,o]:e===Et?t===-1?[0,o]:t===r-1?[t,o]:[t+1,o]:e===At?o<n-1?[t,o+1]:[t,o]:e===St?o>0?[t,o-1]:[t,o]:[t,o]}var _o=({columnCount:e=0,containerRef:t,disableHighlightOnFocus:o,data:n,requestScroll:r,rowCount:l=0,viewportRange:s})=>{var H;let{from:i,to:a}=s,c=zt([-1,-1]),u=zt(),p=zt([-1,0]),m=ee(([y,R])=>{var E;let S=y===-1?Uo(R):zl(y,R);return(E=t.current)==null?void 0:E.querySelector(S)},[t]),C=y=>y==null?void 0:y.closest("[role='columnHeader'],[role='cell']"),h=y=>{var R,S;if(y.role==="columnHeader")return[-1,parseInt((R=y.dataset.idx)!=null?R:"-1",10)];{let E=y.closest("[role='row']");if(E){let L=parseInt((S=E.ariaRowIndex)!=null?S:"-1",10),F=Array.from(E.childNodes).indexOf(y);return[L,F]}}return Il},v=ee(y=>{var R;if(t.current){let S=m(y);S?(S!==u.current&&((R=u.current)==null||R.setAttribute("tabindex",""),u.current=S,S.setAttribute("tabindex","0")),S.focus()):Ll(y[0],s)||(u.current=void 0,r==null||r({type:"scroll-page",direction:"up"}))}},[t,m,r,s]),T=ee((y,R,S=!1)=>{let E=[y,R];p.current=E,v(E),S&&(c.current=E)},[v]),x=ee(()=>{var y;(y=u.current)==null||y.setAttribute("tabindex",""),u.current=void 0},[]),g=ee(async(y,R)=>{switch(y){case Nt:r==null||r({type:"scroll-page",direction:"down"});break;case kt:r==null||r({type:"scroll-page",direction:"up"});break;case Lt:r==null||r({type:"scroll-end",direction:"home"});break;case Kt:r==null||r({type:"scroll-end",direction:"end"});break}return R},[r]),f=ee(()=>{var y;if(o!==!0&&(y=t.current)!=null&&y.contains(document.activeElement)){let R=C(document.activeElement);R&&(c.current=h(R))}},[o,t]),M=ee(async y=>{let[R,S]=Wo(y)?await g(y,p.current):Vl(y,p.current,e,l),[E,L]=p.current;(R!==E||S!==L)&&T(R,S,!0)},[e,g,l,T]),D=ee(y=>{n.length>0&&Bo(y.key)&&(y.preventDefault(),y.stopPropagation(),M(y.key))},[n,M]),w=ee(y=>{let R=y.target,S=C(R);if(S){let[E,L]=h(S);T(E,L)}},[T]),d=Nl(()=>({onClick:w,onFocus:f,onKeyDown:D}),[w,f,D]);kl(()=>{let{current:y}=p,R=y[0]>=i&&y[0]<=a;u.current&&!R?x():!u.current&&R&&v(y)},[v,i,a,x]);let b=((H=t.current)==null?void 0:H.firstChild)!=null;return Kl(()=>{var y;if(b&&u.current===void 0){let R=(y=t.current)==null?void 0:y.querySelector(Uo(0));R&&(R.setAttribute("tabindex","0"),u.current=R)}},[t,b]),d};import{isValidNumber as ne}from"@vuu-ui/vuu-utils";import{useCallback as Ol,useMemo as Gl,useRef as Wl,useState as Bl}from"react";import{useCallback as $l,useEffect as Jo,useRef as Fl}from"react";var me=new Map,Qo=(e,t,o)=>{switch(o){case"height":return t.height;case"clientHeight":return e.clientHeight;case"clientWidth":return e.clientWidth;case"contentHeight":return t.contentHeight;case"contentWidth":return t.contentWidth;case"scrollHeight":return Math.ceil(e.scrollHeight);case"scrollWidth":return Math.ceil(e.scrollWidth);case"width":return t.width;default:return 0}},Xo=new ResizeObserver(e=>{for(let t of e){let{target:o,borderBoxSize:n,contentBoxSize:r}=t,l=me.get(o);if(l){let[{blockSize:s,inlineSize:i}]=n,[{blockSize:a,inlineSize:c}]=r,{onResize:u,measurements:p}=l,m=!1;for(let[C,h]of Object.entries(p)){let v=Qo(o,{height:s,width:i,contentHeight:a,contentWidth:c},C);v!==h&&(m=!0,p[C]=v)}m&&u&&u(p)}}});function Yo(e,t,o,n=!1){let r=Fl(t),l=$l(s=>{let{width:i,height:a}=s.getBoundingClientRect(),{clientWidth:c,clientHeight:u}=s;return r.current.reduce((p,m)=>(p[m]=Qo(s,{width:i,height:a,contentHeight:u,contentWidth:c},m),p),{})},[]);Jo(()=>{let s=e.current;async function i(){me.set(s,{measurements:{}}),await document.fonts.ready;let a=me.get(s);if(a){let c=l(s);a.measurements=c,Xo.observe(s),n&&o(c)}else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation","font-weight:bold; color:red;")}if(s){if(me.has(s))throw Error("useResizeObserver attemping to observe same element twice");i()}return()=>{s&&me.has(s)&&(Xo.unobserve(s),me.delete(s))}},[l,e]),Jo(()=>{let s=e.current,i=me.get(s);if(i){if(r.current!==t){r.current=t;let a=l(s);i.measurements=a}i.onResize=o}},[t,l,e,o])}var Ul=["clientHeight","clientWidth"],Zo=e=>Number.isFinite(e),_l={height:"100%",width:"100%"},Jl=(e,t)=>ne(e)&&ne(t)?{height:`${e}px`,width:`${t}px`}:_l,Xl=(e,t)=>{if(ne(e)&&ne(t))return{height:e,width:t}},jo=({defaultHeight:e=0,defaultWidth:t=0,height:o,width:n})=>{let r=Wl(null),[l,s]=Bl({css:Jl(o,n),inner:Xl(o,n),outer:{height:o!=null?o:"100%",width:n!=null?n:"100%"}});Gl(()=>{s(a=>{let{inner:c,outer:u}=a;if(ne(o)&&ne(n)&&c&&u){let{height:p,width:m}=c,{height:C,width:h}=u;if(C!==o||h!==n){let v=ne(C)?C-p:0,T=ne(h)?h-m:0;return{...a,outer:{height:o,width:n},inner:{height:o-v,width:n-T}}}}return a})},[o,n]);let i=Ol(({clientWidth:a,clientHeight:c})=>{s(u=>{let{css:p,inner:m,outer:C}=u;return Zo(c)&&Zo(a)&&(a!==(m==null?void 0:m.width)||c!==(m==null?void 0:m.height))?{css:p,outer:C,inner:{width:Math.floor(a)||t,height:Math.floor(c)||e}}:u})},[e,t]);return Yo(r,Ul,i,!0),{containerRef:r,cssSize:l.css,outerSize:l.outer,innerSize:l.inner}};import{deselectItem as Ql,isRowSelected as Yl,metadataKeys as Zl,selectItem as jl}from"@vuu-ui/vuu-utils";import{useCallback as ql,useRef as qo}from"react";var{IDX:es}=Zl,ts=[],qe=({selectionModel:e,onSelect:t,onSelectionChange:o})=>{let n=qo(-1),r=qo(ts);return ql((s,i,a)=>{let{[es]:c}=s,{current:u}=n,{current:p}=r,C=(Yl(s)?Ql:jl)(e,p,c,i,a,u);r.current=C,n.current=c,t==null||t(s),o==null||o(C)},[t,o,e])};import{applyFilterToColumns as os,applyGroupByToColumns as ns,applySortToColumns as rs,findColumn as ls,getCellRenderer as ss,getColumnName as is,getTableHeadings as as,getValueFormatter as cs,isFilteredColumn as us,isGroupColumn as ms,isPinned as ps,isTypeDescriptor as ds,metadataKeys as fs,updateColumn as en,sortPinnedColumns as tn,stripFilterFromColumns as Cs,moveItemDeprecated as bs,getDefaultAlignment as on,isCalculatedColumn as gs,getCalculatedColumnName as hs}from"@vuu-ui/vuu-utils";import{useReducer as vs}from"react";var ys=100,nn=fs.count,Ts=({serverDataType:e})=>e===void 0,ws=e=>{var t;if(ds(e.type))return ss((t=e.type)==null?void 0:t.renderer)},rn=(e,t)=>{if(e.serverDataType)return e.serverDataType;if(t){let o=t.columns.find(n=>n.name===e.name);if(o)return o.serverDataType}return"string"},Sp=e=>e.type==="columnSettings",Ap=e=>e.type==="tableSettings",Ds=(e,t)=>{switch(t.type){case"init":return sn(t);case"moveColumn":return xs(e,t);case"resizeColumn":return Es(e,t);case"setTableSchema":return Ss(e,t);case"hideColumns":return Ps(e,t);case"showColumns":return Hs(e,t);case"pinColumn":return As(e,t);case"updateColumnProp":return ye(e,t);case"tableConfig":return an(e,t);default:return console.log(`unhandled action ${t.type}`),e}},ln=(e,t)=>{let[o,n]=vs(Ds,{tableConfig:e,dataSourceConfig:t},sn);return{columns:o.columns,dispatchColumnAction:n,headings:o.headings}};function sn({dataSourceConfig:e,tableConfig:t}){let o=t.columns.map(It(t)),n=o.some(ps)?tn(o):o,r={columns:n,headings:as(n)};if(e){let{columns:l,...s}=e;return an(r,{type:"tableConfig",...s})}else return r}var Ms=e=>gs(e.name)?hs(e):e.name,Rs=(e,t)=>t==="uppercase"?e.toUpperCase():t==="capitalize"?e[0].toUpperCase()+e.slice(1).toLowerCase():e,It=e=>(t,o)=>{let n=rn(t,e.tableSchema),{columnDefaultWidth:r=ys,columnFormatHeader:l}=e,{align:s=on(n),key:i,name:a,label:c=Ms(t),width:u=r,...p}=t,m={...p,align:s,CellRenderer:ws(t),label:Rs(c,l),key:i!=null?i:o+nn,name:a,originalIdx:o,serverDataType:n,valueFormatter:cs(t),width:u};return ms(m)&&(m.columns=m.columns.map(C=>It(e)(C,C.key))),m};function xs(e,{column:t,moveBy:o,moveTo:n}){let{columns:r}=e;if(typeof o=="number"){let l=r.indexOf(t),s=r.slice(),[i]=s.splice(l,1);return s.splice(l+o,0,i),{...e,columns:s}}else if(typeof n=="number")return{...e,columns:bs(r,t,n)};return e}function Ps(e,{columns:t}){return t.some(o=>o.hidden!==!0)?t.reduce((o,n)=>n.hidden!==!0?ye(o,{type:"updateColumnProp",column:n,hidden:!0}):o,e):e}function Hs(e,{columns:t}){return t.some(o=>o.hidden)?t.reduce((o,n)=>n.hidden?ye(o,{type:"updateColumnProp",column:n,hidden:!1}):o,e):e}function Es(e,{column:t,phase:o,width:n}){let r="updateColumnProp",l=o!=="end";switch(o){case"begin":return ye(e,{type:r,column:t,resizing:l});case"end":return ye(e,{type:r,column:t,resizing:l,width:n});case"resize":return ye(e,{type:r,column:t,width:n});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${o}`)}}function Ss(e,{tableSchema:t}){let{columns:o}=e;if(o.some(Ts)){let n=o.map(r=>{var s;let l=rn(r,t);return{...r,align:(s=r.align)!=null?s:on(l),serverDataType:l}});return{...e,columns:n,tableSchema:t}}else return{...e,tableSchema:t}}function As(e,t){let{columns:o}=e,{column:n,pin:r}=t;return o=en(o,n.name,{pin:r}),o=tn(o),console.log({withPins:o}),{...e,columns:o}}function ye(e,t){let{columns:o}=e,{align:n,column:r,hidden:l,label:s,resizing:i,width:a}=t,c={};return(n==="left"||n==="right")&&(c.align=n),typeof s=="string"&&(c.label=s),typeof i=="boolean"&&(c.resizing=i),typeof l=="boolean"&&(c.hidden=l),typeof a=="number"&&(c.width=a),o=en(o,r.name,c),{...e,columns:o}}function an(e,{columns:t,confirmed:o,filter:n,groupBy:r,sort:l}){let s=t&&t.length>0,i=r!==void 0,a=typeof(n==null?void 0:n.filter)=="string",c=l&&l.sortDefs.length>0,u=e;return s&&(u={...e,columns:t.map((p,m)=>{let C=is(p),h=m+nn,v=ls(u.columns,C);return v?v.key===h?v:{...v,key:h}:It(e)({name:p},m)})}),i&&(u={...e,columns:ns(u.columns,r,o)}),c&&(u={...e,columns:rs(u.columns,l)}),a?u={...e,columns:os(u.columns,n)}:u.columns.some(us)&&(u={...e,columns:Cs(u.columns)}),u}import{useCallback as re,useRef as Le}from"react";var cn=e=>{let{scrollLeft:t,scrollTop:o}=e,{clientHeight:n,clientWidth:r,scrollHeight:l,scrollWidth:s}=e,i=t/(s-r),a=o/(l-n);return[i,a]},Ls=e=>{let{clientHeight:t,clientWidth:o,scrollHeight:n,scrollWidth:r}=e;return[r-o,n-t]},un=({onAttach:e,onDetach:t})=>{let o=Le(null);return re(r=>{if(r)o.current=r,e==null||e(r);else if(o.current){let{current:l}=o;o.current=r,t==null||t(l)}},[e,t])},mn=({onHorizontalScroll:e,onVerticalScroll:t,viewport:o})=>{let n=Le(!1),r=Le({scrollTop:0,scrollLeft:0}),l=Le(null),s=Le(null),{maxScrollContainerScrollHorizontal:i,maxScrollContainerScrollVertical:a}=o,c=re(()=>{let{current:g}=s,{current:f}=l,{current:M}=n;if(M)n.current=!1;else if(g&&f){let[D,w]=cn(f),[d,b]=Ls(g),H=Math.round(D*d),y=Math.round(w*b);console.log(`pctScrollTop ${w}, maxScrollTop ${b} rootScrollTop ${y}`),g.scrollTo({left:H,top:y,behavior:"auto"})}},[]),u=re(()=>{let{current:g}=s,{current:f}=l,{current:M}=r;if(g&&f){let{scrollLeft:D,scrollTop:w}=g,[d,b]=cn(g);n.current=!0,f.scrollLeft=Math.round(d*i),f.scrollTop=Math.round(b*a),M.scrollTop!==w&&(M.scrollTop=w,t==null||t(w,b)),M.scrollLeft!==D&&(M.scrollLeft=D,e==null||e(D))}},[i,a,e,t]),p=re(g=>{l.current=g,g.addEventListener("scroll",c,{passive:!0})},[c]),m=re(g=>{l.current=null,g.removeEventListener("scroll",c)},[c]),C=re(g=>{s.current=g,g.addEventListener("scroll",u,{passive:!0})},[u]),h=re(g=>{s.current=null,g.removeEventListener("scroll",u)},[u]),v=un({onAttach:C,onDetach:h}),T=un({onAttach:p,onDetach:m}),x=re(g=>{let{current:f}=s;if(f){if(n.current=!1,g.type==="scroll-page"){let{clientHeight:M,scrollLeft:D,scrollTop:w}=f,{direction:d}=g,b=d==="down"?M:-M,H=Math.min(Math.max(0,w+b),a);f.scrollTo({top:H,left:D,behavior:"auto"})}else if(g.type==="scroll-end"){let{direction:M}=g,D=M==="end"?a:0;f.scrollTo({top:D,left:f.scrollLeft,behavior:"auto"})}}},[a]);return{scrollbarContainerRef:T,contentContainerRef:v,requestScroll:x}};import{useCallback as Ks,useMemo as et,useRef as ks}from"react";import{actualRowPositioning as Ns,virtualRowPositioning as zs}from"@vuu-ui/vuu-utils";var Is=15e5,Vs={contentHeight:0,contentWidth:0,getRowAtPosition:()=>-1,getRowOffset:()=>-1,horizontalScrollbarHeight:0,maxScrollContainerScrollHorizontal:0,maxScrollContainerScrollVertical:0,pinnedWidthLeft:0,pinnedWidthRight:0,rowCount:0,setPctScrollTop:()=>{},totalHeaderHeight:0,verticalScrollbarWidth:0,viewportBodyHeight:0},$s=e=>{let t=0,o=0,n=0;for(let r of e){let{hidden:l,pin:s,width:i}=r,a=l?0:i;s==="left"?t+=a:s==="right"?o+=a:n+=a}return{pinnedWidthLeft:t+4,pinnedWidthRight:o+4,unpinnedWidth:n}},tt=({columns:e,headerHeight:t,headings:o,rowCount:n,rowHeight:r,size:l})=>{let s=ks(0),a=Math.min(n,Is)*r,u=n*r-a,{pinnedWidthLeft:p,pinnedWidthRight:m,unpinnedWidth:C}=et(()=>$s(e),[e]),[h,v]=et(()=>Ns(r),[r]),[T,x]=et(()=>u?zs(r,u,s):[h,v],[v,h,u,r]),g=Ks(f=>{s.current=f},[]);return et(()=>{var f;if(l){let M=o.length,D=15,w=p+C+m,d=w>l.width?D:0,b=t*(1+M),H=a-(((f=l==null?void 0:l.height)!=null?f:0)-d)+b,y=w-l.width+p,R=(l.height-t)/r,S=Number.isInteger(R)?R+1:Math.ceil(R),E=l.height-b,L=a>E?D:0;return{contentHeight:a,getRowAtPosition:x,getRowOffset:T,horizontalScrollbarHeight:d,maxScrollContainerScrollHorizontal:y,maxScrollContainerScrollVertical:H,pinnedWidthLeft:p,pinnedWidthRight:m,rowCount:S,contentWidth:w,setPctScrollTop:g,totalHeaderHeight:b,verticalScrollbarWidth:L,viewportBodyHeight:E}}else return Vs},[l,o.length,p,C,m,a,t,r,x,T,g])};import{getColumnsInViewport as pn,itemsChanged as Fs}from"@vuu-ui/vuu-utils";import{useCallback as dn,useEffect as Os,useMemo as Gs,useRef as Vt,useState as Ws}from"react";var fn=({columns:e,getRowAtPosition:t,setRange:o,viewportMeasurements:n})=>{let r=Vt(-1),{rowCount:l,contentWidth:s,maxScrollContainerScrollHorizontal:i}=n,a=s-i,c=Vt(0),[u,p]=Gs(()=>pn(e,c.current,c.current+a),[a,e]),m=Vt(p);Os(()=>{h(u)},[u]);let[C,h]=Ws(u),v=dn(x=>{c.current=x;let[g,f]=pn(e,x,x+a);Fs(C,g)&&(m.current=f,h(g))},[a,e,C]),T=dn(x=>{let g=t(x);g!==r.current&&(r.current=g,console.log("setRange from handleVerticalScroll"),o({from:g,to:g+l}))},[t,o,l]);return{columnsWithinViewport:C,onHorizontalScroll:v,onVerticalScroll:T,virtualColSpan:m.current}};var js=[],{KEY:qs,IS_EXPANDED:bn,IS_LEAF:gn}=Xs,hn=({config:e,dataSource:t,headerHeight:o,onConfigChange:n,onFeatureEnabled:r,onFeatureInvocation:l,onSelectionChange:s,renderBufferSize:i=0,rowHeight:a,selectionModel:c,...u})=>{var We,Be;let[p,m]=Zs(t.size),C=$t(!1),h=$t();if(h.current=t,t===void 0)throw Error("no data source provided to Vuu Table");let v=jo(u),T=J(A=>{m(A)},[]),{columns:x,dispatchColumnAction:g,headings:f}=ln(e,t.config),{getRowAtPosition:M,getRowOffset:D,setPctScrollTop:w,...d}=tt({columns:x,headerHeight:o,headings:f,rowCount:p,rowHeight:a,size:v.innerSize}),b=J(({tableSchema:A})=>{A?(C.current=!0,g({type:"setTableSchema",tableSchema:A})):console.log("usbscription message with no schema")},[g]),H=J(A=>{t.select(A),s==null||s(A)},[t,s]),y=qe({onSelectionChange:H,selectionModel:c}),{data:R,getSelectedRows:S,range:E,setRange:L}=Vo({dataSource:t,onFeatureEnabled:r,onFeatureInvocation:l,onSubscribed:b,onSizeChange:T,renderBufferSize:i,viewportRowCount:d.rowCount}),F=$t();F.current=R;let ae=J(A=>{C.current=!0,console.log("onPersistentColumnOperation, dispatchColumnAction",{action:A}),g(A)},[g]),De=Xe({dataSource:t,onPersistentColumnOperation:ae}),Ve=J((A,N=!1,$)=>{t&&(t.sort=Us(t.sort,A,N,$))},[t]),$e=J((A,N,$)=>{let z=x.find(U=>U.name===N);if(z)A==="end"&&(C.current=!0),g({type:"resizeColumn",phase:A,column:z,width:$});else throw Error(`useDataTable.handleColumnResize, column ${N} not found`)},[x,g]),B=J((A,N)=>{let $=Js(N,A),z=A[qs];if(A[bn]){if(t.closeTreeNode(z,!0),$){let U=x.indexOf(N);t.getRowsAtDepth(U+1).some(_=>_[bn]||_[gn])||g({type:"hideColumns",columns:x.slice(U+2)})}}else if(t.openTreeNode(z),$){let U=t.getChildRows(z),Q=x.indexOf(N)+1,_=[x[Q]];U.some(Z=>Z[gn])&&_.push(x[Q+1]),_.some(Z=>Z.hidden)&&g({type:"showColumns",columns:_})}},[x,t,g]),{onVerticalScroll:Ce,onHorizontalScroll:be,columnsWithinViewport:X,virtualColSpan:O}=fn({columns:x,getRowAtPosition:M,setRange:L,viewportMeasurements:d}),Me=J((A,N)=>{w(N),Ce(A)},[Ce,w]),{requestScroll:Re,...xe}=mn({onHorizontalScroll:be,onVerticalScroll:Me,viewport:d,viewportHeight:((Be=(We=v.innerSize)==null?void 0:We.height)!=null?Be:0)-o}),V=_o({columnCount:x.length,containerRef:v.containerRef,data:R,requestScroll:Re,rowCount:t==null?void 0:t.size,viewportRange:E}),Y=J(A=>{A?t&&t.groupBy.includes(A.name)&&(t.groupBy=t.groupBy.filter(N=>N!==A.name)):t.groupBy=[]},[t]),Fe=J((A,N)=>{let $=t.columns[A],z=Qs(t.columns,$,N);z!==t.columns&&(t.columns=z,g({type:"tableConfig",columns:z}))},[t,g]),at=Oo({onDrop:Fe});Cn(()=>{h.current&&(C.current=!0,g({type:"init",tableConfig:e,dataSourceConfig:h.current.config}))},[e,g]),Cn(()=>{t.on("config",(A,N)=>{C.current=!0,g({type:"tableConfig",...A,confirmed:N})})},[t,g]),Ys(()=>{C.current&&(n==null||n({...e,columns:x}),C.current=!1)},[x,e,n]);let[Oe]=Bs(),Ge=J(A=>{var _;let{current:N}=F,{current:$}=h,z=A.target,U=z==null?void 0:z.closest("div[role='cell']"),Q=z==null?void 0:z.closest(".vuuTableRow");if(U&&Q&&N&&$){let{columns:Z,selectedRowsCount:ct}=$,ut=_s(Z),mt=parseInt((_=Q.ariaRowIndex)!=null?_:"-1"),pt=Array.from(Q.childNodes).indexOf(U),dt=N.find(([ft])=>ft===mt),Ue=Z[pt];Oe(A,"grid",{columnMap:ut,columnName:Ue,row:dt,selectedRows:ct===0?js:S(),viewport:t==null?void 0:t.viewport})}},[t==null?void 0:t.viewport,S,Oe]);return{columns:x,columnsWithinViewport:X,containerMeasurements:v,containerProps:V,data:R,dispatchColumnAction:g,getRowOffset:D,handleContextMenuAction:De,headings:f,onColumnResize:$e,onContextMenu:Ge,onRemoveColumnFromGroupBy:Y,onRowClick:y,onSort:Ve,onToggleGroup:B,virtualColSpan:O,scrollProps:xe,rowCount:p,viewportMeasurements:d,...at}};import ni from"classnames";import{isDataLoading as ri}from"@vuu-ui/vuu-utils";import{jsx as Ke,jsxs as vn}from"react/jsx-runtime";var pe="vuuTable",Td=({allowConfigEditing:e=!1,className:t,config:o,dataSource:n,headerHeight:r=25,height:l,id:s,onConfigChange:i,onFeatureEnabled:a,onFeatureInvocation:c,onSelect:u,onSelectionChange:p,onShowConfigEditor:m,renderBufferSize:C=0,rowHeight:h=20,selectionModel:v="extended",style:T,width:x,...g})=>{let f=oi(s),{containerMeasurements:{containerRef:M,innerSize:D,outerSize:w},containerProps:d,dispatchColumnAction:b,draggable:H,draggedItemIndex:y,handleContextMenuAction:R,scrollProps:S,viewportMeasurements:E,...L}=hn({config:o,dataSource:n,renderBufferSize:C,headerHeight:r,height:l,onConfigChange:i,onFeatureEnabled:a,onFeatureInvocation:c,onSelectionChange:p,rowHeight:h,selectionModel:v,width:x});console.log({tableProps:L});let F={...w,"--content-height":`${E.contentHeight}px`,"--horizontal-scrollbar-height":`${E.horizontalScrollbarHeight}px`,"--content-width":`${E.contentWidth}px`,"--pinned-width-left":`${E.pinnedWidthLeft}px`,"--pinned-width-right":`${E.pinnedWidthRight}px`,"--header-height":`${r}px`,"--row-height":`${h}px`,"--table-height":`${D==null?void 0:D.height}px`,"--table-width":`${D==null?void 0:D.width}px`,"--total-header-height":`${E.totalHeaderHeight}px`,"--vertical-scrollbar-width":`${E.verticalScrollbarWidth}px`,"--viewport-body-height":`${E.viewportBodyHeight}px`},ae=ni(pe,t,{[`${pe}-zebra`]:o.zebraStripes,[`${pe}-loading`]:ri(L.columns)});return Ke(ei,{menuActionHandler:R,menuBuilder:Je(n),children:vn("div",{...g,...d,className:ae,id:f,ref:M,style:F,tabIndex:-1,children:[D?Ke("div",{className:`${pe}-scrollbarContainer`,ref:S.scrollbarContainerRef,children:Ke("div",{className:`${pe}-scrollbarContent`})}):null,D?vn("div",{className:`${pe}-contentContainer`,ref:S.contentContainerRef,children:[Ke(Io,{...L,headerHeight:r,tableId:f}),H]}):null,e&&D?Ke(ti,{className:`${pe}-settings`,"data-icon":"settings",onClick:m,variant:"secondary"}):null]})})};import li from"classnames";import{isJsonAttribute as si,metadataKeys as ii,registerComponent as ai}from"@vuu-ui/vuu-utils";import{jsx as Ft,jsxs as di}from"react/jsx-runtime";var ke="vuuJsonCell",{IS_EXPANDED:ci,KEY:ui}=ii,mi=e=>{let t=e.lastIndexOf("|");return t===-1?"":e.slice(t+1)},pi=({column:e,row:t})=>{let{key:o}=e,n=t[o],r=!1;si(n)&&(n=n.slice(0,-1),r=!0);let l=mi(t[ui]),s=li({[`${ke}-name`]:l===n,[`${ke}-value`]:l!==n,[`${ke}-group`]:r});if(r){let i=t[ci]?"minus-box":"plus-box";return di("span",{className:s,children:[Ft("span",{className:`${ke}-value`,children:n}),Ft("span",{className:`${ke}-toggle`,"data-icon":i})]})}else return n?Ft("span",{className:s,children:n}):null};console.log("register JsonCell");ai("json",pi,"cell-renderer",{description:"JSON formatter",label:"JSON formatter",serverDataType:"json"});import Nf from"classnames";import{useRef as If}from"react";import{useCallback as Ot,useRef as fi}from"react";import{jsx as bi}from"react/jsx-runtime";var yn=()=>{},Ci="vuuColumnResizerNext",Ne=({onDrag:e,onDragEnd:t=yn,onDragStart:o=yn})=>{let n=fi(0),r=Ot(i=>{i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault();let a=Math.round(i.clientX),c=a-n.current;n.current=a,c!==0&&e(i,c)},[e]),l=Ot(i=>{window.removeEventListener("mouseup",l),window.removeEventListener("mousemove",r),t(i)},[t,r]),s=Ot(i=>{o(i),n.current=Math.round(i.clientX),window.addEventListener("mouseup",l),window.addEventListener("mousemove",r),i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault()},[o,r,l]);return bi("div",{className:Ci,onMouseDown:s})};import{useCallback as Gt,useRef as gi,useState as hi}from"react";var ze=({column:e,onResize:t,rootRef:o})=>{let n=gi(0),[r,l]=hi(!1),{name:s}=e,i=Gt(()=>{if(console.log("onResizeStart"),t&&o.current){console.log("handleResizeStart");let{width:u}=o.current.getBoundingClientRect();n.current=Math.round(u),l(!0),t==null||t("begin",s)}},[s,t,o]),a=Gt((u,p)=>{if(o.current&&t){let{width:m}=o.current.getBoundingClientRect(),C=Math.round(m)+p;C!==n.current&&C>0&&(t("resize",s,C),n.current=C)}},[s,t,o]),c=Gt(()=>{t&&(t("end",s,n.current),setTimeout(()=>{l(!1)},80))},[s,t]);return{isResizing:r,onDrag:a,onDragStart:i,onDragEnd:c}};import{getColumnStyle as vi}from"@vuu-ui/vuu-utils";import yi from"classnames";import{useMemo as Ti}from"react";var te=(e,t,o)=>Ti(()=>{let n=yi(t,{vuuPinFloating:e.pin==="floating",vuuPinLeft:e.pin==="left",vuuPinRight:e.pin==="right",vuuEndPin:o&&e.endPin,[`${t}-editable`]:e.editable,[`${t}-right`]:e.align==="right"}),r=vi(e);return{className:n,style:r}},[e,t,o]);import wi from"classnames";import{useCallback as Di}from"react";import{jsx as Mi,jsxs as Ri}from"react/jsx-runtime";var Tn="vuuColumnHeaderPill",de=({children:e,className:t,column:o,onRemove:n,removable:r,...l})=>{if(r&&typeof n!="function")throw Error("ColumnHeaderPill onRemove prop must be provided if Pill is removable");let s=Di(i=>{i.preventDefault(),i.stopPropagation(),n==null||n(o)},[o,n]);return Ri("div",{...l,className:wi(Tn,t),children:[e,r?Mi("span",{className:`${Tn}-removeButton`,role:"button","data-icon":"cross",onClick:s}):null]})};import{jsx as Wt,jsxs as xi}from"react/jsx-runtime";var Bt=({column:e,...t})=>{let{name:o,sorted:n}=e,r=typeof n=="number"?n<0?"arrow-down":"arrow-up":n==="A"?"arrow-up":n==="D"?"arrow-down":void 0;return xi(de,{...t,column:e,children:[Wt("span",{className:"vuuGroupColumnPill-label",children:o}),r!==void 0?Wt("span",{"data-icon":r}):null,typeof n=="number"?Wt("span",{className:"vuuSortPosition",children:Math.abs(n)}):null]})};import{jsx as wn,jsxs as Pi}from"react/jsx-runtime";var Dn=({column:e})=>{if(!e.sorted)return null;let t=typeof e.sorted=="number"?e.sorted<0?"arrow-down":"arrow-up":e.sorted==="A"?"arrow-up":"arrow-down";return Pi(de,{column:e,children:[wn("span",{"data-icon":t}),typeof e.sorted=="number"?wn("span",{className:"vuuSortPosition",children:Math.abs(e.sorted)}):null]})};import{jsx as Bf,jsxs as Uf}from"react/jsx-runtime";import{createElement as Wf}from"react";import Hi from"classnames";import{useCallback as Ei,useRef as Si,useState as Ai}from"react";import{OverflowContainer as Li,useLayoutEffectSkipFirst as Ki}from"@vuu-ui/vuu-layout";import{jsx as _t,jsxs as zi}from"react/jsx-runtime";import{createElement as Ni}from"react";var Ut="vuuTableNextGroupHeaderCell",ki=(e,t)=>e===t?e:t,ot=({column:e,className:t,onRemoveColumn:o,onResize:n,...r})=>{let l=Si(null),{isResizing:s,...i}=ze({column:e,onResize:n,rootRef:l}),[a,c]=Ai(e.columns),{className:u,style:p}=te(e,Ut,!0),m=a.length>1?{removable:!0,onRemove:o}:void 0,C=Ei((h,v)=>{c(T=>{let x=T.slice(),[g]=x.splice(h,1);return v===-1?x.concat(g):(x.splice(v,0,g),x)})},[]);return Ki(()=>{c(h=>ki(h,e.columns))},[e.columns]),zi("div",{...r,className:Hi(u,"vuuTableNextHeaderCell",t,{[`${Ut}-pending`]:e.groupConfirmed===!1}),ref:l,role:"columnheader",style:p,children:[_t(Li,{allowDragDrop:!0,className:`${Ut}-inner`,height:24,onMoveItem:C,overflowPosition:"start",children:a.map(h=>Ni(Bt,{...m,column:h,key:h.key}))}),_t(de,{column:e,removable:!0,onRemove:o}),e.resizeable!==!1?_t(Ne,{...i}):null]})};import{useCallback as Wi,useRef as Bi}from"react";import{useContextMenu as Ii}from"@vuu-ui/vuu-popups";import Vi from"classnames";import{useCallback as Mn,useRef as $i,useState as Fi}from"react";import{jsx as Gi}from"react/jsx-runtime";var Oi=e=>{if(e){let{bottom:t,left:o}=e.getBoundingClientRect();return{x:o,y:t+6}}},Rn=({className:e,column:t,...o})=>{let n=$i(null),[r,l]=Fi(!1),[s]=Ii(),i=Mn(()=>{l(!1)},[]),a=Mn(c=>{l(!0),s(c,"column-menu",{column:t,ContextMenuProps:{onClose:i,position:Oi(n.current)}})},[t,i,s]);return Gi("span",{...o,className:Vi("vuuTable-columnMenu",e,{"vuuTable-columnMenu-open":r}),"data-icon":"more-vert",onClick:a,ref:n})};import Ui from"classnames";import{jsx as nt,jsxs as _i}from"react/jsx-runtime";var Jt="vuuTableNextHeaderCell",xn=({className:e,column:t,onClick:o,onResize:n,...r})=>{var v;let l=Bi(null),{isResizing:s,...i}=ze({column:t,onResize:n,rootRef:l}),a=Wi(T=>{console.log(`click isResizing ${s}`),!s&&(o==null||o(T))},[s,o]),{className:c,style:u}=te(t,Jt,!0),p=nt(Rn,{column:t}),m=nt("div",{className:`${Jt}-label`,children:(v=t.label)!=null?v:t.name}),C=nt(Dn,{column:t}),h=t.align==="right"?[C,m,p]:[p,m,C];return _i("div",{...r,className:Ui(c,e,{[`${Jt}-resizing`]:s}),onClick:a,ref:l,role:"columnheader",style:u,children:[...h,t.resizeable!==!1?nt(Ne,{...i}):null]})};import{ContextMenuProvider as Sc}from"@vuu-ui/vuu-popups";import{isGroupColumn as Ac,metadataKeys as Lc,notHidden as Kc}from"@vuu-ui/vuu-utils";import sr from"classnames";import{forwardRef as kc,useRef as Nc}from"react";import{isGroupColumn as An,isJsonColumn as oa,isJsonGroup as na,metadataKeys as ra,notHidden as la,RowSelected as sa}from"@vuu-ui/vuu-utils";import ia from"classnames";import{memo as aa,useCallback as Ln}from"react";import{metadataKeys as Ji}from"@vuu-ui/vuu-utils";import{useCallback as Pn}from"react";import{jsx as Hn}from"react/jsx-runtime";var{IDX:Xi}=Ji,Qi="vuuTableNextCell",En=({column:e,columnMap:t,onClick:o,onDataEdited:n,row:r})=>{let{className:l,style:s}=te(e,Qi),{CellRenderer:i,name:a,valueFormatter:c}=e,u=t[a],p=Pn(C=>(n==null||n(r[Xi],a,C),!0),[a,n,r]),m=Pn(C=>{o==null||o(C,e)},[e,o]);return Hn("div",{className:l,onClick:o?m:void 0,role:"cell",style:s,children:i?Hn(i,{column:e,columnMap:t,onCommit:p,row:r}):c(r[u])})};import{getGroupValueAndOffset as Yi,metadataKeys as Zi}from"@vuu-ui/vuu-utils";import{useCallback as ji}from"react";import qi from"classnames";import{jsx as Qt,jsxs as ta}from"react/jsx-runtime";var{IS_LEAF:ea}=Zi,Xt="vuuTableNextGroupCell",Sn=({column:e,onClick:t,row:o})=>{let{columns:n}=e,[r,l]=Yi(n,o),{className:s,style:i}=te(e,Xt),a=ji(p=>{t==null||t(p,e)},[e,t]),c=o[ea],u=Array(l).fill(0).map((p,m)=>Qt("span",{className:`${Xt}-spacer`},m));return ta("div",{className:qi(s,"vuuTableNextCell"),role:"cell",style:i,onClick:c?void 0:a,children:[u,c?null:Qt("span",{className:`${Xt}-toggle`,"data-icon":"triangle-right"}),Qt("span",{children:r})]})};import{jsx as Yt}from"react/jsx-runtime";import{createElement as pa}from"react";var{IDX:ca,IS_EXPANDED:ua,SELECTED:ma}=ra,le="vuuTableNextRow",Zt=aa(({className:e,columnMap:t,columns:o,row:n,offset:r,onClick:l,onDataEdited:s,onToggleGroup:i,zebraStripes:a=!1,...c})=>{let{[ca]:u,[ua]:p,[ma]:m}=n,C=Ln(M=>{let D=M.shiftKey,w=M.ctrlKey||M.metaKey;l==null||l(n,D,w)},[l,n]),{True:h,First:v,Last:T}=sa,x=ia(le,e,{[`${le}-even`]:a&&u%2===0,[`${le}-expanded`]:p,[`${le}-selected`]:m&h,[`${le}-selectedStart`]:m&v,[`${le}-selectedEnd`]:m&T}),g={transform:`translate3d(0px, ${r}px, 0px)`},f=Ln((M,D)=>{(An(D)||na(D,n))&&(M.stopPropagation(),i==null||i(n,D))},[i,n]);return pa("div",{...c,"aria-rowindex":n[0],key:`row-${n[0]}`,role:"row",className:x,onClick:C,style:g},Yt("span",{className:`${le}-selectionDecorator vuuStickyLeft`}),o.filter(la).map(M=>{let D=An(M),w=oa(M);return Yt(D?Sn:En,{column:M,columnMap:t,onClick:D||w?f:void 0,onDataEdited:s,row:n},M.key)}),Yt("span",{className:`${le}-selectionDecorator vuuStickyRight`}))});Zt.displayName="Row";import{useLayoutEffectSkipFirst as hc}from"@vuu-ui/vuu-layout";import{useTableAndColumnSettings as vc}from"@vuu-ui/vuu-table-extras";import{useDragDropNext as yc}from"@vuu-ui/vuu-ui-controls";import{useCallback as se,useEffect as fa,useMemo as Ca,useRef as eo}from"react";var jt=e=>`.vuuTableNext-col-headers .vuuTableNextHeaderCell:nth-child(${e})`,qt=(e,t)=>`.vuuTableNext-body > [aria-rowindex='${e}'] > [role='cell']:nth-child(${t+1})`,Kn=(e,[t,o])=>{var l;let n=t===-1?jt(o):qt(t,o),r=(l=e.current)==null?void 0:l.querySelector(n);return da(r)&&r.querySelector("button")||r},da=e=>e.classList.contains("vuuTableNextCell-editable"),kn=e=>e.querySelector(".vuuTableInputCell")!==null;var Nn=new Set(["Home","End","PageUp","PageDown","ArrowDown","ArrowUp"]),to=new Set(Nn);to.add("ArrowLeft");to.add("ArrowRight");var ba=(e,t)=>{switch(t){case"cell":return to.has(e);case"row":return Nn.has(e);default:return!1}},ga=["Home","End","PageUp","PageDown"],ha=e=>ga.includes(e),va=[-1,-1],ya=[void 0,void 0],Ta=e=>{var o,n;let t=(o=e.closest(".vuuTableNext"))==null?void 0:o.querySelector(".vuuTableNext-scrollbarContainer");if(t){let r=t==null?void 0:t.getBoundingClientRect(),l=(n=e.closest(".vuuTableNextCell"))==null?void 0:n.getBoundingClientRect();if(l)return l.bottom>r.bottom?["down",l.bottom-r.bottom]:l.top<r.top?["up",l.top-r.top]:l.right<r.right?["right",l.right-r.right]:l.left<r.left?["left",l.left-r.left]:ya;throw Error("Whats going on, cell not found")}else throw Error("Whats going on, scrollbar container not found")};function wa(e,[t,o],n,r){return e==="ArrowUp"?t>-1?[t-1,o]:[t,o]:e==="ArrowDown"?t===-1?[0,o]:t===r-1?[t,o]:[t+1,o]:e==="ArrowRight"?o<n-1?[t,o+1]:[t,o]:e==="ArrowLeft"?o>1?[t,o-1]:[t,o]:[t,o]}var zn=({columnCount:e=0,containerRef:t,disableHighlightOnFocus:o,navigationStyle:n,requestScroll:r,rowCount:l=0,viewportRowCount:s})=>{var w;let i=eo([-1,-1]),a=eo(),c=eo([-1,0]),u=d=>d==null?void 0:d.closest("[role='columnHeader'],[role='cell']"),p=d=>{var b,H;if(d.role==="columnHeader")return[-1,parseInt((b=d.dataset.idx)!=null?b:"-1",10)];{let y=d.closest("[role='row']");if(y){let R=parseInt((H=y.ariaRowIndex)!=null?H:"-1",10),S=Array.from(y.childNodes).indexOf(d);return[R,S]}}return va},m=se(d=>{var b;if(t.current){let H=Kn(t,d);if(H){H!==a.current&&((b=a.current)==null||b.removeAttribute("tabindex"),a.current=H,H.setAttribute("tabindex","0"));let[y,R]=Ta(H);y&&R&&(r==null||r({type:"scroll-distance",distance:R,direction:y})),H.focus()}}},[t,r]),C=se((d,b,H=!1)=>{let y=[d,b];c.current=y,m(y),H&&(i.current=y)},[m]),h=se((d,[b,H])=>new Promise(y=>{let R=b;switch(d){case"PageDown":R=Math.min(l-1,b+s),r==null||r({type:"scroll-page",direction:"down"});break;case"PageUp":R=Math.max(0,b-s),r==null||r({type:"scroll-page",direction:"up"});break;case"Home":R=0,r==null||r({type:"scroll-end",direction:"home"});break;case"End":R=l-1,r==null||r({type:"scroll-end",direction:"end"});break}setTimeout(()=>{y([R,H])},90)}),[r,l,s]),v=se(()=>{var d;if(o!==!0&&(d=t.current)!=null&&d.contains(document.activeElement)){let b=u(document.activeElement);b&&(i.current=p(b))}},[o,t]),T=se(async d=>{let[b,H]=ha(d)?await h(d,c.current):wa(d,c.current,e,l);console.log(`nextRowIdx ${b} nextColIdx ${H}`);let[y,R]=c.current;(b!==y||H!==R)&&C(b,H,!0)},[e,h,l,C]),x=se(d=>{l>0&&ba(d.key,n)&&(d.preventDefault(),d.stopPropagation(),T(d.key))},[l,n,T]),g=se(d=>{let b=d.target,H=u(b);if(H){let[y,R]=p(H);C(y,R)}},[C]),f=se(()=>{T("ArrowDown")},[T]),M=Ca(()=>({navigate:f,onClick:g,onFocus:v,onKeyDown:x}),[g,v,x,f]),D=((w=t.current)==null?void 0:w.firstChild)!=null;return fa(()=>{if(D&&a.current===void 0){let{current:d}=t,b=(d==null?void 0:d.querySelector(jt(0)))||(d==null?void 0:d.querySelector(qt(0,0)));b&&(b.setAttribute("tabindex","0"),a.current=b)}},[t,D]),M};import{applySort as Tc,buildColumnMap as wc,isGroupColumn as Dc,isJsonGroup as Mc,isValidNumber as tr,metadataKeys as Rc,updateColumn as xc,visibleColumnAtIndex as Pc}from"@vuu-ui/vuu-utils";import{useCallback as I,useEffect as or,useMemo as so,useState as io}from"react";var oo=(e,t)=>{switch(t.type){case"col-size":return{...e,columns:e.columns.map(o=>o.name===t.column.name?{...o,width:t.width}:o)};case"column-prop":return{...e,columns:e.columns.map(o=>o.name===t.column.name?{...o,[t.property]:t.value}:o)};default:return e}};import{isVuuFeatureAction as xa,isVuuFeatureInvocation as Pa}from"@vuu-ui/vuu-data-react/src";import{getFullRange as no,NULL_RANGE as In}from"@vuu-ui/vuu-utils";import{useCallback as ro,useEffect as Vn,useMemo as Ha,useRef as lt,useState as Ea}from"react";import{metadataKeys as Da,WindowRange as Ma}from"@vuu-ui/vuu-utils";var{SELECTED:Ra}=Da,rt=class{constructor({from:t,to:o}){this.rowCount=0;this.setRowCount=t=>{t<this.data.length&&(this.data.length=t),this.rowCount=t};this.range=new Ma(t,o),this.data=new Array(o-t),this.rowCount=0}add(t){let[o]=t;if(this.isWithinRange(o)){let n=o-this.range.from;this.data[n]=t}}getAtIndex(t){return this.range.isWithin(t)&&this.data[t-this.range.from]!=null?this.data[t-this.range.from]:void 0}isWithinRange(t){return this.range.isWithin(t)}setRange({from:t,to:o}){if(t!==this.range.from||o!==this.range.to){let[n,r]=this.range.overlap(t,o),l=new Array(Math.max(0,o-t));for(let s=n;s<r;s++){let i=this.getAtIndex(s);if(i){let a=s-t;l[a]=i}}this.data=l,this.range.from=t,this.range.to=o}}getSelectedRows(){return this.data.filter(t=>t[Ra]!==0)}};var $n=({dataSource:e,onFeatureEnabled:t,onFeatureInvocation:o,onSizeChange:n,onSubscribed:r,range:l=In,renderBufferSize:s=0})=>{let[,i]=Ea(null),a=lt([]),c=lt(!0),u=lt(!1),p=lt(In),m=Ha(()=>new rt(no(l,s)),[]),C=ro(T=>{for(let x of T)m.add(x);a.current=m.data,c.current&&i({})},[m]),h=ro(T=>{T.type==="subscribed"?r==null||r(T):T.type==="viewport-update"?(typeof T.size=="number"&&(n==null||n(T.size),m.setRowCount(T.size)),T.rows?C(T.rows):typeof T.size=="number"&&(a.current=m.data,u.current=!0)):xa(T)?t==null||t(T):Pa(T)?o==null||o(T):console.log(`useDataSource unexpected message ${T.type}`)},[m,t,o,n,r,C]);Vn(()=>()=>{c.current=!0,c.current=!1},[]),Vn(()=>{e==null||e.subscribe({range:no(l,s)},h)},[e,h,l,s]);let v=ro(T=>{let x=no(T,s);m.setRange(x),e.range=p.current=x,e.emit("range",T)},[e,m,s]);return{data:a.current,range:p.current,setRange:v}};import{useMemo as Sa,useRef as Aa}from"react";var Fn=e=>{let t=Aa(e);return Sa(()=>t.current,[])};import{buildColumnMap as La}from"@vuu-ui/vuu-utils";import{useCallback as Ka}from"react";import{useContextMenu as ka}from"@vuu-ui/vuu-popups";var On=({columns:e,data:t})=>{let[o]=ka();return Ka(r=>{var a;let l=r.target,s=l==null?void 0:l.closest("div[role='cell']"),i=l==null?void 0:l.closest("div[role='row']");if(s&&i){let c=La(e),u=parseInt((a=i.ariaRowIndex)!=null?a:"-1"),p=Array.from(i.childNodes).indexOf(s),m=t.find(([h])=>h===u),C=e[p];o(r,"grid",{columnMap:c,columnName:C,row:m})}},[e,t,o])};import{isCharacterKey as Na}from"@vuu-ui/vuu-utils";import{useCallback as st}from"react";var Gn=({navigate:e})=>{let t=st(()=>{e()},[e]),o=st(l=>{let s=l.target,i=s.querySelector("input");i&&(i.focus(),i.select()),s.addEventListener("vuu-commit",t,!0)},[t]),n=st(l=>{let s=l.target,i=s.querySelector("input");i&&(i.focus(),i.select()),s.addEventListener("vuu-commit",t,!0)},[t]);return{onKeyDown:st(l=>{kn(l.target)&&(Na(l.key)?o(l):l.key==="Enter"&&n(l))},[o,n])}};import{applyFilterToColumns as za,applyGroupByToColumns as Ia,applySortToColumns as Va,getCellRenderer as $a,getColumnLabel as Fa,getTableHeadings as Oa,getValueFormatter as Ga,hasValidationRules as Wa,isFilteredColumn as Ba,isGroupColumn as Ua,isPinned as _a,isTypeDescriptor as Ja,logger as Xa,metadataKeys as Qa,moveItem as Ya,sortPinnedColumns as Wn,stripFilterFromColumns as Za,subscribedOnly as ja}from"@vuu-ui/vuu-utils";import{buildValidationChecker as qa}from"@vuu-ui/vuu-ui-controls";import{useReducer as ec}from"react";var{info:lo}=Xa("useTableModel"),tc=100,oc=Qa.count,nc=({serverDataType:e})=>e===void 0,rc=e=>{var t;if(Ja(e.type))return $a((t=e.type)==null?void 0:t.renderer)},lc=(e,t)=>{var n;let o=t.columns.find(({name:r})=>r===e.name);return o?o.serverDataType:(n=e.serverDataType)!=null?n:"string"},sc=["int","long","double"],Bn=e=>e===void 0?void 0:sc.includes(e)?"right":"left",Un=e=>e.type==="columnSettings",_n=e=>e.type==="tableSettings",ic=(e,t)=>{switch(lo==null||lo(`TableModelReducer ${t.type}`),t.type){case"init":return Xn(t);case"moveColumn":return cc(e,t);case"resizeColumn":return pc(e,t);case"setTableSchema":return dc(e,t);case"hideColumns":return uc(e,t);case"showColumns":return mc(e,t);case"pinColumn":return fc(e,t);case"updateColumnProp":return we(e,t);case"tableConfig":return Yn(e,t);default:return console.log(`unhandled action ${t.type}`),e}},Jn=(e,t)=>{let[o,n]=ec(ic,{tableConfig:e,dataSourceConfig:t},Xn),{columns:r,headings:l,tableConfig:s,...i}=o;return{columns:r,dispatchColumnAction:n,headings:l,tableAttributes:i,tableConfig:s}};function Xn({dataSourceConfig:e,tableConfig:t}){let{columns:o,...n}=t,r=o.filter(ja(e==null?void 0:e.columns)).map(Qn(n)),l=r.some(_a)?Wn(r):r,s={columns:l,headings:Oa(l),tableConfig:t,...n};if(e){let{columns:i,...a}=e;s=Yn(s,{type:"tableConfig",...a})}return s}var ac=(e,t)=>t==="uppercase"?e.toUpperCase():t==="capitalize"?e[0].toUpperCase()+e.slice(1).toLowerCase():e,Qn=e=>(t,o)=>{let{columnDefaultWidth:n=tc,columnFormatHeader:r}=e,{align:l=Bn(t.serverDataType),key:s,name:i,label:a=Fa(t),width:c=n,...u}=t,p={...u,align:l,CellRenderer:rc(t),clientSideEditValidationCheck:Wa(t.type)?qa(t.type.renderer.rules):void 0,label:ac(a,r),key:s!=null?s:o+oc,name:i,originalIdx:o,valueFormatter:Ga(t),width:c};return Ua(p)&&(p.columns=p.columns.map(m=>Qn(e)(m,m.key))),p};function cc(e,{column:t,moveBy:o,moveTo:n}){let{columns:r}=e;if(typeof o=="number"){let l=r.indexOf(t),s=r.slice(),[i]=s.splice(l,1);return s.splice(l+o,0,i),{...e,columns:s}}else if(typeof n=="number"){let l=r.indexOf(t);return{...e,columns:Ya(r,l,n)}}return e}function uc(e,{columns:t}){return t.some(o=>o.hidden!==!0)?t.reduce((o,n)=>n.hidden!==!0?we(o,{type:"updateColumnProp",column:n,hidden:!0}):o,e):e}function mc(e,{columns:t}){return t.some(o=>o.hidden)?t.reduce((o,n)=>n.hidden?we(o,{type:"updateColumnProp",column:n,hidden:!1}):o,e):e}function pc(e,{column:t,phase:o,width:n}){let r="updateColumnProp",l=o!=="end";switch(o){case"begin":return we(e,{type:r,column:t,resizing:l});case"end":return we(e,{type:r,column:t,resizing:l,width:n});case"resize":return we(e,{type:r,column:t,width:n});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${o}`)}}function dc(e,{tableSchema:t}){let{columns:o}=e;if(o.some(nc)){let n=o.map(r=>{var s;let l=lc(r,t);return{...r,align:(s=r.align)!=null?s:Bn(l),serverDataType:l}});return{...e,columns:n}}else return e}function fc(e,t){let{columns:o}=e,{column:n,pin:r}=t,l=o.find(s=>s.name===n.name);return l?(o=Te(o,{...l,pin:r}),o=Wn(o),{...e,columns:o}):e}function we(e,t){let{columns:o}=e,{align:n,column:r,hidden:l,label:s,resizing:i,width:a}=t,c=o.find(u=>u.name===r.name);return c&&((n==="left"||n==="right")&&(o=Te(o,{...c,align:n})),typeof s=="string"&&(o=Te(o,{...c,label:s})),typeof i=="boolean"&&(o=Te(o,{...c,resizing:i})),typeof l=="boolean"&&(o=Te(o,{...c,hidden:l})),typeof a=="number"&&(o=Te(o,{...c,width:a}))),{...e,columns:o}}function Yn(e,{confirmed:t,filter:o,groupBy:n,sort:r}){let l=n!==void 0,s=typeof(o==null?void 0:o.filter)=="string",i=r&&r.sortDefs.length>0,a=e;return l&&(a={...e,columns:Ia(a.columns,n,t)}),i&&(a={...e,columns:Va(a.columns,r)}),s?a={...e,columns:za(a.columns,o)}:a.columns.some(Ba)&&(a={...e,columns:Za(a.columns)}),a}function Te(e,t){return e.map(o=>o.name===t.name?t:o)}import{useCallback as ie,useRef as Ie}from"react";var Zn=e=>{let{scrollLeft:t,scrollTop:o}=e,{clientHeight:n,clientWidth:r,scrollHeight:l,scrollWidth:s}=e,i=t/(s-r),a=o/(l-n);return[i,a]},jn=({onAttach:e,onDetach:t})=>{let o=Ie(null);return ie(r=>{if(r)o.current=r,e==null||e(r);else if(o.current){let{current:l}=o;o.current=r,t==null||t(l)}},[e,t])},qn=({maxScrollLeft:e,maxScrollTop:t,onHorizontalScroll:o,onVerticalScroll:n,rowHeight:r,viewportRowCount:l})=>{let s=Ie(!1),i=Ie({scrollTop:0,scrollLeft:0}),a=Ie(null),c=Ie(null),u=ie(()=>{let{current:f}=c,{current:M}=a,{current:D}=s;if(D)s.current=!1;else if(f&&M){let[w,d]=Zn(M),b=Math.round(w*e),H=Math.round(d*t);f.scrollTo({left:b,top:H,behavior:"auto"})}},[e,t]),p=ie(()=>{let{current:f}=c,{current:M}=a,{current:D}=i;if(f&&M){let{scrollLeft:w,scrollTop:d}=f,[b,H]=Zn(f);s.current=!0,M.scrollLeft=Math.round(b*e),M.scrollTop=Math.round(H*t),D.scrollTop!==d&&(D.scrollTop=d,n==null||n(d,H)),D.scrollLeft!==w&&(D.scrollLeft=w,o==null||o(w))}},[e,t,o,n]),m=ie(f=>{a.current=f,f.addEventListener("scroll",u,{passive:!0})},[u]),C=ie(f=>{a.current=null,f.removeEventListener("scroll",u)},[u]),h=ie(f=>{c.current=f,f.addEventListener("scroll",p,{passive:!0})},[p]),v=ie(f=>{c.current=null,f.removeEventListener("scroll",p)},[p]),T=jn({onAttach:h,onDetach:v}),x=jn({onAttach:m,onDetach:C}),g=ie(f=>{let{current:M}=c;if(M){let{scrollLeft:D,scrollTop:w}=M;if(s.current=!1,f.type==="scroll-distance"){let d=D,b=w;f.direction==="up"||f.direction==="down"?b=Math.min(Math.max(0,w+f.distance),t):d=Math.min(Math.max(0,D+f.distance),e),M.scrollTo({top:b,left:d,behavior:"auto"})}else if(f.type==="scroll-page"){let{direction:d}=f,b=l*(d==="down"?r:-r),H=Math.min(Math.max(0,w+b),t);M.scrollTo({top:H,left:D,behavior:"auto"})}else if(f.type==="scroll-end"){let{direction:d}=f,b=d==="end"?t:0;M.scrollTo({top:b,left:M.scrollLeft,behavior:"auto"})}}},[e,t,r,l]);return{scrollbarContainerRef:x,contentContainerRef:T,requestScroll:g}};import{useCallback as Cc,useEffect as bc,useRef as gc}from"react";var er=({columns:e,getRowAtPosition:t,setRange:o,viewportMeasurements:n})=>{let r=gc(0),{contentWidth:l,rowCount:s}=n,i=Cc(a=>{let c=t(a);c!==r.current&&(r.current=c,o({from:c,to:c+s}))},[t,o,s]);return bc(()=>{let{current:a}=r,c={from:a,to:a+s};o(c)},[o,s]),{onVerticalScroll:i}};var{KEY:Hc,IS_EXPANDED:nr,IS_LEAF:rr}=Rc,Ec=(e,t)=>({...e,columns:e.columns.concat(t)}),lr=({availableColumns:e,config:t,containerRef:o,dataSource:n,headerHeight:r=25,navigationStyle:l="cell",onAvailableColumnsChange:s,onConfigChange:i,onFeatureEnabled:a,onFeatureInvocation:c,onRowClick:u,onSelect:p,onSelectionChange:m,renderBufferSize:C=0,rowHeight:h=20,selectionModel:v})=>{let[T,x]=io(n.size);if(n===void 0)throw Error("no data source provided to Vuu Table");let[g,f]=io(),M=I(P=>{f(P)},[]),D=so(()=>Je(n),[n]),w=I(P=>{x(P)},[]),{columns:d,dispatchColumnAction:b,headings:H,tableAttributes:y,tableConfig:R}=Jn(t,n.config);hc(()=>{b({type:"init",dataSourceConfig:n.config,tableConfig:R})},[R,n.config,b]);let[S,E]=io(),[L,F]=so(()=>{let P=(K,k)=>{let G=xc(d,K,{width:k});E(G)};return[S!=null?S:d,P]},[d,S]),ae=so(()=>wc(n.columns),[n.columns]),{getRowAtPosition:De,getRowOffset:Ve,setPctScrollTop:$e,...B}=tt({columns:L,headerHeight:r,headings:H,rowCount:T,rowHeight:h,size:g}),Ce=Fn({from:0,to:B.rowCount}),be=I(({tableSchema:P})=>{P||console.log("usbscription message with no schema")},[]),{data:X,range:O,setRange:Me}=$n({dataSource:n,onFeatureEnabled:a,onFeatureInvocation:c,renderBufferSize:C,onSizeChange:w,onSubscribed:be,range:Ce}),Re=I(P=>{b({type:"init",tableConfig:P,dataSourceConfig:n.config}),i==null||i(P)},[n.config,b,i]),xe=I(P=>{n.config={...n.config,...P}},[n]),V=I(P=>{n.columns=n.columns.concat(P.name);let K=Ec(R,P);b({type:"init",tableConfig:K,dataSourceConfig:n.config}),console.log("dispatch onConfigChange",{newTableConfig:K}),i==null||i(K)},[n,b,i,R]);or(()=>{n.on("config",(P,K)=>{b({type:"tableConfig",...P,confirmed:K})})},[n,b]);let{showColumnSettingsPanel:Y,showTableSettingsPanel:Fe}=vc({availableColumns:e!=null?e:R.columns.map(({name:P,serverDataType:K="string"})=>({name:P,serverDataType:K})),onAvailableColumnsChange:s,onConfigChange:Re,onCreateCalculatedColumn:V,onDataSourceConfigChange:xe,tableConfig:R}),at=I(P=>{Un(P)?Y(P):_n(P)?Fe():b(P)},[b,Y,Fe]),Oe=Xe({dataSource:n,onPersistentColumnOperation:at}),Ge=I((P,K=!1,k)=>{n&&(n.sort=Tc(n.sort,P,K,k))},[n]),We=I((P,K,k)=>{let G=L.find(j=>j.name===K);if(G)P==="resize"?tr(k)&&F(K,k):P==="end"?tr(k)&&(b({type:"resizeColumn",phase:P,column:G,width:k}),i==null||i(oo(R,{type:"col-size",column:G,width:k}))):(E(void 0),b({type:"resizeColumn",phase:P,column:G,width:k}));else throw Error(`useDataTable.handleColumnResize, column ${K} not found`)},[L,R,b,i,F]),Be=I((P,K)=>{let k=Mc(K,P),G=P[Hc];if(P[nr]){if(n.closeTreeNode(G,!0),k){let j=L.indexOf(K);n.getRowsAtDepth(j+1).some(q=>q[nr]||q[rr])||b({type:"hideColumns",columns:L.slice(j+2)})}}else if(n.openTreeNode(G),k){let j=n.getChildRows(G),Pe=L.indexOf(K)+1,q=[L[Pe]];j.some(Ct=>Ct[rr])&&q.push(L[Pe+1]),q.some(Ct=>Ct.hidden)&&b({type:"showColumns",columns:q})}},[L,n,b]),{onVerticalScroll:A}=er({columns:L,getRowAtPosition:De,setRange:Me,viewportMeasurements:B}),N=I(P=>{A(P)},[A]),{requestScroll:$,...z}=qn({maxScrollLeft:B.maxScrollContainerScrollHorizontal,maxScrollTop:B.maxScrollContainerScrollVertical,rowHeight:h,onVerticalScroll:N,viewportRowCount:B.rowCount}),{navigate:U,onKeyDown:Q,..._}=zn({columnCount:L.filter(P=>P.hidden!==!0).length,containerRef:o,navigationStyle:l,requestScroll:$,rowCount:n==null?void 0:n.size,viewportRange:O,viewportRowCount:B.rowCount}),{onKeyDown:Z}=Gn({navigate:U}),ct=I(P=>{Q(P),P.defaultPrevented||Z(P)},[Q,Z]),ut=On({columns:L,data:X}),mt=I(P=>{var q;let k=P.target.closest(".vuuTableNextHeaderCell"),G=parseInt((q=k==null?void 0:k.dataset.index)!=null?q:"-1"),j=Pc(L,G),Pe=P.shiftKey;j&&Ge(j,Pe)},[L,Ge]),pt=I(P=>{Dc(P)?n.groupBy=[]:n&&n.groupBy.includes(P.name)&&(n.groupBy=n.groupBy.filter(K=>K!==P.name))},[n]),dt=I(P=>{n.select(P),m==null||m(P)},[n,m]),Ue=qe({onSelect:p,onSelectionChange:dt,selectionModel:v}),ft=I((P,K,k)=>{Ue(P,K,k),u==null||u(P)},[u,Ue]);or(()=>{n.on("config",(P,K)=>{b({type:"tableConfig",...P,confirmed:K})})},[n,b]);let ar=I((P,K)=>{let k=L[P];b({type:"moveColumn",column:k,moveTo:K})},[L,b]),cr=I((P,K,k)=>n.applyEdit(P,K,k),[n]),{onMouseDown:ur,...mr}=yc({allowDragDrop:!0,containerRef:o,draggableClassName:"vuuTableNext",onDrop:ar,orientation:"horizontal",itemQuery:".vuuTableNextHeaderCell"});return{..._,onKeyDown:ct,columnMap:ae,columns:L,data:X,handleContextMenuAction:Oe,headerProps:{onClick:mt,onMouseDown:ur,onResize:We},menuBuilder:D,onContextMenu:ut,onDataEdited:cr,onRemoveGroupColumn:pt,onResize:M,onRowClick:ft,onToggleGroup:Be,scrollProps:z,tableAttributes:y,viewportMeasurements:B,dragDropHook:mr}};import{MeasuredContainer as zc,useId as Ic}from"@vuu-ui/vuu-layout";import{useForkRef as Vc}from"@salt-ds/core";import{jsx as fe,jsxs as ao}from"react/jsx-runtime";import{createElement as ir}from"react";var W="vuuTableNext",{IDX:$c,RENDER_IDX:Fc}=Lc,Oc=kc(function({Row:t=Zt,availableColumns:o,className:n,config:r,dataSource:l,id:s,navigationStyle:i="cell",onAvailableColumnsChange:a,onConfigChange:c,onFeatureEnabled:u,onFeatureInvocation:p,onRowClick:m,onSelect:C,onSelectionChange:h,onShowConfigEditor:v,renderBufferSize:T=0,rowHeight:x=20,selectionModel:g="extended",showColumnHeaders:f=!0,headerHeight:M=f?25:0,style:D,...w},d){let b=Ic(s),H=Nc(null),{columnMap:y,columns:R,data:S,dragDropHook:E,handleContextMenuAction:L,headerProps:F,onDataEdited:ae,onRemoveGroupColumn:De,onResize:Ve,onRowClick:$e,onToggleGroup:B,menuBuilder:Ce,scrollProps:be,tableAttributes:X,viewportMeasurements:O,...Me}=lr({availableColumns:o,config:r,containerRef:H,dataSource:l,headerHeight:M,navigationStyle:i,onAvailableColumnsChange:a,onConfigChange:c,onFeatureEnabled:u,onFeatureInvocation:p,onRowClick:m,onSelect:C,onSelectionChange:h,renderBufferSize:T,rowHeight:x,selectionModel:g}),Re=()=>({...D,"--content-height":`${O.contentHeight}px`,"--horizontal-scrollbar-height":`${O.horizontalScrollbarHeight}px`,"--content-width":`${O.contentWidth}px`,"--pinned-width-left":`${O.pinnedWidthLeft}px`,"--pinned-width-right":`${O.pinnedWidthRight}px`,"--header-height":`${M}px`,"--row-height":`${x}px`,"--total-header-height":`${O.totalHeaderHeight}px`,"--vertical-scrollbar-width":`${O.verticalScrollbarWidth}px`,"--viewport-body-height":`${O.viewportBodyHeight}px`}),xe=sr(W,n,{[`${W}-colLines`]:X.columnSeparators,[`${W}-rowLines`]:X.rowSeparators,[`${W}-highlight`]:X.showHighlightedRow,[`${W}-zebra`]:X.zebraStripes});return fe(Sc,{menuActionHandler:L,menuBuilder:Ce,children:ao(zc,{...w,className:xe,onResize:Ve,ref:Vc(H,d),style:Re(),children:[fe("div",{className:`${W}-scrollbarContainer`,ref:be.scrollbarContainerRef,children:fe("div",{className:`${W}-scrollbarContent`})}),fe("div",{className:`${W}-contentContainer`,ref:be.contentContainerRef,children:ao("div",{...Me,className:`${W}-table`,tabIndex:-1,children:[f?fe("div",{className:`${W}-col-headings`,children:ao("div",{className:`${W}-col-headers`,role:"row",children:[R.filter(Kc).map((V,Y)=>Ac(V)?ir(ot,{...F,column:V,"data-index":Y,key:V.name,onRemoveColumn:De}):ir(xn,{...F,className:sr({"vuuDraggable-dragAway":Y===E.draggedItemIndex}),column:V,"data-index":Y,id:`${b}-col-${Y}`,key:V.name})),E.draggable]})}):null,fe("div",{className:`${W}-body`,children:S.map(V=>fe(t,{columnMap:y,columns:R,onClick:$e,onDataEdited:ae,row:V,offset:x*V[$c]+M,onToggleGroup:B,zebraStripes:X.zebraStripes},V[Fc]))})]})})]})})});import{Dropdown as Gc}from"@vuu-ui/vuu-ui-controls";import{isColumnTypeRenderer as Wc,isTypeDescriptor as Bc,registerComponent as Uc}from"@vuu-ui/vuu-utils";import{useCallback as _c,useState as Jc}from"react";import{jsx as Zc}from"react/jsx-runtime";var Xc="vuuTableDropdownCell",Qc=["Enter"," "],Yc=({column:e,columnMap:t,row:o})=>{var a,c,u;let n=Bc(e.type)&&Wc((a=e.type)==null?void 0:a.renderer)?(u=(c=e.type)==null?void 0:c.renderer)==null?void 0:u.values:[],r=t[e.name],[l,s]=Jc(o[r]),i=_c((p,m)=>{m&&s(m)},[]);return Zc(Gc,{className:Xc,onSelectionChange:i,openKeys:Qc,selected:l,source:n,width:e.width-17})};Uc("dropdown-cell",Yc,"cell-renderer",{});import{registerComponent as jc}from"@vuu-ui/vuu-utils";import{Input as qc}from"@salt-ds/core";import{useEditableText as eu}from"@vuu-ui/vuu-ui-controls";import tu from"classnames";import{jsx as co}from"react/jsx-runtime";var it="vuuTableInputCell",ou=()=>(console.warn("onCommit handler has not been provided to InputCell cell renderer"),!0),nu=({column:e,columnMap:t,onCommit:o=ou,row:n})=>{let r=t[e.name],{align:l="left",clientSideEditValidationCheck:s,valueFormatter:i}=e,{warningMessage:a,...c}=eu({initialValue:i(n[r]),onCommit:o,clientSideEditValidationCheck:s}),u=a&&l==="left"?co("span",{className:`${it}-icon`,"data-icon":"error"}):void 0,p=a&&l==="right"?co("span",{className:`${it}-icon`,"data-icon":"error"}):void 0;return co(qc,{...c,className:tu(it,{[`${it}-error`]:a!==void 0}),endAdornment:u,startAdornment:p})};jc("input-cell",nu,"cell-renderer",{});export{_e as ColumnResizer,ot as GroupHeaderCellNext,Td as Table,Oc as TableNext,Je as buildContextMenuDescriptors,Sp as isShowColumnSettings,Ap as isShowTableSettings,oo as updateTableConfig,jo as useMeasuredContainer,qe as useSelection,Ye as useTableColumnResize,Xe as useTableContextMenu,ln as useTableModel,tt as useTableViewport};
+// src/header-cell/GroupHeaderCellNext.tsx
+import cx3 from "classnames";
+import { useCallback as useCallback4, useRef as useRef3, useState as useState2 } from "react";
+
+// src/column-resizing/ColumnResizer.tsx
+import { useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var NOOP = () => void 0;
+var baseClass = "vuuColumnResizerNext";
+var ColumnResizer = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const position = useRef(0);
+  const onMouseMove = useCallback(
+    (e) => {
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      const x = Math.round(e.clientX);
+      const moveBy = x - position.current;
+      position.current = x;
+      if (moveBy !== 0) {
+        onDrag(e, moveBy);
+      }
+    },
+    [onDrag]
+  );
+  const onMouseUp = useCallback(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      onDragEnd(e);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      onDragStart(e);
+      position.current = Math.round(e.clientX);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("mousemove", onMouseMove);
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+    },
+    [onDragStart, onMouseMove, onMouseUp]
+  );
+  return /* @__PURE__ */ jsx("div", { className: baseClass, onMouseDown: handleMouseDown });
+};
+
+// src/column-resizing/useTableColumnResize.tsx
+import { useCallback as useCallback2, useRef as useRef2, useState } from "react";
+var useTableColumnResize = ({
+  column,
+  onResize,
+  rootRef
+}) => {
+  const widthRef = useRef2(0);
+  const [isResizing, setResizing] = useState(false);
+  const { name } = column;
+  const handleResizeStart = useCallback2(() => {
+    if (onResize && rootRef.current) {
+      const { width } = rootRef.current.getBoundingClientRect();
+      widthRef.current = Math.round(width);
+      setResizing(true);
+      onResize == null ? void 0 : onResize("begin", name);
+    }
+  }, [name, onResize, rootRef]);
+  const handleResize = useCallback2(
+    (_evt, moveBy) => {
+      if (rootRef.current) {
+        if (onResize) {
+          const { width } = rootRef.current.getBoundingClientRect();
+          const newWidth = Math.round(width) + moveBy;
+          if (newWidth !== widthRef.current && newWidth > 0) {
+            onResize("resize", name, newWidth);
+            widthRef.current = newWidth;
+          }
+        }
+      }
+    },
+    [name, onResize, rootRef]
+  );
+  const handleResizeEnd = useCallback2(() => {
+    if (onResize) {
+      onResize("end", name, widthRef.current);
+      setTimeout(() => {
+        setResizing(false);
+      }, 80);
+    }
+  }, [name, onResize]);
+  return {
+    isResizing,
+    onDrag: handleResize,
+    onDragStart: handleResizeStart,
+    onDragEnd: handleResizeEnd
+  };
+};
+
+// src/useCell.ts
+import { getColumnStyle } from "@vuu-ui/vuu-utils";
+import cx from "classnames";
+import { useMemo } from "react";
+var useCell = (column, classBase11, isHeader) => (
+  // TODO measure perf without the memo, might not be worth the cost
+  useMemo(() => {
+    const className = cx(classBase11, {
+      vuuPinFloating: column.pin === "floating",
+      vuuPinLeft: column.pin === "left",
+      vuuPinRight: column.pin === "right",
+      vuuEndPin: isHeader && column.endPin,
+      // [`${classBase}-resizing`]: column.resizing,
+      [`${classBase11}-editable`]: column.editable,
+      [`${classBase11}-right`]: column.align === "right"
+    });
+    const style = getColumnStyle(column);
+    return {
+      className,
+      style
+    };
+  }, [column, classBase11, isHeader])
+);
+
+// src/column-header-pill/ColumnHeaderPill.tsx
+import cx2 from "classnames";
+import { useCallback as useCallback3 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var classBase = "vuuColumnHeaderPill";
+var ColumnHeaderPill = ({
+  children,
+  className,
+  column,
+  onRemove,
+  removable,
+  ...htmlAttributes
+}) => {
+  if (removable && typeof onRemove !== "function") {
+    throw Error(
+      "ColumnHeaderPill onRemove prop must be provided if Pill is removable"
+    );
+  }
+  const handleClickRemove = useCallback3(
+    (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      onRemove == null ? void 0 : onRemove(column);
+    },
+    [column, onRemove]
+  );
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx2(classBase, className), children: [
+    children,
+    removable ? /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: `${classBase}-removeButton`,
+        role: "button",
+        "data-icon": "cross",
+        onClick: handleClickRemove
+      }
+    ) : null
+  ] });
+};
+
+// src/column-header-pill/GroupColumnPill.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var GroupColumnPill = ({
+  column,
+  ...columnHeaderProps
+}) => {
+  const { name, sorted } = column;
+  const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
+  return /* @__PURE__ */ jsxs2(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
+    /* @__PURE__ */ jsx3("span", { className: "vuuGroupColumnPill-label", children: name }),
+    icon !== void 0 ? /* @__PURE__ */ jsx3("span", { "data-icon": icon }) : null,
+    typeof sorted === "number" ? /* @__PURE__ */ jsx3("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
+  ] });
+};
+
+// src/column-header-pill/SortIndicator.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SortIndicator = ({ column }) => {
+  if (!column.sorted) {
+    return null;
+  }
+  const icon = typeof column.sorted === "number" ? column.sorted < 0 ? "arrow-down" : "arrow-up" : column.sorted === "A" ? "arrow-up" : "arrow-down";
+  return /* @__PURE__ */ jsxs3(ColumnHeaderPill, { column, children: [
+    /* @__PURE__ */ jsx4("span", { "data-icon": icon }),
+    typeof column.sorted === "number" ? /* @__PURE__ */ jsx4("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
+  ] });
+};
+
+// src/header-cell/GroupHeaderCellNext.tsx
+import {
+  OverflowContainer,
+  useLayoutEffectSkipFirst
+} from "@vuu-ui/vuu-layout";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createElement } from "react";
+var classBase2 = "vuuTableGroupHeaderCell";
+var switchIfChanged = (columns, newColumns) => {
+  if (columns === newColumns) {
+    return columns;
+  } else {
+    return newColumns;
+  }
+};
+var GroupHeaderCellNext = ({
+  column: groupColumn,
+  className: classNameProp,
+  onMoveColumn,
+  onRemoveColumn,
+  onResize,
+  ...htmlAttributes
+}) => {
+  const rootRef = useRef3(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column: groupColumn,
+    onResize,
+    rootRef
+  });
+  const [columns, setColumns] = useState2(groupColumn.columns);
+  const { className, style } = useCell(groupColumn, classBase2, true);
+  const columnPillProps = columns.length > 1 ? {
+    removable: true,
+    onRemove: onRemoveColumn
+  } : void 0;
+  const handleMoveItem = useCallback4(
+    (fromIndex, toIndex) => {
+      setColumns((cols) => {
+        const newCols = cols.slice();
+        const [tab] = newCols.splice(fromIndex, 1);
+        if (toIndex === -1) {
+          const result = newCols.concat(tab);
+          onMoveColumn == null ? void 0 : onMoveColumn(result);
+          return result;
+        } else {
+          newCols.splice(toIndex, 0, tab);
+          onMoveColumn == null ? void 0 : onMoveColumn(newCols);
+          return newCols;
+        }
+      });
+    },
+    [onMoveColumn]
+  );
+  useLayoutEffectSkipFirst(() => {
+    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
+  }, [groupColumn.columns]);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx3(className, classNameProp, {
+        [`${classBase2}-pending`]: groupColumn.groupConfirmed === false
+      }),
+      ref: rootRef,
+      role: "columnheader",
+      style,
+      children: [
+        /* @__PURE__ */ jsx5(
+          OverflowContainer,
+          {
+            allowDragDrop: true,
+            className: `${classBase2}-inner`,
+            height: 24,
+            onMoveItem: handleMoveItem,
+            overflowPosition: "start",
+            children: columns.map((column) => {
+              return /* @__PURE__ */ createElement(
+                GroupColumnPill,
+                {
+                  ...columnPillProps,
+                  column,
+                  key: column.key
+                }
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          ColumnHeaderPill,
+          {
+            column: groupColumn,
+            removable: true,
+            onRemove: onRemoveColumn
+          }
+        ),
+        groupColumn.resizeable !== false ? /* @__PURE__ */ jsx5(ColumnResizer, { ...resizeProps }) : null
+      ]
+    }
+  );
+};
+
+// src/header-cell/HeaderCell.tsx
+import { useCallback as useCallback6, useRef as useRef5 } from "react";
+
+// src/column-menu/ColumnMenu.tsx
+import { useContextMenu } from "@vuu-ui/vuu-popups";
+import cx4 from "classnames";
+import {
+  useCallback as useCallback5,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var getPosition = (element) => {
+  if (element) {
+    const { bottom, left } = element.getBoundingClientRect();
+    return { x: left, y: bottom + 6 };
+  }
+};
+var ColumnMenu = ({
+  className,
+  column,
+  ...props
+}) => {
+  const rootRef = useRef4(null);
+  const [menuOpen, setMenuOpen] = useState3(false);
+  const [showContextMenu] = useContextMenu();
+  const handleMenuClose = useCallback5(() => {
+    setMenuOpen(false);
+  }, []);
+  const showColumnMenu = useCallback5(
+    (e) => {
+      setMenuOpen(true);
+      showContextMenu(e, "column-menu", {
+        column,
+        ContextMenuProps: {
+          onClose: handleMenuClose,
+          position: getPosition(rootRef.current)
+        }
+      });
+    },
+    [column, handleMenuClose, showContextMenu]
+  );
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      ...props,
+      className: cx4("vuuTable-columnMenu", className, {
+        "vuuTable-columnMenu-open": menuOpen
+      }),
+      "data-icon": "more-vert",
+      onClick: showColumnMenu,
+      ref: rootRef
+    }
+  );
+};
+
+// src/header-cell/HeaderCell.tsx
+import cx5 from "classnames";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase3 = "vuuTableHeaderCell";
+var HeaderCell = ({
+  className: classNameProp,
+  column,
+  onClick,
+  onResize,
+  ...htmlAttributes
+}) => {
+  var _a;
+  const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
+  const rootRef = useRef5(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column,
+    onResize,
+    rootRef
+  });
+  const handleClick = useCallback6(
+    (evt) => {
+      !isResizing && (onClick == null ? void 0 : onClick(evt));
+    },
+    [isResizing, onClick]
+  );
+  const { className, style } = useCell(column, classBase3, true);
+  const columnMenu = /* @__PURE__ */ jsx7(ColumnMenu, { column });
+  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ jsx7(HeaderCellLabelRenderer, { className: `${classBase3}-label`, column }) : /* @__PURE__ */ jsx7("div", { className: `${classBase3}-label`, children: (_a = column.label) != null ? _a : column.name });
+  const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ jsx7(HeaderCellContentRenderer, { column }, "content")] : [];
+  const sortIndicator = /* @__PURE__ */ jsx7(SortIndicator, { column });
+  const headerItems = column.align === "right" ? [sortIndicator, columnLabel].concat(columnContent).concat(columnMenu) : [columnMenu, columnLabel, sortIndicator].concat(columnContent);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx5(className, classNameProp, {
+        [`${classBase3}-resizing`]: isResizing
+      }),
+      onClick: handleClick,
+      ref: rootRef,
+      role: "columnheader",
+      style,
+      children: [
+        ...headerItems,
+        column.resizeable !== false ? /* @__PURE__ */ jsx7(ColumnResizer, { ...resizeProps }) : null
+      ]
+    }
+  );
+};
+
+// src/Table.tsx
+import {
+  MeasuredContainer,
+  useId
+} from "@vuu-ui/vuu-layout";
+import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
+import { metadataKeys as metadataKeys7 } from "@vuu-ui/vuu-utils";
+import { useForkRef } from "@salt-ds/core";
+import cx9 from "classnames";
+import {
+  forwardRef,
+  useRef as useRef14,
+  useState as useState6
+} from "react";
+
+// src/Row.tsx
+import {
+  isGroupColumn,
+  isJsonColumn,
+  isJsonGroup,
+  metadataKeys as metadataKeys2,
+  isNotHidden,
+  RowSelected
+} from "@vuu-ui/vuu-utils";
+import cx7 from "classnames";
+import { memo, useCallback as useCallback9 } from "react";
+
+// src/table-cell/TableCell.tsx
+import { isNumericColumn } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback7 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var classBase4 = "vuuTableCell";
+var TableCell = ({
+  column,
+  columnMap,
+  onClick,
+  onDataEdited,
+  row
+}) => {
+  const { className, style } = useCell(column, classBase4);
+  const { CellRenderer, name, valueFormatter } = column;
+  const dataIdx = columnMap[name];
+  const handleDataItemEdited = useCallback7(
+    (value) => {
+      if (onDataEdited) {
+        let typedValue = value;
+        if (isNumericColumn(column) && typeof value === "string") {
+          typedValue = column.serverDataType === "double" ? parseFloat(value) : parseInt(value);
+        }
+        return onDataEdited == null ? void 0 : onDataEdited(row, name, typedValue);
+      } else {
+        throw Error(
+          "TableCell onDataEdited prop not supplied for an editable cell"
+        );
+      }
+    },
+    [column, name, onDataEdited, row]
+  );
+  const handleClick = useCallback7(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className,
+      onClick: onClick ? handleClick : void 0,
+      role: "cell",
+      style,
+      children: CellRenderer ? /* @__PURE__ */ jsx8(
+        CellRenderer,
+        {
+          column,
+          columnMap,
+          onCommit: handleDataItemEdited,
+          row
+        }
+      ) : valueFormatter(row[dataIdx])
+    }
+  );
+};
+
+// src/table-cell/TableGroupCell.tsx
+import { getGroupValueAndOffset, metadataKeys } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback8 } from "react";
+import cx6 from "classnames";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var { IS_LEAF } = metadataKeys;
+var classBase5 = "vuuTableGroupCell";
+var TableGroupCell = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = getGroupValueAndOffset(columns, row);
+  const { className, style } = useCell(column, classBase5);
+  const handleClick = useCallback8(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
+  const isLeaf = row[IS_LEAF];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx9("span", { className: `${classBase5}-spacer` }, i));
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cx6(className, "vuuTableCell"),
+      role: "cell",
+      style,
+      onClick: isLeaf ? void 0 : handleClick,
+      children: [
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ jsx9("span", { className: `${classBase5}-toggle`, "data-icon": "triangle-right" }),
+        /* @__PURE__ */ jsx9("span", { children: value })
+      ]
+    }
+  );
+};
+
+// src/Row.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
+var { IDX, IS_EXPANDED, SELECTED } = metadataKeys2;
+var classBase6 = "vuuTableRow";
+var Row = memo(
+  ({
+    className: classNameProp,
+    columnMap,
+    columns,
+    highlighted,
+    row,
+    offset,
+    onClick,
+    onDataEdited,
+    onToggleGroup,
+    zebraStripes = false,
+    ...htmlAttributes
+  }) => {
+    const {
+      [IDX]: rowIndex,
+      [IS_EXPANDED]: isExpanded,
+      [SELECTED]: selectionStatus
+    } = row;
+    const handleRowClick = useCallback9(
+      (evt) => {
+        const rangeSelect = evt.shiftKey;
+        const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+        onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+      },
+      [onClick, row]
+    );
+    const { True, First, Last } = RowSelected;
+    const className = cx7(classBase6, classNameProp, {
+      [`${classBase6}-even`]: zebraStripes && rowIndex % 2 === 0,
+      [`${classBase6}-expanded`]: isExpanded,
+      [`${classBase6}-highlighted`]: highlighted,
+      [`${classBase6}-selected`]: selectionStatus & True,
+      [`${classBase6}-selectedStart`]: selectionStatus & First,
+      [`${classBase6}-selectedEnd`]: selectionStatus & Last
+    });
+    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
+    const handleGroupCellClick = useCallback9(
+      (evt, column) => {
+        if (isGroupColumn(column) || isJsonGroup(column, row)) {
+          evt.stopPropagation();
+          onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+        }
+      },
+      [onToggleGroup, row]
+    );
+    return /* @__PURE__ */ createElement2(
+      "div",
+      {
+        ...htmlAttributes,
+        "aria-rowindex": row[0],
+        key: `row-${row[0]}`,
+        role: "row",
+        className,
+        onClick: handleRowClick,
+        style
+      },
+      /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
+      columns.filter(isNotHidden).map((column) => {
+        const isGroup = isGroupColumn(column);
+        const isJsonCell = isJsonColumn(column);
+        const Cell = isGroup ? TableGroupCell : TableCell;
+        return /* @__PURE__ */ jsx10(
+          Cell,
+          {
+            column,
+            columnMap,
+            onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+            onDataEdited,
+            row
+          },
+          column.key
+        );
+      }),
+      /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyRight` })
+    );
+  }
+);
+Row.displayName = "Row";
+
+// src/useTable.ts
+import {
+  useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2
+} from "@vuu-ui/vuu-layout";
+import { useTableAndColumnSettings } from "@vuu-ui/vuu-table-extras";
+import {
+  useDragDropNext as useDragDrop
+} from "@vuu-ui/vuu-ui-controls";
+import {
+  applySort,
+  buildColumnMap as buildColumnMap2,
+  isGroupColumn as isGroupColumn3,
+  isJsonGroup as isJsonGroup2,
+  isValidNumber,
+  metadataKeys as metadataKeys6,
+  updateColumn
+} from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback18,
+  useEffect as useEffect4,
+  useMemo as useMemo5,
+  useState as useState5
+} from "react";
+
+// src/context-menu/buildContextMenuDescriptors.ts
+import { isNumericColumn as isNumericColumn2 } from "@vuu-ui/vuu-utils";
+var buildContextMenuDescriptors = (dataSource) => (location, options) => {
+  const descriptors = [];
+  if (dataSource === void 0) {
+    return descriptors;
+  }
+  if (location === "header" || location === "column-menu") {
+    descriptors.push(
+      ...buildSortMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildGroupMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildAggregationMenuItems(options, dataSource)
+    );
+    descriptors.push(...buildColumnDisplayMenuItems(options));
+    descriptors.push({
+      action: "column-settings",
+      icon: "cog",
+      label: `Column Settings`,
+      options
+    });
+    descriptors.push({
+      action: "table-settings",
+      icon: "cog",
+      label: `DataGrid Settings`,
+      options
+    });
+  } else if (location === "filter") {
+    const { column, filter } = options;
+    const colIsOnlyFilter = (filter == null ? void 0 : filter.column) === (column == null ? void 0 : column.name);
+    descriptors.push({
+      label: "Edit filter",
+      action: "filter-edit",
+      options
+    });
+    descriptors.push({
+      label: "Remove filter",
+      action: "filter-remove-column",
+      options
+    });
+    if (column && !colIsOnlyFilter) {
+      descriptors.push({
+        label: `Remove all filters`,
+        action: "remove-filters",
+        options
+      });
+    }
+  }
+  return descriptors;
+};
+function buildSortMenuItems(options, { sort: { sortDefs } }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const hasSort = sortDefs.length > 0;
+  if (column.sorted === "A") {
+    menuItems.push({
+      label: "Reverse Sort (DSC)",
+      action: "sort-dsc",
+      options
+    });
+  } else if (column.sorted === "D") {
+    menuItems.push({
+      label: "Reverse Sort (ASC)",
+      action: "sort-asc",
+      options
+    });
+  } else if (typeof column.sorted === "number") {
+    if (column.sorted > 0) {
+      menuItems.push({
+        label: "Reverse Sort (DSC)",
+        action: "sort-add-dsc",
+        options
+      });
+    } else {
+      menuItems.push({
+        label: "Reverse Sort (ASC)",
+        action: "sort-add-asc",
+        options
+      });
+    }
+    if (hasSort && Math.abs(column.sorted) < sortDefs.length) {
+      menuItems.push({
+        label: "Remove from sort",
+        action: "sort-remove",
+        options
+      });
+    }
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else if (hasSort) {
+    menuItems.push({
+      label: "Add to sort",
+      children: [
+        { label: "Ascending", action: "sort-add-asc", options },
+        { label: "Descending", action: "sort-add-dsc", options }
+      ]
+    });
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else {
+    menuItems.push({
+      label: "Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  }
+  return menuItems;
+}
+function buildAggregationMenuItems(options, dataSource) {
+  const { column } = options;
+  if (column === void 0 || dataSource.groupBy.length === 0) {
+    return [];
+  }
+  const { name, label = name } = column;
+  return [
+    {
+      label: `Aggregate ${label}`,
+      children: [
+        { label: "Count", action: "agg-count", options },
+        { label: "Distinct", action: "agg-distinct", options }
+      ].concat(
+        isNumericColumn2(column) ? [
+          { label: "Sum", action: "agg-sum", options },
+          { label: "Avg", action: "agg-avg", options },
+          { label: "High", action: "agg-high", options },
+          { label: "Low", action: "agg-low", options }
+        ] : []
+      )
+    }
+  ];
+}
+var pinColumn = (options, pinLocation) => ({
+  label: `Pin ${pinLocation}`,
+  action: `column-pin-${pinLocation}`,
+  options
+});
+var pinLeft = (options) => pinColumn(options, "left");
+var pinFloating = (options) => pinColumn(options, "floating");
+var pinRight = (options) => pinColumn(options, "right");
+function buildColumnDisplayMenuItems(options) {
+  const { column } = options;
+  if (column === void 0) {
+    return [];
+  }
+  const { pin } = column;
+  const menuItems = [
+    {
+      label: `Hide column`,
+      action: "column-hide",
+      options
+    },
+    {
+      label: `Remove column`,
+      action: "column-remove",
+      options
+    }
+  ];
+  if (pin === void 0) {
+    menuItems.push({
+      label: `Pin column`,
+      children: [pinLeft(options), pinFloating(options), pinRight(options)]
+    });
+  } else if (pin === "left") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinFloating(options), pinRight(options)]
+      }
+    );
+  } else if (pin === "right") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinFloating(options)]
+      }
+    );
+  } else if (pin === "floating") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinRight(options)]
+      }
+    );
+  }
+  return menuItems;
+}
+function buildGroupMenuItems(options, { groupBy }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const { name, label = name } = column;
+  if (groupBy.length === 0) {
+    menuItems.push({
+      label: `Group by ${label}`,
+      action: "group",
+      options
+    });
+  } else {
+    menuItems.push({
+      label: `Add ${label} to group by`,
+      action: "group-add",
+      options
+    });
+  }
+  return menuItems;
+}
+
+// src/context-menu/useHandleTableContextMenu.ts
+import { removeColumnFromFilter } from "@vuu-ui/vuu-utils";
+import {
+  addGroupColumn,
+  addSortColumn,
+  AggregationType,
+  setAggregations,
+  setSortColumn
+} from "@vuu-ui/vuu-utils";
+var removeFilterColumn = (dataSourceFilter, column) => {
+  if (dataSourceFilter.filterStruct && column) {
+    const [filterStruct, filter] = removeColumnFromFilter(
+      column,
+      dataSourceFilter.filterStruct
+    );
+    return {
+      filter,
+      filterStruct
+    };
+  } else {
+    return dataSourceFilter;
+  }
+};
+var { Average, Count, Distinct, High, Low, Sum } = AggregationType;
+var useHandleTableContextMenu = ({
+  dataSource,
+  onPersistentColumnOperation
+}) => {
+  const handleContextMenuAction = (action) => {
+    const gridOptions = action.options;
+    if (gridOptions.column && dataSource) {
+      const { column } = gridOptions;
+      switch (action.menuId) {
+        case "sort-asc":
+          return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
+        case "sort-add-asc":
+          return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
+        case "group":
+          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
+        case "group-add":
+          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
+        case "column-hide":
+          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
+        case "column-remove":
+          return dataSource.columns = dataSource.columns.filter((name) => name !== column.name), true;
+        case "filter-remove-column":
+          return dataSource.filter = removeFilterColumn(dataSource.filter, column), true;
+        case "remove-filters":
+          return dataSource.filter = { filter: "" }, true;
+        case "agg-avg":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
+        case "agg-distinct":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Distinct), true;
+        case "agg-sum":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Sum), true;
+        case "column-pin-floating":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "floating" }), true;
+        case "column-pin-left":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "left" }), true;
+        case "column-pin-right":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "right" }), true;
+        case "column-unpin":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: void 0 }), true;
+        case "column-settings":
+          return onPersistentColumnOperation({ type: "columnSettings", column }), true;
+        case "table-settings":
+          return onPersistentColumnOperation({ type: "tableSettings" }), true;
+        default:
+      }
+    }
+    return false;
+  };
+  return handleContextMenuAction;
+};
+
+// src/table-config.ts
+var updateTableConfig = (config, action) => {
+  switch (action.type) {
+    case "col-size":
+      return {
+        ...config,
+        columns: config.columns.map(
+          (col) => col.name === action.column.name ? { ...col, width: action.width } : col
+        )
+      };
+    case "column-prop":
+      return {
+        ...config,
+        columns: config.columns.map(
+          (col) => col.name === action.column.name ? { ...col, [action.property]: action.value } : col
+        )
+      };
+    default:
+      return config;
+  }
+};
+
+// src/useCellEditing.ts
+import { isCharacterKey } from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback10
+} from "react";
+
+// src/table-dom-utils.ts
+var headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;
+var dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx}'] > [role='cell']:nth-child(${colIdx + 1})`;
+var getTableCell = (containerRef, [rowIdx, colIdx]) => {
+  var _a;
+  const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
+  const cell = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+    cssQuery
+  );
+  if (cellIsEditable(cell)) {
+    const focusableContent = cell.querySelector("button");
+    return focusableContent || cell;
+  } else {
+    return cell;
+  }
+};
+var cellIsEditable = (cell) => cell.classList.contains("vuuTableCell-editable");
+var cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
+function getRowIndex(rowEl) {
+  if (rowEl) {
+    const idx = rowEl.ariaRowIndex;
+    if (idx !== null) {
+      return parseInt(idx, 10);
+    }
+  }
+  return -1;
+}
+var closestRow = (el) => el.closest('[role="row"]');
+var closestRowIndex = (el) => getRowIndex(closestRow(el));
+
+// src/useCellEditing.ts
+var useCellEditing = ({ navigate }) => {
+  const commitHandler = useCallback10(() => {
+    navigate();
+  }, [navigate]);
+  const editInput = useCallback10(
+    (evt) => {
+      const cellEl = evt.target;
+      const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+    },
+    []
+  );
+  const focusInput = useCallback10(
+    (evt) => {
+      const cellEl = evt.target;
+      const input = cellEl.querySelector("input");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+    },
+    []
+  );
+  const handleKeyDown = useCallback10(
+    (e) => {
+      const el = e.target;
+      if (cellIsTextInput(el)) {
+        if (isCharacterKey(e.key)) {
+          editInput(e);
+        } else if (e.key === "Enter") {
+          focusInput(e);
+        }
+      }
+    },
+    [editInput, focusInput]
+  );
+  const handleDoubleClick = useCallback10(
+    (e) => {
+      const el = e.target;
+      if (el.matches("input") || el.querySelector("input")) {
+        editInput(e);
+        e.stopPropagation();
+      }
+    },
+    [editInput]
+  );
+  const handleBlur = useCallback10(
+    (e) => {
+      const el = e.target;
+      el.removeEventListener("vuu-commit", commitHandler, true);
+    },
+    [commitHandler]
+  );
+  const handleFocus = useCallback10(
+    (e) => {
+      const el = e.target;
+      el.addEventListener("vuu-commit", commitHandler, true);
+    },
+    [commitHandler]
+  );
+  return {
+    onBlur: handleBlur,
+    onDoubleClick: handleDoubleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown
+  };
+};
+
+// src/useDataSource.ts
+import {
+  isVuuFeatureInvocation
+} from "@vuu-ui/vuu-data";
+import { getFullRange, NULL_RANGE } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback11, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState4 } from "react";
+
+// src/moving-window.ts
+import {
+  isRowSelectedLast,
+  metadataKeys as metadataKeys3,
+  WindowRange
+} from "@vuu-ui/vuu-utils";
+var { SELECTED: SELECTED2 } = metadataKeys3;
+var MovingWindow = class {
+  constructor({ from, to }) {
+    this.rowCount = 0;
+    this.setRowCount = (rowCount) => {
+      if (rowCount < this.data.length) {
+        this.data.length = rowCount;
+      }
+      this.rowCount = rowCount;
+    };
+    this.range = new WindowRange(from, to);
+    this.data = new Array(Math.max(0, to - from));
+    this.rowCount = 0;
+  }
+  add(data) {
+    const [index] = data;
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - this.range.from;
+      this.data[internalIndex] = data;
+      if (data[SELECTED2]) {
+        const previousRow = this.data[internalIndex - 1];
+        if (isRowSelectedLast(previousRow)) {
+          this.data[internalIndex - 1] = previousRow.slice();
+          this.data[internalIndex - 1][SELECTED2] -= 4;
+        }
+      }
+    }
+  }
+  getAtIndex(index) {
+    return this.range.isWithin(index) && this.data[index - this.range.from] != null ? this.data[index - this.range.from] : void 0;
+  }
+  isWithinRange(index) {
+    return this.range.isWithin(index);
+  }
+  setRange({ from, to }) {
+    if (from !== this.range.from || to !== this.range.to) {
+      const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+      const newData = new Array(Math.max(0, to - from));
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      this.range.from = from;
+      this.range.to = to;
+    }
+  }
+  getSelectedRows() {
+    return this.data.filter((row) => row[SELECTED2] !== 0);
+  }
+};
+
+// src/useDataSource.ts
+var useDataSource = ({
+  dataSource,
+  onFeatureInvocation,
+  onSizeChange,
+  onSubscribed,
+  range = NULL_RANGE,
+  renderBufferSize = 0
+}) => {
+  const [, forceUpdate] = useState4(null);
+  const data = useRef6([]);
+  const isMounted = useRef6(true);
+  const hasUpdated = useRef6(false);
+  const rangeRef = useRef6(NULL_RANGE);
+  const dataWindow = useMemo2(
+    () => new MovingWindow(getFullRange(range, renderBufferSize)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const setData = useCallback11(
+    (updates) => {
+      for (const row of updates) {
+        dataWindow.add(row);
+      }
+      data.current = dataWindow.data;
+      if (isMounted.current) {
+        forceUpdate({});
+      } else {
+        console.log(`ignore update as we're not mounted`);
+      }
+    },
+    [dataWindow]
+  );
+  const datasourceMessageHandler = useCallback11(
+    (message) => {
+      if (message.type === "subscribed") {
+        onSubscribed == null ? void 0 : onSubscribed(message);
+      } else if (message.type === "viewport-update") {
+        if (typeof message.size === "number") {
+          onSizeChange == null ? void 0 : onSizeChange(message.size);
+          dataWindow.setRowCount(message.size);
+        }
+        if (message.rows) {
+          setData(message.rows);
+        } else if (typeof message.size === "number") {
+          data.current = dataWindow.data;
+          hasUpdated.current = true;
+        }
+      } else if (isVuuFeatureInvocation(message)) {
+        onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
+      } else {
+        console.log(`useDataSource unexpected message ${message.type}`);
+      }
+    },
+    [dataWindow, onFeatureInvocation, onSizeChange, onSubscribed, setData]
+  );
+  const getSelectedRows = useCallback11(() => {
+    return dataWindow.getSelectedRows();
+  }, [dataWindow]);
+  useEffect(() => {
+    var _a;
+    isMounted.current = true;
+    (_a = dataSource.resume) == null ? void 0 : _a.call(dataSource);
+    return () => {
+      var _a2;
+      isMounted.current = false;
+      (_a2 = dataSource.suspend) == null ? void 0 : _a2.call(dataSource);
+    };
+  }, [dataSource]);
+  useEffect(() => {
+    var _a;
+    if (dataSource.status === "disabled") {
+      (_a = dataSource.enable) == null ? void 0 : _a.call(dataSource, datasourceMessageHandler);
+    } else {
+      dataSource == null ? void 0 : dataSource.subscribe(
+        { range: getFullRange(range, renderBufferSize) },
+        datasourceMessageHandler
+      );
+    }
+  }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
+  const setRange = useCallback11(
+    (range2) => {
+      const fullRange = getFullRange(range2, renderBufferSize);
+      dataWindow.setRange(fullRange);
+      dataSource.range = rangeRef.current = fullRange;
+      dataSource.emit("range", range2);
+    },
+    [dataSource, dataWindow, renderBufferSize]
+  );
+  return {
+    data: data.current,
+    dataRef: data,
+    getSelectedRows,
+    range: rangeRef.current,
+    setRange
+  };
+};
+
+// src/useInitialValue.ts
+import { useMemo as useMemo3, useRef as useRef7 } from "react";
+var useInitialValue = (value) => {
+  const ref = useRef7(value);
+  return useMemo3(() => ref.current, []);
+};
+
+// src/useKeyboardNavigation.ts
+import { useControlled } from "@salt-ds/core";
+import {
+  useCallback as useCallback12,
+  useEffect as useEffect2,
+  useRef as useRef8
+} from "react";
+var rowNavigationKeys = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "ArrowDown",
+  "ArrowUp"
+]);
+var cellNavigationKeys = new Set(rowNavigationKeys);
+cellNavigationKeys.add("ArrowLeft");
+cellNavigationKeys.add("ArrowRight");
+var isNavigationKey = (key, navigationStyle) => {
+  switch (navigationStyle) {
+    case "cell":
+      return cellNavigationKeys.has(key);
+    case "row":
+      return rowNavigationKeys.has(key);
+    default:
+      return false;
+  }
+};
+var PageKeys = ["Home", "End", "PageUp", "PageDown"];
+var isPagingKey = (key) => PageKeys.includes(key);
+var NULL_CELL_POS = [-1, -1];
+var NO_SCROLL_NECESSARY = [void 0, void 0];
+var howFarIsRowOutsideViewport = (rowEl, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
+  if (contentContainer) {
+    const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
+    const row = rowEl.getBoundingClientRect();
+    if (row) {
+      if (row.bottom > viewport.bottom) {
+        return ["down", row.bottom - viewport.bottom];
+      } else if (row.top < viewport.top) {
+        return ["up", row.top - viewport.top];
+      } else {
+        return NO_SCROLL_NECESSARY;
+      }
+    } else {
+      throw Error("Whats going on, row not found");
+    }
+  } else {
+    throw Error("Whats going on, scrollbar container not found");
+  }
+};
+var howFarIsCellOutsideViewport = (cellEl) => {
+  var _a;
+  const contentContainer = cellEl.closest(".vuuTable-contentContainer");
+  if (contentContainer) {
+    const rowEl = cellEl.closest(".vuuTableRow");
+    if (rowEl) {
+      const result = howFarIsRowOutsideViewport(rowEl, contentContainer);
+      if (result !== NO_SCROLL_NECESSARY) {
+        return result;
+      }
+      const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
+      const cell = (_a = cellEl.closest(".vuuTableCell")) == null ? void 0 : _a.getBoundingClientRect();
+      if (cell) {
+        if (cell.right > viewport.right) {
+          return ["right", cell.right + 6 - viewport.right];
+        } else if (cell.left < viewport.left) {
+          return ["left", cell.left - viewport.left];
+        }
+      } else {
+        throw Error("Whats going on, cell not found");
+      }
+    }
+  }
+  return NO_SCROLL_NECESSARY;
+};
+function nextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
+  if (key === "ArrowUp") {
+    if (rowIdx > -1) {
+      return [rowIdx - 1, colIdx];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  } else if (key === "ArrowDown") {
+    if (rowIdx === -1) {
+      return [0, colIdx];
+    } else if (rowIdx === rowCount - 1) {
+      return [rowIdx, colIdx];
+    } else {
+      return [rowIdx + 1, colIdx];
+    }
+  } else if (key === "ArrowRight") {
+    if (colIdx < columnCount) {
+      return [rowIdx, colIdx + 1];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  } else if (key === "ArrowLeft") {
+    if (colIdx > 1) {
+      return [rowIdx, colIdx - 1];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  }
+  return [rowIdx, colIdx];
+}
+var useKeyboardNavigation = ({
+  columnCount = 0,
+  containerRef,
+  disableFocus = false,
+  defaultHighlightedIndex,
+  disableHighlightOnFocus,
+  highlightedIndex: highlightedIndexProp,
+  navigationStyle,
+  requestScroll,
+  onHighlight,
+  rowCount = 0,
+  viewportRowCount
+}) => {
+  var _a;
+  const focusedCellPos = useRef8([-1, -1]);
+  const focusableCell = useRef8();
+  const activeCellPos = useRef8([-1, 0]);
+  const highlightedIndexRef = useRef8();
+  const [highlightedIndex, setHighlightedIdx] = useControlled({
+    controlled: highlightedIndexProp,
+    default: defaultHighlightedIndex,
+    name: "UseKeyboardNavigation"
+  });
+  highlightedIndexRef.current = highlightedIndex;
+  const setHighlightedIndex = useCallback12(
+    (idx, fromKeyboard = false) => {
+      onHighlight == null ? void 0 : onHighlight(idx);
+      setHighlightedIdx(idx);
+      if (fromKeyboard) {
+      }
+    },
+    [onHighlight, setHighlightedIdx]
+  );
+  const getFocusedCell = (element) => element == null ? void 0 : element.closest(
+    "[role='columnHeader'],[role='cell']"
+  );
+  const getTableCellPos = (tableCell) => {
+    var _a2, _b;
+    if (tableCell.role === "columnHeader") {
+      const colIdx = parseInt((_a2 = tableCell.dataset.idx) != null ? _a2 : "-1", 10);
+      return [-1, colIdx];
+    } else {
+      const focusedRow = tableCell.closest("[role='row']");
+      if (focusedRow) {
+        const rowIdx = parseInt((_b = focusedRow.ariaRowIndex) != null ? _b : "-1", 10);
+        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
+        return [rowIdx, colIdx];
+      }
+    }
+    return NULL_CELL_POS;
+  };
+  const focusCell = useCallback12(
+    (cellPos) => {
+      var _a2;
+      if (containerRef.current) {
+        const activeCell = getTableCell(containerRef, cellPos);
+        if (activeCell) {
+          if (activeCell !== focusableCell.current) {
+            (_a2 = focusableCell.current) == null ? void 0 : _a2.removeAttribute("tabindex");
+            focusableCell.current = activeCell;
+            activeCell.setAttribute("tabindex", "0");
+          }
+          const [direction, distance] = howFarIsCellOutsideViewport(activeCell);
+          if (direction && distance) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
+          }
+          console.log(`activeCell focus`);
+          activeCell.focus({ preventScroll: true });
+        }
+      }
+    },
+    // TODO we recreate this function whenever viewportRange changes, which will
+    // be often whilst scrolling - store range in a a ref ?
+    [containerRef, requestScroll]
+  );
+  const setActiveCell = useCallback12(
+    (rowIdx, colIdx, fromKeyboard = false) => {
+      const pos = [rowIdx, colIdx];
+      activeCellPos.current = pos;
+      if (navigationStyle === "row") {
+        setHighlightedIdx(rowIdx);
+      } else {
+        focusCell(pos);
+      }
+      if (fromKeyboard) {
+        focusedCellPos.current = pos;
+      }
+    },
+    [focusCell, navigationStyle, setHighlightedIdx]
+  );
+  const nextPageItemIdx = useCallback12(
+    (key, [rowIdx, colIdx]) => new Promise((resolve) => {
+      let newRowIdx = rowIdx;
+      switch (key) {
+        case "PageDown":
+          newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
+          break;
+        case "PageUp":
+          newRowIdx = Math.max(0, rowIdx - viewportRowCount);
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
+          break;
+        case "Home":
+          newRowIdx = 0;
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
+          break;
+        case "End":
+          newRowIdx = rowCount - 1;
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
+          break;
+      }
+      setTimeout(() => {
+        resolve([newRowIdx, colIdx]);
+      }, 90);
+    }),
+    [requestScroll, rowCount, viewportRowCount]
+  );
+  const handleFocus = useCallback12(() => {
+    var _a2;
+    if (disableHighlightOnFocus !== true) {
+      if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
+        const focusedCell = getFocusedCell(document.activeElement);
+        if (focusedCell) {
+          focusedCellPos.current = getTableCellPos(focusedCell);
+          if (navigationStyle === "row") {
+            setHighlightedIdx(focusedCellPos.current[0]);
+          }
+        }
+      }
+    }
+  }, [
+    disableHighlightOnFocus,
+    containerRef,
+    navigationStyle,
+    setHighlightedIdx
+  ]);
+  const navigateChildItems = useCallback12(
+    async (key) => {
+      const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
+      const [rowIdx, colIdx] = activeCellPos.current;
+      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
+        setActiveCell(nextRowIdx, nextColIdx, true);
+      }
+    },
+    [columnCount, nextPageItemIdx, rowCount, setActiveCell]
+  );
+  const scrollRowIntoViewIfNecessary = useCallback12(
+    (rowIndex) => {
+      const { current: container } = containerRef;
+      const activeRow = container == null ? void 0 : container.querySelector(
+        `[aria-rowindex="${rowIndex}"]`
+      );
+      if (activeRow) {
+        const [direction, distance] = howFarIsRowOutsideViewport(activeRow);
+        if (direction && distance) {
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
+        }
+      }
+    },
+    [containerRef, requestScroll]
+  );
+  const moveHighlightedRow = useCallback12(
+    async (key) => {
+      const { current: highlighted } = highlightedIndexRef;
+      const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [highlighted != null ? highlighted : -1, 0]) : nextCellPos(key, [highlighted != null ? highlighted : -1, 0], columnCount, rowCount);
+      if (nextRowIdx !== highlighted) {
+        setHighlightedIndex(nextRowIdx);
+        scrollRowIntoViewIfNecessary(nextRowIdx);
+      }
+    },
+    [
+      columnCount,
+      nextPageItemIdx,
+      rowCount,
+      scrollRowIntoViewIfNecessary,
+      setHighlightedIndex
+    ]
+  );
+  useEffect2(() => {
+    if (highlightedIndexProp !== void 0 && highlightedIndexProp !== -1) {
+      scrollRowIntoViewIfNecessary(highlightedIndexProp);
+    }
+  }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
+  const handleKeyDown = useCallback12(
+    (e) => {
+      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (navigationStyle === "row") {
+          moveHighlightedRow(e.key);
+        } else {
+          void navigateChildItems(e.key);
+        }
+      }
+    },
+    [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
+  );
+  const handleClick = useCallback12(
+    // Might not be a cell e.g the Settings button
+    (evt) => {
+      const target = evt.target;
+      const focusedCell = getFocusedCell(target);
+      if (focusedCell) {
+        const [rowIdx, colIdx] = getTableCellPos(focusedCell);
+        setActiveCell(rowIdx, colIdx);
+      }
+    },
+    [setActiveCell]
+  );
+  const handleMouseLeave = useCallback12(() => {
+    setHighlightedIndex(-1);
+  }, [setHighlightedIndex]);
+  const handleMouseMove = useCallback12(
+    (evt) => {
+      const idx = closestRowIndex(evt.target);
+      if (idx !== -1 && idx !== highlightedIndexRef.current) {
+        setHighlightedIndex(idx);
+      }
+    },
+    [setHighlightedIndex]
+  );
+  const navigate = useCallback12(() => {
+    navigateChildItems("ArrowDown");
+  }, [navigateChildItems]);
+  const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
+  useEffect2(() => {
+    if (fullyRendered && focusableCell.current === void 0 && !disableFocus) {
+      const { current: container } = containerRef;
+      const cell = (container == null ? void 0 : container.querySelector(headerCellQuery(0))) || (container == null ? void 0 : container.querySelector(dataCellQuery(0, 0)));
+      if (cell) {
+        cell.setAttribute("tabindex", "0");
+        focusableCell.current = cell;
+      }
+    }
+  }, [containerRef, disableFocus, fullyRendered]);
+  return {
+    highlightedIndexRef,
+    navigate,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    onMouseLeave: navigationStyle === "row" ? handleMouseLeave : void 0,
+    onMouseMove: navigationStyle === "row" ? handleMouseMove : void 0
+  };
+};
+
+// src/useSelection.ts
+import {
+  deselectItem,
+  dispatchMouseEvent,
+  isRowSelected,
+  metadataKeys as metadataKeys4,
+  selectItem
+} from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback13,
+  useRef as useRef9
+} from "react";
+var { IDX: IDX2 } = metadataKeys4;
+var NO_SELECTION = [];
+var defaultSelectionKeys = ["Enter", " "];
+var useSelection = ({
+  highlightedIndexRef,
+  selectionKeys = defaultSelectionKeys,
+  selectionModel,
+  onSelect,
+  onSelectionChange
+}) => {
+  selectionModel === "extended" || selectionModel === "checkbox";
+  const lastActiveRef = useRef9(-1);
+  const selectedRef = useRef9(NO_SELECTION);
+  const isSelectionEvent = useCallback13(
+    (evt) => selectionKeys.includes(evt.key),
+    [selectionKeys]
+  );
+  const handleRowClick = useCallback13(
+    (row, rangeSelect, keepExistingSelection) => {
+      const { [IDX2]: idx } = row;
+      const { current: active } = lastActiveRef;
+      const { current: selected } = selectedRef;
+      const selectOperation = isRowSelected(row) ? deselectItem : selectItem;
+      const newSelected = selectOperation(
+        selectionModel,
+        selected,
+        idx,
+        rangeSelect,
+        keepExistingSelection,
+        active
+      );
+      selectedRef.current = newSelected;
+      lastActiveRef.current = idx;
+      onSelect == null ? void 0 : onSelect(row);
+      onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
+    },
+    [onSelect, onSelectionChange, selectionModel]
+  );
+  const handleKeyDown = useCallback13(
+    (e) => {
+      if (isSelectionEvent(e)) {
+        const { current: rowIndex } = highlightedIndexRef;
+        if (rowIndex !== void 0 && rowIndex !== -1) {
+          const rowEl = e.target.querySelector(
+            `[aria-rowindex="${rowIndex}"]`
+          );
+          if (rowEl) {
+            dispatchMouseEvent(rowEl, "click");
+          }
+        }
+      }
+    },
+    [highlightedIndexRef, isSelectionEvent]
+  );
+  return {
+    onKeyDown: handleKeyDown,
+    onRowClick: handleRowClick
+  };
+};
+
+// src/useTableContextMenu.ts
+import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
+import { buildColumnMap } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback14 } from "react";
+var NO_ROWS = [];
+var useTableContextMenu = ({
+  columns,
+  data,
+  dataSource,
+  getSelectedRows
+}) => {
+  const [showContextMenu] = usePopupContextMenu();
+  const onContextMenu = useCallback14(
+    (evt) => {
+      var _a;
+      const target = evt.target;
+      const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
+      const rowEl = target == null ? void 0 : target.closest("div[role='row']");
+      if (cellEl && rowEl) {
+        const { selectedRowsCount } = dataSource;
+        const columnMap = buildColumnMap(columns);
+        const rowIndex = parseInt((_a = rowEl.ariaRowIndex) != null ? _a : "-1");
+        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
+        const row = data.find(([idx]) => idx === rowIndex);
+        const columnName = columns[cellIndex];
+        showContextMenu(evt, "grid", {
+          columnMap,
+          columnName,
+          row,
+          selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
+          viewport: dataSource.viewport
+        });
+      }
+    },
+    [columns, data, dataSource, getSelectedRows, showContextMenu]
+  );
+  return onContextMenu;
+};
+
+// src/useTableModel.ts
+import {
+  applyFilterToColumns,
+  applyGroupByToColumns,
+  applySortToColumns,
+  getCellRenderer,
+  getColumnLabel,
+  getTableHeadings,
+  getValueFormatter,
+  hasValidationRules,
+  isFilteredColumn,
+  isGroupColumn as isGroupColumn2,
+  isPinned,
+  logger,
+  metadataKeys as metadataKeys5,
+  replaceColumn,
+  sortPinnedColumns,
+  stripFilterFromColumns,
+  subscribedOnly
+} from "@vuu-ui/vuu-utils";
+import { buildValidationChecker } from "@vuu-ui/vuu-ui-controls";
+import { useReducer } from "react";
+var { info } = logger("useTableModel");
+var DEFAULT_COLUMN_WIDTH = 100;
+var KEY_OFFSET = metadataKeys5.count;
+var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
+var getDataType = (column, tableSchema) => {
+  const schemaColumn = tableSchema == null ? void 0 : tableSchema.columns.find(
+    ({ name }) => name === column.name
+  );
+  if (schemaColumn) {
+    return schemaColumn.serverDataType;
+  } else {
+    return column.serverDataType;
+  }
+};
+var numericTypes = ["int", "long", "double"];
+var getDefaultAlignment = (serverDataType) => serverDataType === void 0 ? void 0 : numericTypes.includes(serverDataType) ? "right" : "left";
+var isShowColumnSettings = (action) => action.type === "columnSettings";
+var isShowTableSettings = (action) => action.type === "tableSettings";
+var columnReducer = (state, action) => {
+  info == null ? void 0 : info(`TableModelReducer ${action.type}`);
+  switch (action.type) {
+    case "init":
+      return init(action);
+    case "moveColumn":
+      return moveColumn(state, action);
+    case "resizeColumn":
+      return resizeColumn(state, action);
+    case "setTableSchema":
+      return setTableSchema(state, action);
+    case "hideColumns":
+      return hideColumns(state, action);
+    case "showColumns":
+      return showColumns(state, action);
+    case "pinColumn":
+      return pinColumn2(state, action);
+    case "updateColumnProp":
+      return updateColumnProp(state, action);
+    case "tableConfig":
+      return updateTableConfig2(state, action);
+    default:
+      console.log(`unhandled action ${action.type}`);
+      return state;
+  }
+};
+var useTableModel = (tableConfigProp, dataSource) => {
+  const [state, dispatchColumnAction] = useReducer(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
+  const { columns, headings, tableConfig, ...tableAttributes } = state;
+  return {
+    columns,
+    dispatchColumnAction,
+    headings,
+    tableAttributes,
+    tableConfig
+  };
+};
+function init({ dataSource, tableConfig }) {
+  const { columns, ...tableAttributes } = tableConfig;
+  console.log(JSON.stringify(tableAttributes, null, 2));
+  const { config: dataSourceConfig, tableSchema } = dataSource;
+  const runtimeColumns = columns.filter(subscribedOnly(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
+    columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema)
+  );
+  const maybePinnedColumns = runtimeColumns.some(isPinned) ? sortPinnedColumns(runtimeColumns) : runtimeColumns;
+  let state = {
+    columns: maybePinnedColumns,
+    headings: getTableHeadings(maybePinnedColumns),
+    tableConfig,
+    ...tableAttributes
+  };
+  if (dataSourceConfig) {
+    const { columns: _, ...rest } = dataSourceConfig;
+    state = updateTableConfig2(state, {
+      type: "tableConfig",
+      ...rest
+    });
+  }
+  return state;
+}
+var getLabel = (label, columnFormatHeader) => {
+  if (columnFormatHeader === "uppercase") {
+    return label.toUpperCase();
+  } else if (columnFormatHeader === "capitalize") {
+    return label[0].toUpperCase() + label.slice(1).toLowerCase();
+  }
+  return label;
+};
+var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) => (column, index) => {
+  const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } = tableAttributes;
+  const serverDataType = getDataType(column, tableSchema);
+  const {
+    align = getDefaultAlignment(serverDataType),
+    key,
+    name,
+    label = getColumnLabel(column),
+    width = columnDefaultWidth,
+    ...rest
+  } = column;
+  const runtimeColumnWithDefaults = {
+    ...rest,
+    align,
+    CellRenderer: getCellRenderer(column),
+    HeaderCellLabelRenderer: getCellRenderer(column, "col-label"),
+    HeaderCellContentRenderer: getCellRenderer(column, "col-content"),
+    clientSideEditValidationCheck: hasValidationRules(column.type) ? buildValidationChecker(column.type.renderer.rules) : void 0,
+    label: getLabel(label, columnFormatHeader),
+    key: key != null ? key : index + KEY_OFFSET,
+    name,
+    originalIdx: index,
+    serverDataType,
+    valueFormatter: getValueFormatter(column, serverDataType),
+    width
+  };
+  if (isGroupColumn2(runtimeColumnWithDefaults)) {
+    runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(
+      (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(
+        col,
+        col.key
+      )
+    );
+  }
+  return runtimeColumnWithDefaults;
+};
+function moveColumn(state, { column, moveBy }) {
+  const { columns } = state;
+  if (typeof moveBy === "number") {
+    const idx = columns.indexOf(column);
+    const newColumns = columns.slice();
+    const [movedColumns] = newColumns.splice(idx, 1);
+    newColumns.splice(idx + moveBy, 0, movedColumns);
+    return {
+      ...state,
+      columns: newColumns
+    };
+  }
+  return state;
+}
+function hideColumns(state, { columns }) {
+  if (columns.some((col) => col.hidden !== true)) {
+    return columns.reduce((s, c) => {
+      if (c.hidden !== true) {
+        return updateColumnProp(s, {
+          type: "updateColumnProp",
+          column: c,
+          hidden: true
+        });
+      } else {
+        return s;
+      }
+    }, state);
+  } else {
+    return state;
+  }
+}
+function showColumns(state, { columns }) {
+  if (columns.some((col) => col.hidden)) {
+    return columns.reduce((s, c) => {
+      if (c.hidden) {
+        return updateColumnProp(s, {
+          type: "updateColumnProp",
+          column: c,
+          hidden: false
+        });
+      } else {
+        return s;
+      }
+    }, state);
+  } else {
+    return state;
+  }
+}
+function resizeColumn(state, { column, phase, width }) {
+  const type = "updateColumnProp";
+  const resizing = phase !== "end";
+  switch (phase) {
+    case "begin":
+      return updateColumnProp(state, { type, column, resizing });
+    case "end":
+      return updateColumnProp(state, { type, column, resizing, width });
+    case "resize":
+      return updateColumnProp(state, { type, column, width });
+    default:
+      throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);
+  }
+}
+function setTableSchema(state, { tableSchema }) {
+  const { columns } = state;
+  if (columns.some(columnWithoutDataType)) {
+    const cols = columns.map((column) => {
+      var _a;
+      const serverDataType = getDataType(column, tableSchema);
+      return {
+        ...column,
+        align: (_a = column.align) != null ? _a : getDefaultAlignment(serverDataType),
+        serverDataType
+      };
+    });
+    return {
+      ...state,
+      columns: cols
+    };
+  } else {
+    return state;
+  }
+}
+function pinColumn2(state, action) {
+  let { columns } = state;
+  const { column, pin } = action;
+  const targetColumn = columns.find((col) => col.name === column.name);
+  if (targetColumn) {
+    columns = replaceColumn(columns, { ...targetColumn, pin });
+    columns = sortPinnedColumns(columns);
+    return {
+      ...state,
+      columns
+    };
+  } else {
+    return state;
+  }
+}
+function updateColumnProp(state, action) {
+  let { columns, tableConfig } = state;
+  const { align, column, hidden, label, resizing, width } = action;
+  const targetColumn = columns.find((col) => col.name === column.name);
+  if (targetColumn) {
+    if (align === "left" || align === "right") {
+      columns = replaceColumn(columns, { ...targetColumn, align });
+    }
+    if (typeof label === "string") {
+      columns = replaceColumn(columns, { ...targetColumn, label });
+    }
+    if (typeof resizing === "boolean") {
+      columns = replaceColumn(columns, { ...targetColumn, resizing });
+    }
+    if (typeof hidden === "boolean") {
+      columns = replaceColumn(columns, { ...targetColumn, hidden });
+    }
+    if (typeof width === "number") {
+      columns = replaceColumn(columns, { ...targetColumn, width });
+      const targetConfigColumn = tableConfig.columns.find(
+        (col) => col.name === column.name
+      );
+      if (targetConfigColumn) {
+        tableConfig = {
+          ...tableConfig,
+          columns: replaceColumn(tableConfig.columns, {
+            ...targetConfigColumn,
+            width
+          })
+        };
+      }
+    }
+  }
+  return {
+    ...state,
+    columns,
+    tableConfig
+  };
+}
+function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
+  const hasGroupBy = groupBy !== void 0;
+  const hasFilter = typeof (filter == null ? void 0 : filter.filter) === "string";
+  const hasSort = sort && sort.sortDefs.length > 0;
+  let result = state;
+  if (hasGroupBy) {
+    result = {
+      ...state,
+      columns: applyGroupByToColumns(result.columns, groupBy, confirmed)
+    };
+  }
+  if (hasSort) {
+    result = {
+      ...state,
+      columns: applySortToColumns(result.columns, sort)
+    };
+  }
+  if (hasFilter) {
+    result = {
+      ...state,
+      columns: applyFilterToColumns(result.columns, filter)
+    };
+  } else if (result.columns.some(isFilteredColumn)) {
+    result = {
+      ...state,
+      columns: stripFilterFromColumns(result.columns)
+    };
+  }
+  return result;
+}
+
+// src/useTableScroll.ts
+import { useCallback as useCallback15, useRef as useRef10 } from "react";
+var getPctScroll = (container) => {
+  const { scrollLeft, scrollTop } = container;
+  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+  const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
+  const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
+  return [pctScrollLeft, pctScrollTop];
+};
+var useCallbackRef = ({
+  onAttach,
+  onDetach
+}) => {
+  const ref = useRef10(null);
+  const callbackRef = useCallback15(
+    (el) => {
+      if (el) {
+        ref.current = el;
+        onAttach == null ? void 0 : onAttach(el);
+      } else if (ref.current) {
+        const { current: originalRef } = ref;
+        ref.current = el;
+        onDetach == null ? void 0 : onDetach(originalRef);
+      }
+    },
+    [onAttach, onDetach]
+  );
+  return callbackRef;
+};
+var useTableScroll = ({
+  maxScrollLeft,
+  maxScrollTop,
+  onHorizontalScroll,
+  onVerticalScroll,
+  rowHeight,
+  viewportRowCount
+}) => {
+  const contentContainerScrolledRef = useRef10(false);
+  const scrollPosRef = useRef10({ scrollTop: 0, scrollLeft: 0 });
+  const scrollbarContainerRef = useRef10(null);
+  const contentContainerRef = useRef10(null);
+  const handleScrollbarContainerScroll = useCallback15(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: contentContainerScrolled } = contentContainerScrolledRef;
+    if (contentContainerScrolled) {
+      contentContainerScrolledRef.current = false;
+    } else if (contentContainer && scrollbarContainer) {
+      const [pctScrollLeft, pctScrollTop] = getPctScroll(scrollbarContainer);
+      const rootScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      const rootScrollTop = Math.round(pctScrollTop * maxScrollTop);
+      contentContainer.scrollTo({
+        left: rootScrollLeft,
+        top: rootScrollTop,
+        behavior: "auto"
+      });
+    }
+  }, [maxScrollLeft, maxScrollTop]);
+  const handleContentContainerScroll = useCallback15(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: scrollPos } = scrollPosRef;
+    if (contentContainer && scrollbarContainer) {
+      const { scrollLeft, scrollTop } = contentContainer;
+      const [pctScrollLeft, pctScrollTop] = getPctScroll(contentContainer);
+      contentContainerScrolledRef.current = true;
+      scrollbarContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      scrollbarContainer.scrollTop = Math.round(pctScrollTop * maxScrollTop);
+      if (scrollPos.scrollTop !== scrollTop) {
+        scrollPos.scrollTop = scrollTop;
+        onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
+      }
+      if (scrollPos.scrollLeft !== scrollLeft) {
+        scrollPos.scrollLeft = scrollLeft;
+        onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
+      }
+    }
+  }, [maxScrollLeft, maxScrollTop, onHorizontalScroll, onVerticalScroll]);
+  const handleAttachScrollbarContainer = useCallback15(
+    (el) => {
+      scrollbarContainerRef.current = el;
+      el.addEventListener("scroll", handleScrollbarContainerScroll, {
+        passive: true
+      });
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleDetachScrollbarContainer = useCallback15(
+    (el) => {
+      scrollbarContainerRef.current = null;
+      el.removeEventListener("scroll", handleScrollbarContainerScroll);
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleAttachContentContainer = useCallback15(
+    (el) => {
+      contentContainerRef.current = el;
+      el.addEventListener("scroll", handleContentContainerScroll, {
+        passive: true
+      });
+    },
+    [handleContentContainerScroll]
+  );
+  const handleDetachContentContainer = useCallback15(
+    (el) => {
+      contentContainerRef.current = null;
+      el.removeEventListener("scroll", handleContentContainerScroll);
+    },
+    [handleContentContainerScroll]
+  );
+  const contentContainerCallbackRef = useCallbackRef({
+    onAttach: handleAttachContentContainer,
+    onDetach: handleDetachContentContainer
+  });
+  const scrollbarContainerCallbackRef = useCallbackRef({
+    onAttach: handleAttachScrollbarContainer,
+    onDetach: handleDetachScrollbarContainer
+  });
+  const requestScroll = useCallback15(
+    (scrollRequest) => {
+      const { current: scrollbarContainer } = contentContainerRef;
+      if (scrollbarContainer) {
+        const { scrollLeft, scrollTop } = scrollbarContainer;
+        contentContainerScrolledRef.current = false;
+        if (scrollRequest.type === "scroll-distance") {
+          let newScrollLeft = scrollLeft;
+          let newScrollTop = scrollTop;
+          if (scrollRequest.direction === "up" || scrollRequest.direction === "down") {
+            newScrollTop = Math.min(
+              Math.max(0, scrollTop + scrollRequest.distance),
+              maxScrollTop
+            );
+          } else {
+            newScrollLeft = Math.min(
+              Math.max(0, scrollLeft + scrollRequest.distance),
+              maxScrollLeft
+            );
+          }
+          scrollbarContainer.scrollTo({
+            top: newScrollTop,
+            left: newScrollLeft,
+            behavior: "smooth"
+          });
+        } else if (scrollRequest.type === "scroll-page") {
+          const { direction } = scrollRequest;
+          const scrollBy = viewportRowCount * (direction === "down" ? rowHeight : -rowHeight);
+          const newScrollTop = Math.min(
+            Math.max(0, scrollTop + scrollBy),
+            maxScrollTop
+          );
+          scrollbarContainer.scrollTo({
+            top: newScrollTop,
+            left: scrollLeft,
+            behavior: "auto"
+          });
+        } else if (scrollRequest.type === "scroll-end") {
+          const { direction } = scrollRequest;
+          const scrollTo = direction === "end" ? maxScrollTop : 0;
+          scrollbarContainer.scrollTo({
+            top: scrollTo,
+            left: scrollbarContainer.scrollLeft,
+            behavior: "auto"
+          });
+        }
+      }
+    },
+    [maxScrollLeft, maxScrollTop, rowHeight, viewportRowCount]
+  );
+  return {
+    /** Ref to be assigned to ScrollbarContainer */
+    scrollbarContainerRef: scrollbarContainerCallbackRef,
+    /** Ref to be assigned to ContentContainer */
+    contentContainerRef: contentContainerCallbackRef,
+    /** Scroll the table  */
+    requestScroll
+  };
+};
+
+// src/useTableViewport.ts
+import { useCallback as useCallback16, useMemo as useMemo4, useRef as useRef11 } from "react";
+import {
+  actualRowPositioning,
+  virtualRowPositioning
+} from "@vuu-ui/vuu-utils";
+var MAX_RAW_ROWS = 15e5;
+var UNMEASURED_VIEWPORT = {
+  contentHeight: 0,
+  contentWidth: 0,
+  getRowAtPosition: () => -1,
+  getRowOffset: () => -1,
+  horizontalScrollbarHeight: 0,
+  maxScrollContainerScrollHorizontal: 0,
+  maxScrollContainerScrollVertical: 0,
+  pinnedWidthLeft: 0,
+  pinnedWidthRight: 0,
+  rowCount: 0,
+  setPctScrollTop: () => void 0,
+  totalHeaderHeight: 0,
+  verticalScrollbarWidth: 0,
+  viewportBodyHeight: 0
+};
+var measurePinnedColumns = (columns) => {
+  let pinnedWidthLeft = 0;
+  let pinnedWidthRight = 0;
+  let unpinnedWidth = 0;
+  for (const column of columns) {
+    const { hidden, pin, width } = column;
+    const visibleWidth = hidden ? 0 : width;
+    if (pin === "left") {
+      pinnedWidthLeft += visibleWidth;
+    } else if (pin === "right") {
+      pinnedWidthRight += visibleWidth;
+    } else {
+      unpinnedWidth += visibleWidth;
+    }
+  }
+  return {
+    pinnedWidthLeft: pinnedWidthLeft + 4,
+    pinnedWidthRight: pinnedWidthRight + 4,
+    unpinnedWidth
+  };
+};
+var useTableViewport = ({
+  columns,
+  headerHeight,
+  headings,
+  rowCount,
+  rowHeight,
+  size
+}) => {
+  const pctScrollTopRef = useRef11(0);
+  const appliedRowCount = Math.min(rowCount, MAX_RAW_ROWS);
+  const appliedContentHeight = appliedRowCount * rowHeight;
+  const virtualContentHeight = rowCount * rowHeight;
+  const virtualisedExtent = virtualContentHeight - appliedContentHeight;
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo4(
+    () => measurePinnedColumns(columns),
+    [columns]
+  );
+  const [actualRowOffset, actualRowAtPosition] = useMemo4(
+    () => actualRowPositioning(rowHeight),
+    [rowHeight]
+  );
+  const [getRowOffset, getRowAtPosition] = useMemo4(() => {
+    if (virtualisedExtent) {
+      return virtualRowPositioning(
+        rowHeight,
+        virtualisedExtent,
+        pctScrollTopRef
+      );
+    } else {
+      return [actualRowOffset, actualRowAtPosition];
+    }
+  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  const setPctScrollTop = useCallback16((scrollPct) => {
+    pctScrollTopRef.current = scrollPct;
+  }, []);
+  return useMemo4(() => {
+    var _a;
+    if (size) {
+      const headingsDepth = headings.length;
+      const scrollbarSize = 15;
+      const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
+      const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
+      const totalHeaderHeight = headerHeight * (1 + headingsDepth);
+      const maxScrollContainerScrollVertical = appliedContentHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - horizontalScrollbarHeight) + totalHeaderHeight;
+      const maxScrollContainerScrollHorizontal = contentWidth - size.width + pinnedWidthLeft;
+      const visibleRows = (size.height - headerHeight) / rowHeight;
+      const count = Number.isInteger(visibleRows) ? visibleRows + 1 : Math.ceil(visibleRows);
+      const viewportBodyHeight = size.height - totalHeaderHeight;
+      const verticalScrollbarWidth = appliedContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      return {
+        contentHeight: appliedContentHeight,
+        getRowAtPosition,
+        getRowOffset,
+        horizontalScrollbarHeight,
+        maxScrollContainerScrollHorizontal,
+        maxScrollContainerScrollVertical,
+        pinnedWidthLeft,
+        pinnedWidthRight,
+        rowCount: count,
+        contentWidth,
+        setPctScrollTop,
+        totalHeaderHeight,
+        verticalScrollbarWidth,
+        viewportBodyHeight
+      };
+    } else {
+      return UNMEASURED_VIEWPORT;
+    }
+  }, [
+    size,
+    headings.length,
+    pinnedWidthLeft,
+    unpinnedWidth,
+    pinnedWidthRight,
+    appliedContentHeight,
+    headerHeight,
+    rowHeight,
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop
+  ]);
+};
+
+// src/useVirtualViewport.ts
+import { useCallback as useCallback17, useEffect as useEffect3, useRef as useRef12 } from "react";
+var useVirtualViewport = ({
+  columns,
+  getRowAtPosition,
+  setRange,
+  viewportMeasurements
+}) => {
+  const firstRowRef = useRef12(0);
+  const { contentWidth, rowCount: viewportRowCount } = viewportMeasurements;
+  const handleVerticalScroll = useCallback17(
+    (scrollTop) => {
+      const firstRow = getRowAtPosition(scrollTop);
+      if (firstRow !== firstRowRef.current) {
+        firstRowRef.current = firstRow;
+        setRange({ from: firstRow, to: firstRow + viewportRowCount });
+      }
+    },
+    [getRowAtPosition, setRange, viewportRowCount]
+  );
+  useEffect3(() => {
+    const { current: from } = firstRowRef;
+    const rowRange = { from, to: from + viewportRowCount };
+    setRange(rowRange);
+  }, [setRange, viewportRowCount]);
+  return {
+    onVerticalScroll: handleVerticalScroll
+  };
+};
+
+// src/useTable.ts
+var stripInternalProperties = (tableConfig) => {
+  return tableConfig;
+};
+var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys6;
+var NULL_DRAG_DROP = {
+  draggable: void 0,
+  onMouseDown: void 0
+};
+var useNullDragDrop = () => NULL_DRAG_DROP;
+var addColumn = (tableConfig, column) => ({
+  ...tableConfig,
+  columns: tableConfig.columns.concat(column)
+});
+var useTable = ({
+  allowDragDrop = false,
+  availableColumns,
+  config,
+  containerRef,
+  dataSource,
+  disableFocus,
+  headerHeight = 25,
+  highlightedIndex: highlightedIndexProp,
+  id,
+  navigationStyle = "cell",
+  onAvailableColumnsChange,
+  onConfigChange,
+  onDragStart,
+  onDrop,
+  onFeatureInvocation,
+  onHighlight,
+  onRowClick: onRowClickProp,
+  onSelect,
+  onSelectionChange,
+  renderBufferSize = 0,
+  rowHeight = 20,
+  selectionModel,
+  size
+}) => {
+  const [rowCount, setRowCount] = useState5(dataSource.size);
+  if (dataSource === void 0) {
+    throw Error("no data source provided to Vuu Table");
+  }
+  const useRowDragDrop = allowDragDrop ? useDragDrop : useNullDragDrop;
+  const menuBuilder = useMemo5(
+    () => buildContextMenuDescriptors(dataSource),
+    [dataSource]
+  );
+  const onDataRowcountChange = useCallback18((size2) => {
+    setRowCount(size2);
+  }, []);
+  const {
+    columns: runtimeColumns,
+    dispatchColumnAction,
+    headings,
+    tableAttributes,
+    tableConfig
+  } = useTableModel(config, dataSource);
+  useLayoutEffectSkipFirst2(() => {
+    dispatchColumnAction({
+      type: "init",
+      dataSource,
+      tableConfig
+    });
+  }, [tableConfig, dataSource, dispatchColumnAction]);
+  const applyTableConfigChange = useCallback18(
+    (config2) => {
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: config2,
+        dataSource
+      });
+      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(config2));
+    },
+    [dataSource, dispatchColumnAction, onConfigChange]
+  );
+  const [stateColumns, setStateColumns] = useState5();
+  const [columns, setColumnSize] = useMemo5(() => {
+    const setSize = (columnName, width) => {
+      const cols = updateColumn(runtimeColumns, columnName, { width });
+      setStateColumns(cols);
+    };
+    return [stateColumns != null ? stateColumns : runtimeColumns, setSize];
+  }, [runtimeColumns, stateColumns]);
+  const columnMap = useMemo5(
+    () => buildColumnMap2(dataSource.columns),
+    [dataSource.columns]
+  );
+  const {
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop,
+    ...viewportMeasurements
+  } = useTableViewport({
+    columns,
+    headerHeight,
+    headings,
+    rowCount,
+    rowHeight,
+    size
+  });
+  const initialRange = useInitialValue({
+    from: 0,
+    to: viewportMeasurements.rowCount
+  });
+  const onSubscribed = useCallback18(
+    ({ tableSchema }) => {
+      if (tableSchema) {
+        dispatchColumnAction({
+          type: "setTableSchema",
+          tableSchema
+        });
+      } else {
+        console.log("subscription message with no schema");
+      }
+    },
+    [dispatchColumnAction]
+  );
+  const { data, dataRef, getSelectedRows, range, setRange } = useDataSource({
+    dataSource,
+    onFeatureInvocation,
+    renderBufferSize,
+    onSizeChange: onDataRowcountChange,
+    onSubscribed,
+    range: initialRange
+  });
+  const handleConfigEditedInSettingsPanel = useCallback18(
+    (tableConfig2) => {
+      console.log(`settings changed`);
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: tableConfig2,
+        dataSource
+      });
+      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(tableConfig2));
+    },
+    [dataSource, dispatchColumnAction, onConfigChange]
+  );
+  const handleDataSourceConfigChanged = useCallback18(
+    (dataSourceConfig) => {
+      dataSource.config = {
+        ...dataSource.config,
+        ...dataSourceConfig
+      };
+    },
+    [dataSource]
+  );
+  useEffect4(() => {
+    dataSource.on("config", (config2, confirmed) => {
+      dispatchColumnAction({
+        type: "tableConfig",
+        ...config2,
+        confirmed
+      });
+    });
+  }, [dataSource, dispatchColumnAction]);
+  const handleCreateCalculatedColumn = useCallback18(
+    (column) => {
+      dataSource.columns = dataSource.columns.concat(column.name);
+      applyTableConfigChange(addColumn(tableConfig, column));
+    },
+    [dataSource, tableConfig, applyTableConfigChange]
+  );
+  const hideColumns2 = useCallback18(
+    (action) => {
+      const { columns: columns2 } = action;
+      const hiddenColumns = columns2.map((c) => c.name);
+      const newTableConfig = {
+        ...tableConfig,
+        columns: tableConfig.columns.map(
+          (col) => hiddenColumns.includes(col.name) ? { ...col, hidden: true } : col
+        )
+      };
+      applyTableConfigChange(newTableConfig);
+    },
+    [tableConfig, applyTableConfigChange]
+  );
+  const pinColumn3 = useCallback18(
+    (action) => {
+      applyTableConfigChange({
+        ...tableConfig,
+        columns: updateColumn(tableConfig.columns, {
+          ...action.column,
+          pin: action.pin
+        })
+      });
+    },
+    [tableConfig, applyTableConfigChange]
+  );
+  const { showColumnSettingsPanel, showTableSettingsPanel } = useTableAndColumnSettings({
+    availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType = "string" }) => ({
+      name,
+      serverDataType
+    })),
+    onAvailableColumnsChange,
+    onConfigChange: handleConfigEditedInSettingsPanel,
+    onCreateCalculatedColumn: handleCreateCalculatedColumn,
+    onDataSourceConfigChange: handleDataSourceConfigChanged,
+    tableConfig
+  });
+  const onPersistentColumnOperation = useCallback18(
+    (action) => {
+      if (isShowColumnSettings(action)) {
+        showColumnSettingsPanel(action);
+      } else if (isShowTableSettings(action)) {
+        showTableSettingsPanel();
+      } else {
+        switch (action.type) {
+          case "hideColumns":
+            return hideColumns2(action);
+          case "pinColumn":
+            return pinColumn3(action);
+          default:
+            dispatchColumnAction(action);
+        }
+      }
+    },
+    [
+      dispatchColumnAction,
+      hideColumns2,
+      pinColumn3,
+      showColumnSettingsPanel,
+      showTableSettingsPanel
+    ]
+  );
+  const handleContextMenuAction = useHandleTableContextMenu({
+    dataSource,
+    onPersistentColumnOperation
+  });
+  const handleSort = useCallback18(
+    (column, extendSort = false, sortType) => {
+      if (dataSource) {
+        dataSource.sort = applySort(
+          dataSource.sort,
+          column,
+          extendSort,
+          sortType
+        );
+      }
+    },
+    [dataSource]
+  );
+  const onResizeColumn = useCallback18(
+    (phase, columnName, width) => {
+      const column = columns.find((column2) => column2.name === columnName);
+      if (column) {
+        if (phase === "resize") {
+          if (isValidNumber(width)) {
+            setColumnSize(columnName, width);
+          }
+        } else if (phase === "end") {
+          if (isValidNumber(width)) {
+            dispatchColumnAction({
+              type: "resizeColumn",
+              phase,
+              column,
+              width
+            });
+            setStateColumns(void 0);
+            onConfigChange == null ? void 0 : onConfigChange(
+              stripInternalProperties(
+                updateTableConfig(tableConfig, {
+                  type: "col-size",
+                  column,
+                  width
+                })
+              )
+            );
+          }
+        } else {
+          setStateColumns(void 0);
+          dispatchColumnAction({
+            type: "resizeColumn",
+            phase,
+            column,
+            width
+          });
+        }
+      } else {
+        throw Error(
+          `useDataTable.handleColumnResize, column ${columnName} not found`
+        );
+      }
+    },
+    [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
+  );
+  const onToggleGroup = useCallback18(
+    (row, column) => {
+      const isJson = isJsonGroup2(column, row);
+      const key = row[KEY];
+      if (row[IS_EXPANDED2]) {
+        dataSource.closeTreeNode(key, true);
+        if (isJson) {
+          const idx = columns.indexOf(column);
+          const rows = dataSource.getRowsAtDepth(idx + 1);
+          if (!rows.some((row2) => row2[IS_EXPANDED2] || row2[IS_LEAF2])) {
+            dispatchColumnAction({
+              type: "hideColumns",
+              columns: columns.slice(idx + 2)
+            });
+          }
+        }
+      } else {
+        dataSource.openTreeNode(key);
+        if (isJson) {
+          const childRows = dataSource.getChildRows(key);
+          const idx = columns.indexOf(column) + 1;
+          const columnsToShow = [columns[idx]];
+          if (childRows.some((row2) => row2[IS_LEAF2])) {
+            columnsToShow.push(columns[idx + 1]);
+          }
+          if (columnsToShow.some((col) => col.hidden)) {
+            dispatchColumnAction({
+              type: "showColumns",
+              columns: columnsToShow
+            });
+          }
+        }
+      }
+    },
+    [columns, dataSource, dispatchColumnAction]
+  );
+  const { onVerticalScroll } = useVirtualViewport({
+    columns,
+    getRowAtPosition,
+    setRange,
+    viewportMeasurements
+  });
+  const handleVerticalScroll = useCallback18(
+    (scrollTop) => {
+      onVerticalScroll(scrollTop);
+    },
+    [onVerticalScroll]
+  );
+  const { requestScroll, ...scrollProps } = useTableScroll({
+    maxScrollLeft: viewportMeasurements.maxScrollContainerScrollHorizontal,
+    maxScrollTop: viewportMeasurements.maxScrollContainerScrollVertical,
+    rowHeight,
+    onVerticalScroll: handleVerticalScroll,
+    viewportRowCount: viewportMeasurements.rowCount
+  });
+  const {
+    highlightedIndexRef,
+    navigate,
+    onFocus: navigationFocus,
+    onKeyDown: navigationKeyDown,
+    ...containerProps
+  } = useKeyboardNavigation({
+    columnCount: columns.filter((c) => c.hidden !== true).length,
+    containerRef,
+    disableFocus,
+    highlightedIndex: highlightedIndexProp,
+    navigationStyle,
+    requestScroll,
+    rowCount: dataSource == null ? void 0 : dataSource.size,
+    onHighlight,
+    viewportRange: range,
+    viewportRowCount: viewportMeasurements.rowCount
+  });
+  const {
+    onBlur: editingBlur,
+    onDoubleClick: editingDoubleClick,
+    onKeyDown: editingKeyDown,
+    onFocus: editingFocus
+  } = useCellEditing({
+    navigate
+  });
+  const handleFocus = useCallback18(
+    (e) => {
+      navigationFocus();
+      if (!e.defaultPrevented) {
+        editingFocus(e);
+      }
+    },
+    [editingFocus, navigationFocus]
+  );
+  const onContextMenu = useTableContextMenu({
+    columns,
+    data,
+    dataSource,
+    getSelectedRows
+  });
+  const onMoveGroupColumn = useCallback18(
+    (columns2) => {
+      dataSource.groupBy = columns2.map((col) => col.name);
+    },
+    [dataSource]
+  );
+  const onRemoveGroupColumn = useCallback18(
+    (column) => {
+      if (isGroupColumn3(column)) {
+        dataSource.groupBy = [];
+      } else {
+        if (dataSource && dataSource.groupBy.includes(column.name)) {
+          dataSource.groupBy = dataSource.groupBy.filter(
+            (columnName) => columnName !== column.name
+          );
+        }
+      }
+    },
+    [dataSource]
+  );
+  const handleSelectionChange = useCallback18(
+    (selected) => {
+      dataSource.select(selected);
+      onSelectionChange == null ? void 0 : onSelectionChange(selected);
+    },
+    [dataSource, onSelectionChange]
+  );
+  const {
+    onKeyDown: selectionHookKeyDown,
+    onRowClick: selectionHookOnRowClick
+  } = useSelection({
+    highlightedIndexRef,
+    onSelect,
+    onSelectionChange: handleSelectionChange,
+    selectionModel
+  });
+  const handleKeyDown = useCallback18(
+    (e) => {
+      navigationKeyDown(e);
+      if (!e.defaultPrevented) {
+        editingKeyDown(e);
+      }
+      if (!e.defaultPrevented) {
+        selectionHookKeyDown(e);
+      }
+    },
+    [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
+  );
+  const handleRowClick = useCallback18(
+    (row, rangeSelect, keepExistingSelection) => {
+      selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
+      onRowClickProp == null ? void 0 : onRowClickProp(row);
+    },
+    [onRowClickProp, selectionHookOnRowClick]
+  );
+  useLayoutEffectSkipFirst2(() => {
+    dispatchColumnAction({
+      type: "init",
+      tableConfig: config,
+      dataSource
+    });
+  }, [config, dataSource, dispatchColumnAction]);
+  const onMoveColumn = useCallback18(
+    (columns2) => {
+      const newTableConfig = {
+        ...tableConfig,
+        columns: columns2
+      };
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: newTableConfig,
+        dataSource
+      });
+      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(newTableConfig));
+    },
+    [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
+  );
+  const handleDropRow = useCallback18(
+    (dragDropState) => {
+      onDrop == null ? void 0 : onDrop(dragDropState);
+    },
+    [onDrop]
+  );
+  const handleDataEdited = useCallback18(
+    async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
+    [dataSource]
+  );
+  const handleDragStartRow = useCallback18(
+    (dragDropState) => {
+      const { initialDragElement } = dragDropState;
+      const rowIndex = initialDragElement.ariaRowIndex;
+      if (rowIndex) {
+        const index = parseInt(rowIndex);
+        const row = dataRef.current.find((row2) => row2[0] === index);
+        if (row) {
+          dragDropState.setPayload(row);
+        } else {
+        }
+      }
+      onDragStart == null ? void 0 : onDragStart(dragDropState);
+    },
+    [dataRef, onDragStart]
+  );
+  const { onMouseDown: rowDragMouseDown, draggable: draggableRow } = useRowDragDrop({
+    allowDragDrop,
+    containerRef,
+    draggableClassName: `vuuTable`,
+    id,
+    onDragStart: handleDragStartRow,
+    onDrop: handleDropRow,
+    orientation: "vertical",
+    itemQuery: ".vuuTableRow"
+  });
+  return {
+    ...containerProps,
+    draggableRow,
+    onBlur: editingBlur,
+    onDoubleClick: editingDoubleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    onMouseDown: rowDragMouseDown,
+    columnMap,
+    columns,
+    data,
+    handleContextMenuAction,
+    headings,
+    highlightedIndex: highlightedIndexRef.current,
+    menuBuilder,
+    onContextMenu,
+    onDataEdited: handleDataEdited,
+    onMoveColumn,
+    onMoveGroupColumn,
+    onRemoveGroupColumn,
+    onRowClick: handleRowClick,
+    onSortColumn: handleSort,
+    onResizeColumn,
+    onToggleGroup,
+    scrollProps,
+    // TODO don't think we need these ...
+    tableAttributes,
+    tableConfig,
+    viewportMeasurements
+  };
+};
+
+// src/table-header/TableHeader.tsx
+import { isGroupColumn as isGroupColumn4, isNotHidden as isNotHidden2 } from "@vuu-ui/vuu-utils";
+import cx8 from "classnames";
+
+// src/table-header/useTableHeader.ts
+import { useDragDropNext as useDragDrop2 } from "@vuu-ui/vuu-ui-controls";
+import { moveColumnTo, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback19, useRef as useRef13 } from "react";
+var useTableHeader = ({
+  columns,
+  onMoveColumn,
+  onSortColumn,
+  tableConfig
+}) => {
+  const containerRef = useRef13(null);
+  const handleDropColumnHeader = useCallback19(
+    (moveFrom, moveTo) => {
+      const column = columns[moveFrom];
+      const orderedColumns = moveColumnTo(columns, column, moveTo);
+      const ofColumn = ({ name }) => (col) => col.name === name;
+      const targetIndex = orderedColumns.findIndex(ofColumn(column));
+      const nextColumn = orderedColumns[targetIndex + 1];
+      const insertPos = nextColumn ? tableConfig.columns.findIndex(ofColumn(nextColumn)) : -1;
+      onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));
+    },
+    [columns, onMoveColumn, tableConfig.columns]
+  );
+  const handleColumnHeaderClick = useCallback19(
+    (evt) => {
+      var _a;
+      const targetElement = evt.target;
+      const headerCell = targetElement.closest(
+        ".vuuTableHeaderCell"
+      );
+      const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
+      const column = visibleColumnAtIndex(columns, colIdx);
+      const isAdditive = evt.shiftKey;
+      column && onSortColumn(column, isAdditive);
+    },
+    [columns, onSortColumn]
+  );
+  const {
+    onMouseDown: columnHeaderDragMouseDown,
+    draggable: draggableColumn,
+    ...dragDropHook
+  } = useDragDrop2({
+    allowDragDrop: true,
+    containerRef,
+    draggableClassName: `vuuTable`,
+    onDrop: handleDropColumnHeader,
+    orientation: "horizontal",
+    itemQuery: ".vuuTableHeaderCell"
+  });
+  return {
+    containerRef,
+    draggableColumn,
+    draggedColumnIndex: dragDropHook.draggedItemIndex,
+    onClick: handleColumnHeaderClick,
+    onMouseDown: columnHeaderDragMouseDown
+  };
+};
+
+// src/table-header/TableHeader.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var TableHeader = ({
+  classBase: classBase11 = "vuuTable",
+  columns,
+  headings,
+  onMoveColumn,
+  onMoveGroupColumn,
+  onRemoveGroupColumn,
+  onResizeColumn,
+  onSortColumn,
+  tableConfig,
+  tableId
+}) => {
+  const {
+    containerRef,
+    draggableColumn,
+    draggedColumnIndex,
+    onClick,
+    onMouseDown
+  } = useTableHeader({
+    columns,
+    onMoveColumn,
+    onSortColumn,
+    tableConfig
+  });
+  return /* @__PURE__ */ jsxs7("div", { className: `${classBase11}-col-headings`, ref: containerRef, children: [
+    headings.map((colHeaders, i) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
+    /* @__PURE__ */ jsxs7("div", { className: `${classBase11}-col-headers`, role: "row", children: [
+      columns.filter(isNotHidden2).map(
+        (col, i) => isGroupColumn4(col) ? /* @__PURE__ */ jsx11(
+          GroupHeaderCellNext,
+          {
+            column: col,
+            "data-index": i,
+            onMoveColumn: onMoveGroupColumn,
+            onRemoveColumn: onRemoveGroupColumn,
+            onResize: onResizeColumn
+          },
+          col.name
+        ) : /* @__PURE__ */ jsx11(
+          HeaderCell,
+          {
+            className: cx8({
+              "vuuDraggable-dragAway": i === draggedColumnIndex
+            }),
+            column: col,
+            "data-index": i,
+            id: `${tableId}-col-${i}`,
+            onClick,
+            onMouseDown,
+            onResize: onResizeColumn
+          },
+          col.name
+        )
+      ),
+      draggableColumn
+    ] })
+  ] });
+};
+
+// src/Table.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var classBase7 = "vuuTable";
+var { IDX: IDX3, RENDER_IDX } = metadataKeys7;
+var TableCore = ({
+  Row: Row2 = Row,
+  allowDragDrop,
+  availableColumns,
+  config,
+  containerRef,
+  dataSource,
+  disableFocus = false,
+  highlightedIndex: highlightedIndexProp,
+  id: idProp,
+  navigationStyle = "cell",
+  onAvailableColumnsChange,
+  onConfigChange,
+  onDragStart,
+  onDrop,
+  onFeatureInvocation,
+  onHighlight,
+  onRowClick: onRowClickProp,
+  onSelect,
+  onSelectionChange,
+  renderBufferSize = 0,
+  rowHeight = 20,
+  selectionModel = "extended",
+  showColumnHeaders = true,
+  headerHeight = showColumnHeaders ? 25 : 0,
+  size
+}) => {
+  const id = useId(idProp);
+  const {
+    columnMap,
+    columns,
+    data,
+    draggableRow,
+    handleContextMenuAction,
+    headings,
+    highlightedIndex,
+    onDataEdited,
+    onMoveColumn,
+    onMoveGroupColumn,
+    onRemoveGroupColumn,
+    onResizeColumn,
+    onRowClick,
+    onSortColumn,
+    onToggleGroup,
+    menuBuilder,
+    scrollProps,
+    tableAttributes,
+    tableConfig,
+    viewportMeasurements,
+    ...tableProps
+  } = useTable({
+    allowDragDrop,
+    availableColumns,
+    config,
+    containerRef,
+    dataSource,
+    disableFocus,
+    headerHeight,
+    highlightedIndex: highlightedIndexProp,
+    id,
+    navigationStyle,
+    onAvailableColumnsChange,
+    onConfigChange,
+    onDragStart,
+    onDrop,
+    onFeatureInvocation,
+    onHighlight,
+    onRowClick: onRowClickProp,
+    onSelect,
+    onSelectionChange,
+    renderBufferSize,
+    rowHeight,
+    selectionModel,
+    size
+  });
+  const className = cx9(`${classBase7}-contentContainer`, {
+    [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
+    [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
+    // [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
+    [`${classBase7}-zebra`]: tableAttributes.zebraStripes
+    // [`${classBase}-loading`]: isDataLoading(tableProps.columns),
+  });
+  const cssVariables = {
+    "--content-height": `${viewportMeasurements.contentHeight}px`,
+    "--content-width": `${viewportMeasurements.contentWidth}px`,
+    "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
+    "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
+    "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
+    "--header-height": `${headerHeight}px`,
+    "--row-height": `${rowHeight}px`,
+    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
+    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
+  };
+  return /* @__PURE__ */ jsxs8(
+    ContextMenuProvider,
+    {
+      menuActionHandler: handleContextMenuAction,
+      menuBuilder,
+      children: [
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            className: `${classBase7}-scrollbarContainer`,
+            ref: scrollProps.scrollbarContainerRef,
+            style: cssVariables,
+            children: /* @__PURE__ */ jsx12("div", { className: `${classBase7}-scrollbarContent` })
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "div",
+          {
+            className,
+            ref: scrollProps.contentContainerRef,
+            style: cssVariables,
+            children: /* @__PURE__ */ jsxs8(
+              "div",
+              {
+                ...tableProps,
+                className: `${classBase7}-table`,
+                tabIndex: disableFocus ? void 0 : -1,
+                children: [
+                  showColumnHeaders ? /* @__PURE__ */ jsx12(
+                    TableHeader,
+                    {
+                      columns,
+                      headings,
+                      onMoveColumn,
+                      onMoveGroupColumn,
+                      onRemoveGroupColumn,
+                      onResizeColumn,
+                      onSortColumn,
+                      tableConfig,
+                      tableId: id
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx12("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ jsx12(
+                    Row2,
+                    {
+                      columnMap,
+                      columns,
+                      highlighted: highlightedIndex === data2[IDX3],
+                      onClick: onRowClick,
+                      onDataEdited,
+                      row: data2,
+                      offset: rowHeight * data2[IDX3] + viewportMeasurements.totalHeaderHeight,
+                      onToggleGroup,
+                      zebraStripes: tableAttributes.zebraStripes
+                    },
+                    data2[RENDER_IDX]
+                  )) })
+                ]
+              }
+            )
+          }
+        ),
+        draggableRow
+      ]
+    }
+  );
+};
+var Table = forwardRef(function TableNext({
+  Row: Row2,
+  allowDragDrop,
+  availableColumns,
+  className: classNameProp,
+  config,
+  dataSource,
+  disableFocus,
+  highlightedIndex,
+  id,
+  navigationStyle,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onDragStart,
+  onDrop,
+  onFeatureInvocation,
+  onHighlight,
+  onRowClick,
+  onSelect,
+  onSelectionChange,
+  renderBufferSize,
+  rowHeight,
+  selectionModel,
+  showColumnHeaders,
+  headerHeight,
+  style: styleProp,
+  ...htmlAttributes
+}, forwardedRef) {
+  const containerRef = useRef14(null);
+  const [size, setSize] = useState6();
+  return /* @__PURE__ */ jsx12(
+    MeasuredContainer,
+    {
+      ...htmlAttributes,
+      className: cx9(classBase7, classNameProp),
+      id,
+      onResize: setSize,
+      ref: useForkRef(containerRef, forwardedRef),
+      children: size ? /* @__PURE__ */ jsx12(
+        TableCore,
+        {
+          Row: Row2,
+          allowDragDrop,
+          availableColumns,
+          config,
+          containerRef,
+          dataSource,
+          disableFocus,
+          headerHeight,
+          highlightedIndex,
+          id,
+          navigationStyle,
+          onAvailableColumnsChange,
+          onConfigChange,
+          onDragStart,
+          onDrop,
+          onFeatureInvocation,
+          onHighlight,
+          onRowClick,
+          onSelect,
+          onSelectionChange,
+          renderBufferSize,
+          rowHeight,
+          selectionModel,
+          showColumnHeaders,
+          size
+        }
+      ) : null
+    }
+  );
+});
+
+// src/cell-renderers/checkbox-cell/CheckboxCell.tsx
+import { memo as memo2, useCallback as useCallback20 } from "react";
+import { CheckboxIcon, WarnCommit } from "@vuu-ui/vuu-ui-controls";
+import { Checkbox } from "@salt-ds/core";
+
+// src/cell-renderers/cell-utils.ts
+var dataAndColumnUnchanged = (p, p1) => p.column === p1.column && p.row[p.columnMap[p.column.name]] === p1.row[p1.columnMap[p1.column.name]];
+
+// src/cell-renderers/checkbox-cell/CheckboxCell.tsx
+import { dispatchCustomEvent, registerComponent } from "@vuu-ui/vuu-utils";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var CheckboxCell = memo2(
+  ({ column, columnMap, onCommit = WarnCommit, row }) => {
+    const dataIdx = columnMap[column.name];
+    const isChecked = row[dataIdx];
+    const handleCommit = useCallback20(
+      (value) => async (evt) => {
+        const res = await onCommit(value);
+        if (res === true) {
+          dispatchCustomEvent(evt.target, "vuu-commit");
+        }
+        return res;
+      },
+      [onCommit]
+    );
+    return !!column.editable ? /* @__PURE__ */ jsx13(Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ jsx13(CheckboxIcon, { checked: isChecked, disabled: true });
+  },
+  dataAndColumnUnchanged
+);
+CheckboxCell.displayName = "CheckboxCell";
+registerComponent("checkbox-cell", CheckboxCell, "cell-renderer", {
+  serverDataType: "boolean"
+});
+
+// src/cell-renderers/dropdown-cell/DropdownCell.tsx
+import { useLookupValues } from "@vuu-ui/vuu-data-react";
+import {
+  Dropdown,
+  WarnCommit as WarnCommit2
+} from "@vuu-ui/vuu-ui-controls";
+import { dispatchCustomEvent as dispatchCustomEvent2, registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
+import { memo as memo3, useCallback as useCallback21, useState as useState7 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var classBase8 = "vuuTableDropdownCell";
+var openKeys = ["Enter", " "];
+var DropdownCell = memo3(
+  function DropdownCell2({
+    column,
+    columnMap,
+    onCommit = WarnCommit2,
+    row
+  }) {
+    const dataIdx = columnMap[column.name];
+    const { initialValue, values } = useLookupValues(column, row[dataIdx]);
+    const [value, setValue] = useState7(null);
+    const handleSelectionChange = useCallback21(
+      (evt, selectedOption) => {
+        if (selectedOption) {
+          setValue(selectedOption);
+          onCommit(selectedOption.value).then((response) => {
+            if (response === true && evt) {
+              dispatchCustomEvent2(evt.target, "vuu-commit");
+            }
+          });
+        }
+      },
+      [onCommit]
+    );
+    return /* @__PURE__ */ jsx14(
+      Dropdown,
+      {
+        className: classBase8,
+        onSelectionChange: handleSelectionChange,
+        openKeys,
+        selected: value != null ? value : initialValue,
+        source: values,
+        width: column.width - 17
+      }
+    );
+  },
+  dataAndColumnUnchanged
+);
+registerComponent2("dropdown-cell", DropdownCell, "cell-renderer", {});
+
+// src/cell-renderers/input-cell/InputCell.tsx
+import { registerComponent as registerComponent3 } from "@vuu-ui/vuu-utils";
+import { Input } from "@salt-ds/core";
+import { useEditableText } from "@vuu-ui/vuu-ui-controls";
+import cx10 from "classnames";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var classBase9 = "vuuTableInputCell";
+var WarnCommit3 = () => {
+  console.warn(
+    "onCommit handler has not been provided to InputCell cell renderer"
+  );
+  return Promise.resolve(true);
+};
+var InputCell = ({
+  column,
+  columnMap,
+  onCommit = WarnCommit3,
+  row
+}) => {
+  const dataIdx = columnMap[column.name];
+  const {
+    align = "left",
+    clientSideEditValidationCheck,
+    valueFormatter
+  } = column;
+  const { warningMessage, ...editProps } = useEditableText({
+    initialValue: valueFormatter(row[dataIdx]),
+    onCommit,
+    clientSideEditValidationCheck
+  });
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx15("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx15("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
+  return /* @__PURE__ */ jsx15(
+    Input,
+    {
+      ...editProps,
+      className: cx10(classBase9, {
+        [`${classBase9}-error`]: warningMessage !== void 0
+      }),
+      endAdornment,
+      startAdornment
+    }
+  );
+};
+registerComponent3("input-cell", InputCell, "cell-renderer", {});
+
+// src/cell-renderers/lookup-cell/LookupCell.tsx
+import { useLookupValues as useLookupValues2 } from "@vuu-ui/vuu-data-react";
+import { registerComponent as registerComponent4 } from "@vuu-ui/vuu-utils";
+import { memo as memo4 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var LookupCell = memo4(
+  function LookupCell2({
+    column,
+    columnMap,
+    row
+  }) {
+    const dataIdx = columnMap[column.name];
+    const { initialValue: value } = useLookupValues2(column, row[dataIdx]);
+    return /* @__PURE__ */ jsx16("span", { children: value == null ? void 0 : value.label });
+  },
+  dataAndColumnUnchanged
+);
+registerComponent4("lookup-cell", LookupCell, "cell-renderer", {});
+
+// src/cell-renderers/toggle-cell/ToggleCell.tsx
+import { WarnCommit as WarnCommit4 } from "@vuu-ui/vuu-ui-controls";
+import {
+  dispatchCustomEvent as dispatchCustomEvent3,
+  isTypeDescriptor,
+  isValueListRenderer,
+  registerComponent as registerComponent5
+} from "@vuu-ui/vuu-utils";
+import cx11 from "classnames";
+import { memo as memo5, useCallback as useCallback22 } from "react";
+import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var classBase10 = "vuuTableToggleCell";
+var getValueList = ({ name, type }) => {
+  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {
+    return type.renderer.values;
+  } else {
+    throw Error(
+      `useLookupValues column ${name} has not been configured with a values list`
+    );
+  }
+};
+var ToggleCell = memo5(
+  function ToggleCell2({
+    column,
+    columnMap,
+    onCommit = WarnCommit4,
+    row
+  }) {
+    const values = getValueList(column);
+    const dataIdx = columnMap[column.name];
+    const value = row[dataIdx];
+    const handleCommit = useCallback22(
+      (evt, value2) => {
+        return onCommit(value2).then((response) => {
+          if (response === true) {
+            dispatchCustomEvent3(evt.target, "vuu-commit");
+          }
+          return response;
+        });
+      },
+      [onCommit]
+    );
+    return /* @__PURE__ */ jsx17(
+      CycleStateButton,
+      {
+        className: cx11(classBase10, `${classBase10}-${column.name}`),
+        onCommit: handleCommit,
+        value,
+        values,
+        variant: "cta",
+        children: value
+      }
+    );
+  },
+  dataAndColumnUnchanged
+);
+registerComponent5("toggle-cell", ToggleCell, "cell-renderer", {});
+
+// src/useControlledTableNavigation.ts
+import { useStateRef } from "@vuu-ui/vuu-ui-controls";
+import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback23, useRef as useRef15 } from "react";
+var useControlledTableNavigation = (initialValue, rowCount) => {
+  const tableRef = useRef15(null);
+  const [highlightedIndexRef, setHighlightedIndex] = useStateRef(initialValue);
+  const handleKeyDown = useCallback23(
+    (e) => {
+      var _a;
+      if (e.key === "ArrowDown") {
+        setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));
+      } else if (e.key === "ArrowUp") {
+        setHighlightedIndex((index = -1) => Math.max(0, index - 1));
+      } else if (e.key === "Enter" || e.key === " ") {
+        const { current: rowIdx } = highlightedIndexRef;
+        const rowEl = (_a = tableRef.current) == null ? void 0 : _a.querySelector(
+          `[aria-rowindex="${rowIdx}"]`
+        );
+        if (rowEl) {
+          dispatchMouseEvent2(rowEl, "click");
+        }
+      }
+    },
+    [highlightedIndexRef, rowCount, setHighlightedIndex]
+  );
+  const handleHighlight = useCallback23(
+    (idx) => {
+      setHighlightedIndex(idx);
+    },
+    [setHighlightedIndex]
+  );
+  return {
+    highlightedIndexRef,
+    onHighlight: handleHighlight,
+    onKeyDown: handleKeyDown,
+    tableRef
+  };
+};
+export {
+  CheckboxCell,
+  DropdownCell,
+  GroupHeaderCellNext,
+  HeaderCell,
+  InputCell,
+  LookupCell,
+  Table,
+  ToggleCell,
+  isShowColumnSettings,
+  isShowTableSettings,
+  updateTableConfig,
+  useControlledTableNavigation,
+  useTableModel,
+  useTableViewport
+};
 //# sourceMappingURL=index.js.map