@vuu-ui/vuu-table 0.8.25 → 0.8.26-debug

package/cjs/index.js

@@ -1,2 +1,3761 @@
-"use strict";var mr=Object.create;var Je=Object.defineProperty;var dr=Object.getOwnPropertyDescriptor;var pr=Object.getOwnPropertyNames;var br=Object.getPrototypeOf,fr=Object.prototype.hasOwnProperty;var gr=(e,o)=>{for(var t in o)Je(e,t,{get:o[t],enumerable:!0})},nt=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of pr(o))!fr.call(e,n)&&n!==t&&Je(e,n,{get:()=>o[n],enumerable:!(r=dr(o,n))||r.enumerable});return e};var me=(e,o,t)=>(t=e!=null?mr(br(e)):{},nt(o||!e||!e.__esModule?Je(t,"default",{value:e,enumerable:!0}):t,e)),Cr=e=>nt(Je({},"__esModule",{value:!0}),e);var Tl={};gr(Tl,{CheckboxCell:()=>Uo,GroupHeaderCell:()=>qe,GroupHeaderCellNext:()=>qe,HeaderCell:()=>ho,InputCell:()=>Ln,Table:()=>vl,TableCell:()=>To,TableGroupCell:()=>yo,ToggleCell:()=>Fn,isShowColumnSettings:()=>Go,isShowTableSettings:()=>Ko,noScrolling:()=>mn,updateTableConfig:()=>Lo,useControlledTableNavigation:()=>xl,useTableModel:()=>Oo,useTableScroll:()=>$o,useTableViewport:()=>Bo});module.exports=Cr(Tl);var bt=require("@vuu-ui/vuu-ui-controls"),ft=require("@vuu-ui/vuu-utils"),gt=me(require("clsx")),Fe=require("react");var lt=me(require("clsx")),it=require("react");var Ze=require("react/jsx-runtime"),rt="vuuColumnHeaderPill",Ae=({children:e,className:o,column:t,onRemove:r,removable:n,...l})=>{if(n&&typeof r!="function")throw Error("ColumnHeaderPill onRemove prop must be provided if Pill is removable");let a=(0,it.useCallback)(i=>{i.preventDefault(),i.stopPropagation(),r==null||r(t)},[t,r]);return(0,Ze.jsxs)("div",{...l,className:(0,lt.default)(rt,o),children:[e,n?(0,Ze.jsx)("span",{className:`${rt}-removeButton`,role:"button","data-icon":"cross",onClick:a}):null]})};var Ie=require("react/jsx-runtime"),at=({column:e,...o})=>{let{name:t,sorted:r}=e,n=typeof r=="number"?r<0?"arrow-down":"arrow-up":r==="A"?"arrow-up":r==="D"?"arrow-down":void 0;return(0,Ie.jsxs)(Ae,{...o,column:e,children:[(0,Ie.jsx)("span",{className:"vuuGroupColumnPill-label",children:t}),n!==void 0?(0,Ie.jsx)("span",{"data-icon":n}):null,typeof r=="number"?(0,Ie.jsx)("span",{className:"vuuSortPosition",children:Math.abs(r)}):null]})};var _e=require("react/jsx-runtime"),st=({column:e})=>{if(!e.sorted)return null;let o=typeof e.sorted=="number"?e.sorted<0?"arrow-down":"arrow-up":e.sorted==="A"?"arrow-up":"arrow-down";return(0,_e.jsxs)(Ae,{column:e,children:[(0,_e.jsx)("span",{"data-icon":o}),typeof e.sorted=="number"?(0,_e.jsx)("span",{className:"vuuSortPosition",children:Math.abs(e.sorted)}):null]})};var ze=require("react");var ct=require("react/jsx-runtime"),ut=()=>{},vr="vuuColumnResizerNext",Ye=({onDrag:e,onDragEnd:o=ut,onDragStart:t=ut})=>{let r=(0,ze.useRef)({start:0,now:0}),n=(0,ze.useCallback)(i=>{i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault();let{current:s}=r,u=Math.round(i.clientX),d=u-s.now,m=s.now-s.start;r.current.now=u,d!==0&&e(i,d,m)},[e]),l=(0,ze.useCallback)(i=>{window.removeEventListener("mouseup",l),window.removeEventListener("mousemove",n);let{current:s}=r,u=s.now-s.start;o(i,u)},[o,n]),a=(0,ze.useCallback)(i=>{let{current:s}=r;t(i),s.now=s.start=Math.round(i.clientX),window.addEventListener("mouseup",l),window.addEventListener("mousemove",n),i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault()},[t,n,l]);return(0,ct.jsx)("div",{className:vr,onMouseDown:a})};var we=require("react"),je=({column:e,onResize:o,rootRef:t})=>{let r=(0,we.useRef)({start:0,now:0}),[n,l]=(0,we.useState)(!1),{name:a}=e,i=(0,we.useCallback)(()=>{if(o&&t.current){let{current:d}=r,{width:m}=t.current.getBoundingClientRect();d.start=d.now=Math.round(m),l(!0),o==null||o("begin",a)}},[a,o,t]),s=(0,we.useCallback)((d,m,b)=>{if(t.current&&o){let{current:C}=r,h=C.start+b;h!==C.now&&h>0&&(o("resize",a,h),C.now=h)}},[a,o,t]),u=(0,we.useCallback)(()=>{if(o){let{current:d}=r;o("end",a,d.now),setTimeout(()=>{l(!1)},80)}},[a,o]);return{isResizing:n,onDrag:s,onDragStart:i,onDragEnd:u}};var mt=require("@vuu-ui/vuu-utils"),dt=me(require("clsx")),pt=require("react"),xe=(e,o,t)=>(0,pt.useMemo)(()=>{let r=(0,dt.default)(o,{vuuPinFloating:e.pin==="floating",vuuPinLeft:e.pin==="left",vuuPinRight:e.pin==="right",vuuEndPin:t&&e.endPin,[`${o}-editable`]:e.editable,[`${o}-right`]:e.align==="right"}),n=(0,mt.getColumnStyle)(e);return{className:r,style:n}},[e,o,t]);var Ne=require("react/jsx-runtime"),Ct=require("react"),vo="vuuTableGroupHeaderCell",hr=(e,o)=>e===o?e:o,qe=({column:e,className:o,onMoveColumn:t,onRemoveColumn:r,onResize:n,...l})=>{let a=(0,Fe.useRef)(null),{isResizing:i,...s}=je({column:e,onResize:n,rootRef:a}),[u,d]=(0,Fe.useState)(e.columns),{className:m,style:b}=xe(e,vo,!0),C=u.length>1?{removable:!0,onRemove:r}:void 0,h=(0,Fe.useCallback)((x,c)=>{d(v=>{let T=v.slice(),[S]=T.splice(x,1);if(c===-1){let D=T.concat(S);return t==null||t(D),D}else return T.splice(c,0,S),t==null||t(T),T})},[t]);return(0,ft.useLayoutEffectSkipFirst)(()=>{d(x=>hr(x,e.columns))},[e.columns]),(0,Ne.jsxs)("div",{...l,className:(0,gt.default)(m,o,{[`${vo}-pending`]:e.groupConfirmed===!1}),ref:a,role:"columnheader",style:b,children:[(0,Ne.jsx)(bt.OverflowContainer,{allowDragDrop:!0,className:`${vo}-inner`,onMoveItem:h,overflowPosition:"start",children:u.map(x=>(0,Ct.createElement)(at,{...C,column:x,key:x.name}))}),(0,Ne.jsx)(Ae,{column:e,removable:!0,onRemove:r}),e.resizeable!==!1?(0,Ne.jsx)(Ye,{...s}):null]})};var Tt=me(require("clsx")),oo=require("react");var vt=require("@vuu-ui/vuu-popups"),ht=me(require("clsx"));var xt=require("react/jsx-runtime"),wr="vuuColumnMenu",wt=({className:e,column:o})=>(0,xt.jsx)(vt.PopupMenu,{className:(0,ht.default)(wr,e),"data-embedded":!0,menuLocation:"column-menu",menuOptions:{column:o}});var ge=require("react/jsx-runtime"),eo="vuuTableHeaderCell",ho=({className:e,column:o,onClick:t,onResize:r,...n})=>{var T;let{HeaderCellContentRenderer:l,HeaderCellLabelRenderer:a}=o,i=(0,oo.useRef)(null),{isResizing:s,...u}=je({column:o,onResize:r,rootRef:i}),d=(0,oo.useCallback)(S=>{!s&&(t==null||t(S))},[s,t]),{className:m,style:b}=xe(o,eo,!0),C=(0,ge.jsx)(wt,{column:o}),h=a?(0,ge.jsx)(a,{className:`${eo}-label`,column:o}):(0,ge.jsx)("div",{className:`${eo}-label`,children:(T=o.label)!=null?T:o.name}),x=l?[(0,ge.jsx)(l,{column:o},"content")]:[],c=(0,ge.jsx)(st,{column:o}),v=o.align==="right"?[c,h].concat(x).concat(C):[C,h,c].concat(x);return(0,ge.jsxs)("div",{...n,className:(0,Tt.default)(m,e,{[`${eo}-resizing`]:s}),onClick:d,ref:i,role:"columnheader",style:b,children:[...v,o.resizeable!==!1?(0,ge.jsx)(Ye,{...u}):null]})};var yn=require("@vuu-ui/vuu-popups"),Dn=require("@vuu-ui/vuu-ui-controls"),so=require("@vuu-ui/vuu-utils"),Hn=require("@salt-ds/core"),Vo=me(require("clsx")),Ve=require("react");var le=require("@vuu-ui/vuu-utils"),Do=me(require("clsx")),Pe=require("react");var Rt=require("@vuu-ui/vuu-utils"),wo=require("react");var xo=require("react/jsx-runtime"),xr="vuuTableCell",To=({column:e,columnMap:o,onClick:t,onDataEdited:r,row:n})=>{let{className:l,style:a}=xe(e,xr),{CellRenderer:i,index:s,name:u,valueFormatter:d}=e,m=o[u],b=(0,wo.useCallback)(h=>{if(r){let x=h;return(0,Rt.isNumericColumn)(e)&&typeof h=="string"&&(x=e.serverDataType==="double"?parseFloat(h):parseInt(h)),r==null?void 0:r(n,u,x)}else throw Error("TableCell onDataEdited prop not supplied for an editable cell")},[e,u,r,n]),C=(0,wo.useCallback)(h=>{t==null||t(h,e)},[e,t]);return(0,xo.jsx)("div",{"aria-colindex":s,className:l,onClick:t?C:void 0,role:"cell",style:a,children:i?(0,xo.jsx)(i,{column:e,columnMap:o,onCommit:b,row:n}):d(n[m])})};var to=require("@vuu-ui/vuu-utils"),yt=require("react");var Dt=me(require("clsx"));var Ge=require("react/jsx-runtime"),{IS_LEAF:Tr}=to.metadataKeys,Ro="vuuTableGroupCell",yo=({column:e,columnMap:o,onClick:t,row:r})=>{let{columns:n}=e,[l,a]=(0,to.getGroupValueAndOffset)(n,r,o),{className:i,style:s}=xe(e,Ro),u=(0,yt.useCallback)(b=>{t==null||t(b,e)},[e,t]),d=r[Tr],m=Array(a).fill(0).map((b,C)=>(0,Ge.jsx)("span",{className:`${Ro}-spacer`},C));return(0,Ge.jsxs)("div",{className:(0,Dt.default)(i,"vuuTableCell"),role:"cell",style:s,onClick:d?void 0:u,children:[m,d?null:(0,Ge.jsx)("span",{className:`${Ro}-toggle`,"data-icon":"triangle-right"}),(0,Ge.jsx)("span",{children:l})]})};var Te=require("react/jsx-runtime"),{IDX:Rr,IS_EXPANDED:yr,SELECTED:Dr}=le.metadataKeys,de="vuuTableRow",Ht=(0,Pe.forwardRef)(function({height:o},t){return(0,Te.jsx)("div",{"aria-hidden":!0,className:(0,Do.default)(de,`${de}-proxy`),ref:t,style:{height:o}})}),Ho=(0,Pe.memo)(({className:e,classNameGenerator:o,columnMap:t,columns:r,highlighted:n,row:l,offset:a,onClick:i,onDataEdited:s,onToggleGroup:u,virtualColSpan:d=0,zebraStripes:m=!1,...b})=>{let{[Rr]:C,[yr]:h,[Dr]:x}=l,c=(0,Pe.useCallback)(P=>{let z=P.shiftKey,G=P.ctrlKey||P.metaKey;i==null||i(P,l,z,G)},[i,l]),{True:v,First:T,Last:S}=le.RowSelected,D=(0,Do.default)(de,e,o==null?void 0:o(l,t),{[`${de}-even`]:m&&C%2===0,[`${de}-expanded`]:h,[`${de}-highlighted`]:n,[`${de}-selected`]:x&v,[`${de}-selectedStart`]:x&T,[`${de}-selectedEnd`]:x&S}),A={transform:`translate3d(0px, ${a}px, 0px)`},F=(0,Pe.useCallback)((P,z)=>{((0,le.isGroupColumn)(z)||(0,le.isJsonGroup)(z,l,t))&&(P.stopPropagation(),u==null||u(l,z))},[t,u,l]);return(0,Te.jsxs)("div",{...b,role:"row",className:D,onClick:c,style:A,children:[(0,Te.jsx)("span",{className:`${de}-selectionDecorator vuuStickyLeft`}),d>0?(0,Te.jsx)("div",{className:"vuuTableCell",style:{width:d}}):null,r.filter(le.isNotHidden).map(P=>{let z=(0,le.isGroupColumn)(P),G=(0,le.isJsonColumn)(P);return(0,Te.jsx)(z?yo:To,{column:P,columnMap:t,onClick:z||G?F:void 0,onDataEdited:s,row:l},P.name)}),(0,Te.jsx)("span",{className:`${de}-selectionDecorator vuuStickyRight`})]})});Ho.displayName="Row";var no=require("@vuu-ui/vuu-utils"),Et=me(require("clsx")),St=require("react");var Mt=require("@vuu-ui/vuu-ui-controls"),Ke=require("@vuu-ui/vuu-utils"),Ee=require("react"),Pt=({columns:e,onMoveColumn:o,onSortColumn:t,tableConfig:r})=>{let n=(0,Ee.useRef)(null),l=(0,Ee.useRef)(null),a=(0,Ee.useCallback)(b=>{n.current=b,b?l.current=b.closest(".vuuTable-contentContainer"):l.current=null},[]),i=(0,Ee.useCallback)(({fromIndex:b,toIndex:C})=>{let h=e[b],x=(0,Ke.moveColumnTo)(e,h,C),c=({name:D})=>A=>A.name===D,v=x.findIndex(c(h)),T=x[v+1],S=T?r.columns.findIndex(c(T)):-1;C>b&&S!==-1?o((0,Ke.moveColumnTo)(r.columns,h,S-1)):o((0,Ke.moveColumnTo)(r.columns,h,S))},[e,o,r.columns]),s=(0,Ee.useCallback)(b=>{var T;let h=b.target.closest(".vuuTableHeaderCell"),x=parseInt((T=h==null?void 0:h.dataset.index)!=null?T:"-1"),c=(0,Ke.visibleColumnAtIndex)(e,x),v=b.shiftKey;c&&t(c,v)},[e,t]),{onMouseDown:u,draggable:d,...m}=(0,Mt.useDragDrop)({allowDragDrop:!0,containerRef:n,draggableClassName:"vuuTable",itemQuery:".vuuTableHeaderCell",onDrop:i,orientation:"horizontal",scrollingContainerRef:l});return{draggableColumn:d,draggedColumnIndex:m.draggedItemIndex,onClick:s,onMouseDown:u,setContainerRef:a}};var Ce=require("react/jsx-runtime"),Mo=(0,St.memo)(({classBase:e="vuuTable",columns:o,headings:t,onMoveColumn:r,onMoveGroupColumn:n,onRemoveGroupColumn:l,onResizeColumn:a,onSortColumn:i,tableConfig:s,tableId:u,virtualColSpan:d=0})=>{let{draggableColumn:m,draggedColumnIndex:b,onClick:C,onMouseDown:h,setContainerRef:x}=Pt({columns:o,onMoveColumn:r,onSortColumn:i,tableConfig:s});return(0,Ce.jsxs)("div",{className:`${e}-col-headings`,ref:x,children:[t.map((c,v)=>(0,Ce.jsx)("div",{className:"vuuTable-heading",children:c.map(({label:T,width:S},D)=>(0,Ce.jsx)("div",{className:"vuuTable-headingCell",style:{width:S},children:T},D))},v)),(0,Ce.jsxs)("div",{className:`${e}-col-headers`,role:"row",children:[d>0?(0,Ce.jsx)("div",{role:"cell",className:"vuuTableCell",style:{width:d}}):null,o.filter(no.isNotHidden).map((c,v)=>(0,no.isGroupColumn)(c)?(0,Ce.jsx)(qe,{"aria-colindex":c.index,column:c,"data-index":v,onMoveColumn:n,onRemoveColumn:l,onResize:a},c.name):(0,Ce.jsx)(ho,{"aria-colindex":c.index,className:(0,Et.default)({"vuuDraggable-dragAway":v===b}),column:c,"data-index":v,id:`${u}-col-${v}`,onClick:C,onMouseDown:h,onResize:a},c.name)),m]})]})});Mo.displayName="TableHeader";var wn=require("@vuu-ui/vuu-ui-controls"),B=require("@vuu-ui/vuu-utils"),M=require("react");var kt=require("@vuu-ui/vuu-utils"),Lt=e=>(o,t)=>{let r=[];return e===void 0||(o==="header"||o==="column-menu")&&(r.push(...Hr(t,e)),r.push(...Er(t,e)),r.push(...Mr(t,e)),r.push(...Pr(t)),r.push({action:"column-settings",icon:"cog",label:"Column Settings",options:t}),r.push({action:"table-settings",icon:"cog",label:"DataGrid Settings",options:t})),r};function Hr(e,{sort:{sortDefs:o}}){let{column:t}=e,r=[];if(t===void 0)return r;let n=o.length>0;return t.sorted==="A"?r.push({label:"Reverse Sort (DSC)",action:"sort-dsc",options:e}):t.sorted==="D"?r.push({label:"Reverse Sort (ASC)",action:"sort-asc",options:e}):typeof t.sorted=="number"?(t.sorted>0?r.push({label:"Reverse Sort (DSC)",action:"sort-add-dsc",options:e}):r.push({label:"Reverse Sort (ASC)",action:"sort-add-asc",options:e}),n&&Math.abs(t.sorted)<o.length&&r.push({label:"Remove from sort",action:"sort-remove",options:e}),r.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):n?(r.push({label:"Add to sort",children:[{label:"Ascending",action:"sort-add-asc",options:e},{label:"Descending",action:"sort-add-dsc",options:e}]}),r.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):r.push({label:"Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]}),r}function Mr(e,o){let{column:t}=e;if(t===void 0||o.groupBy.length===0)return[];let{name:r,label:n=r}=t;return[{label:`Aggregate ${n}`,children:[{label:"Count",action:"agg-count",options:e},{label:"Distinct",action:"agg-distinct",options:e}].concat((0,kt.isNumericColumn)(t)?[{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 ko=(e,o)=>({label:`Pin ${o}`,action:`column-pin-${o}`,options:e}),Po=e=>ko(e,"left"),Eo=e=>ko(e,"floating"),So=e=>ko(e,"right");function Pr(e){let{column:o}=e;if(o===void 0)return[];let{pin:t}=o,r=[{label:"Hide column",action:"column-hide",options:e},{label:"Remove column",action:"column-remove",options:e}];return t===void 0?r.push({label:"Pin column",children:[Po(e),Eo(e),So(e)]}):t==="left"?r.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[Eo(e),So(e)]}):t==="right"?r.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[Po(e),Eo(e)]}):t==="floating"&&r.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[Po(e),So(e)]}),r}function Er(e,{groupBy:o}){let{column:t}=e,r=[];if(t===void 0)return r;let{name:n,label:l=n}=t;return o.length===0?r.push({label:`Group by ${l}`,action:"group",options:e}):r.push({label:`Add ${l} to group by`,action:"group-add",options:e}),r}var At=require("@vuu-ui/vuu-utils"),_=require("@vuu-ui/vuu-utils"),Sr=(e,o)=>{if(e.filterStruct&&o){let[t,r]=(0,At.removeColumnFromFilter)(o,e.filterStruct);return{filter:r,filterStruct:t}}else return e},{Average:kr,Count:Lr,Distinct:Ar,High:Ir,Low:zr,Sum:Nr}=_.AggregationType,It=({dataSource:e,onPersistentColumnOperation:o})=>r=>{let n=r.options;if(n.column&&e){let{column:l}=n;switch(r.menuId){case"sort-asc":return e.sort=(0,_.setSortColumn)(e.sort,l,"A"),!0;case"sort-dsc":return e.sort=(0,_.setSortColumn)(e.sort,l,"D"),!0;case"sort-add-asc":return e.sort=(0,_.addSortColumn)(e.sort,l,"A"),!0;case"sort-add-dsc":return e.sort=(0,_.addSortColumn)(e.sort,l,"D"),!0;case"group":return e.groupBy=(0,_.addGroupColumn)(e.groupBy,l),!0;case"group-add":return e.groupBy=(0,_.addGroupColumn)(e.groupBy,l),!0;case"column-hide":return o({type:"hideColumns",columns:[l]}),!0;case"column-remove":return e.columns=e.columns.filter(a=>a!==l.name),!0;case"filter-remove-column":return e.filter=Sr(e.filter,l),!0;case"remove-filters":return e.filter={filter:""},!0;case"agg-avg":return e.aggregations=(0,_.setAggregations)(e.aggregations,l,kr),!0;case"agg-high":return e.aggregations=(0,_.setAggregations)(e.aggregations,l,Ir),!0;case"agg-low":return e.aggregations=(0,_.setAggregations)(e.aggregations,l,zr),!0;case"agg-count":return e.aggregations=(0,_.setAggregations)(e.aggregations,l,Lr),!0;case"agg-distinct":return e.aggregations=(0,_.setAggregations)(e.aggregations,l,Ar),!0;case"agg-sum":return e.aggregations=(0,_.setAggregations)(e.aggregations,l,Nr),!0;case"column-pin-floating":return o({type:"pinColumn",column:l,pin:"floating"}),!0;case"column-pin-left":return o({type:"pinColumn",column:l,pin:"left"}),!0;case"column-pin-right":return o({type:"pinColumn",column:l,pin:"right"}),!0;case"column-unpin":return o({type:"pinColumn",column:l,pin:void 0}),!0;case"column-settings":return o({type:"columnSettings",column:l}),!0;case"table-settings":return o({type:"tableSettings"}),!0;default:}}return!1};var Lo=(e,o)=>{switch(o.type){case"col-size":return{...e,columns:e.columns.map(t=>t.name===o.column.name?{...t,width:o.width}:t)};case"column-prop":return{...e,columns:e.columns.map(t=>t.name===o.column.name?{...t,[o.property]:o.value}:t)};default:return e}};var Kt=require("@vuu-ui/vuu-utils"),Re=require("react");var Ao=e=>`.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${e})`,Io=(e,o)=>`.vuuTable-body > [aria-rowindex='${e+1}'] > [role='cell']:nth-child(${o+1})`,zt=(e,[o,t])=>{var l;let r=o===-1?Ao(t):Io(o,t),n=(l=e.current)==null?void 0:l.querySelector(r);return Fr(n)&&n.querySelector("button")||n},Fr=e=>e==null?void 0:e.classList.contains("vuuTableCell-editable"),Nt=e=>e.querySelector(".vuuTableInputCell")!==null;function Gr(e){if(e){let o=e.ariaRowIndex;if(o!==null)return parseInt(o,10)-1}return-1}var Kr=e=>e.closest('[role="row"]'),Ft=e=>Gr(Kr(e)),Or=[void 0,void 0],Gt=(e,o,t=e.closest(".vuuTable-contentContainer"))=>{if(t){let r=t==null?void 0:t.getBoundingClientRect(),n=r.top+o,l=e.getBoundingClientRect();if(l)return l.bottom>r.bottom?["down",l.bottom-r.bottom]:l.top<n?["up",l.top-n]:Or;throw Error("Whats going on, row not found")}else throw Error("Whats going on, scrollbar container not found")};var Ot=({navigate:e})=>{let o=(0,Re.useCallback)(()=>{e()},[e]),t=(0,Re.useCallback)(s=>{let u=s.target,d=u.matches("input")?u:u.querySelector("input");d&&(d.focus(),d.select())},[]),r=(0,Re.useCallback)(s=>{let d=s.target.querySelector("input");d&&(d.focus(),d.select())},[]),n=(0,Re.useCallback)(s=>{let u=s.target;Nt(u)&&((0,Kt.isCharacterKey)(s.key)?t(s):s.key==="Enter"&&r(s))},[t,r]),l=(0,Re.useCallback)(s=>{let u=s.target;(u.matches("input")||u.querySelector("input"))&&(t(s),s.stopPropagation())},[t]),a=(0,Re.useCallback)(s=>{s.target.removeEventListener("vuu-commit",o,!0)},[o]),i=(0,Re.useCallback)(s=>{s.target.addEventListener("vuu-commit",o,!0)},[o]);return{onBlur:a,onDoubleClick:l,onFocus:i,onKeyDown:n}};var ye=require("@vuu-ui/vuu-utils"),Q=require("react");var Oe=require("@vuu-ui/vuu-utils"),{SELECTED:zo}=Oe.metadataKeys,ro=class{constructor({from:o,to:t}){this.rowCount=0;this.setRowCount=o=>{o<this.data.length&&(this.data.length=o),this.rowCount=o};this.range=new Oe.WindowRange(o,t),this.data=new Array(Math.max(0,t-o)),this.rowCount=0}add(o){let[t]=o;if(this.isWithinRange(t)){let r=t-this.range.from;if(this.data[r]=o,o[zo]){let n=this.data[r-1];(0,Oe.isRowSelectedLast)(n)&&(this.data[r-1]=n.slice(),this.data[r-1][zo]-=4)}}}getAtIndex(o){return this.range.isWithin(o)&&this.data[o-this.range.from]!=null?this.data[o-this.range.from]:void 0}isWithinRange(o){return this.range.isWithin(o)}setRange({from:o,to:t}){if(o!==this.range.from||t!==this.range.to){let[r,n]=this.range.overlap(o,t),l=new Array(Math.max(0,t-o));for(let a=r;a<n;a++){let i=this.getAtIndex(a);if(i){let s=a-o;l[s]=i}}this.data=l,this.range.from=o,this.range.to=t}}getSelectedRows(){return this.data.filter(o=>o[zo]!==0)}};var $r=e=>e.type==="vuu-link-created"||e.type==="vuu-link-removed",$t=({dataSource:e,onFeatureInvocation:o,onSizeChange:t,onSubscribed:r,range:n=ye.NULL_RANGE,renderBufferSize:l=0})=>{let[,a]=(0,Q.useState)(null),i=(0,Q.useRef)([]),s=(0,Q.useRef)(!0),u=(0,Q.useRef)(!1),d=(0,Q.useRef)(n),m=(0,Q.useMemo)(()=>new ro((0,ye.getFullRange)(n,l)),[]),b=(0,Q.useCallback)(c=>{for(let v of c)m.add(v);i.current=m.data,s.current&&a({})},[m]),C=(0,Q.useCallback)(c=>{c.type==="subscribed"?r==null||r(c):c.type==="viewport-update"?(typeof c.size=="number"&&(t==null||t(c.size),m.setRowCount(c.size)),c.rows?b(c.rows):typeof c.size=="number"&&(i.current=m.data,u.current=!0)):$r(c)?o==null||o(c):console.log(`useDataSource unexpected message ${c.type}`)},[m,o,t,r,b]),h=(0,Q.useCallback)(()=>m.getSelectedRows(),[m]);(0,Q.useEffect)(()=>{var c;return s.current=!0,(c=e.resume)==null||c.call(e),()=>{var v;s.current=!1,(v=e.suspend)==null||v.call(e)}},[e]),(0,Q.useEffect)(()=>{var c;e.status==="disabled"?(c=e.enable)==null||c.call(e,C):e==null||e.subscribe({range:(0,ye.getFullRange)(n,l)},C)},[e,C,n,l]);let x=(0,Q.useCallback)(c=>{if(!(0,ye.rangesAreSame)(c,d.current)){let v=(0,ye.getFullRange)(c,l);m.setRange(v),e.range=d.current=v,e.emit("range",c)}},[e,m,l]);return{data:i.current,dataRef:i,getSelectedRows:h,range:d.current,setRange:x}};var lo=require("react"),Bt=e=>{let o=(0,lo.useRef)(e);return(0,lo.useMemo)(()=>o.current,[])};var Ut=require("@vuu-ui/vuu-utils"),_t=require("@salt-ds/core"),$=require("react");var Xt=new Set(["Home","End","PageUp","PageDown","ArrowDown","ArrowUp"]),No=new Set(Xt);No.add("ArrowLeft");No.add("ArrowRight");var Br=(e,o)=>{switch(o){case"cell":return No.has(e);case"row":return Xt.has(e);default:return!1}},Vr=["Home","End","PageUp","PageDown"],Vt=e=>Vr.includes(e),Wr=[-1,-1];function Wt(e,[o,t],r,n){return e==="ArrowUp"?o>-1?[o-1,t]:[o,t]:e==="ArrowDown"?o===-1?[0,t]:o===n-1?[o,t]:[o+1,t]:e==="ArrowRight"?t<r?[o,t+1]:[o,t]:e==="ArrowLeft"?t>1?[o,t-1]:[o,t]:[o,t]}var Qt=({columnCount:e=0,containerRef:o,disableFocus:t=!1,defaultHighlightedIndex:r,disableHighlightOnFocus:n,highlightedIndex:l,navigationStyle:a,requestScroll:i,onHighlight:s,rowCount:u=0,viewportRowCount:d})=>{var pe;let m=(0,$.useRef)([-1,-1]),b=(0,$.useRef)(),C=(0,$.useRef)([-1,0]),h=(0,$.useRef)(),[x,c]=(0,_t.useControlled)({controlled:l,default:r,name:"UseKeyboardNavigation"});h.current=x;let v=(0,$.useCallback)((f,w=!1)=>{s==null||s(f),c(f)},[s,c]),T=f=>f==null?void 0:f.closest("[role='columnHeader'],[role='cell']"),S=f=>{var w;if(f.role==="columnHeader")return[-1,parseInt((w=f.dataset.idx)!=null?w:"-1",10)];{let y=f.closest("[role='row']");if(y){let W=(0,Ut.getIndexFromRowElement)(y),g=Array.from(y.childNodes).indexOf(f);return[W,g]}}return Wr},D=(0,$.useCallback)(f=>{var w;if(o.current){let y=zt(o,f);y&&(y!==b.current&&((w=b.current)==null||w.removeAttribute("tabindex"),b.current=y,y.setAttribute("tabindex","0")),i==null||i({type:"scroll-row",rowIndex:f[0]}),y.focus({preventScroll:!0}))}},[o,i]),A=(0,$.useCallback)((f,w,y=!1)=>{let W=[f,w];C.current=W,a==="row"?c(f):D(W),y&&(m.current=W)},[D,a,c]),F=(0,$.useCallback)((f,[w,y])=>new Promise(W=>{let g=w;switch(f){case"PageDown":{g=Math.min(u-1,w+d),g!==w&&(i==null||i({type:"scroll-page",direction:"down"}));break}case"PageUp":{g=Math.max(0,w-d),g!==w&&(i==null||i({type:"scroll-page",direction:"up"}));break}case"Home":{g=0,g!==w&&(i==null||i({type:"scroll-end",direction:"home"}));break}case"End":{g=u-1,g!==w&&(i==null||i({type:"scroll-end",direction:"end"}));break}}setTimeout(()=>{W([g,y])},35)}),[i,u,d]),P=(0,$.useCallback)(()=>{var f;if(n!==!0&&(f=o.current)!=null&&f.contains(document.activeElement)){let w=T(document.activeElement);w&&(m.current=S(w),a==="row"&&c(m.current[0]))}},[n,o,a,c]),z=(0,$.useCallback)(async f=>{let[w,y]=Vt(f)?await F(f,C.current):Wt(f,C.current,e,u),[W,g]=C.current;(w!==W||y!==g)&&A(w,y,!0)},[e,F,u,A]),G=(0,$.useCallback)(f=>{i==null||i({type:"scroll-row",rowIndex:f})},[i]),Z=(0,$.useCallback)(async f=>{let{current:w}=h,[y]=Vt(f)?await F(f,[w!=null?w:-1,0]):Wt(f,[w!=null?w:-1,0],e,u);y!==w&&(v(y),G(y))},[e,F,u,G,v]);(0,$.useEffect)(()=>{l!==void 0&&l!==-1&&G(l)},[l,G]);let ee=(0,$.useCallback)(f=>{u>0&&Br(f.key,a)&&(f.preventDefault(),f.stopPropagation(),a==="row"?Z(f.key):z(f.key))},[u,a,Z,z]),oe=(0,$.useCallback)(f=>{let w=f.target,y=T(w);if(y){let[W,g]=S(y);A(W,g)}},[A]),Y=(0,$.useCallback)(()=>{v(-1)},[v]),K=(0,$.useCallback)(f=>{let w=Ft(f.target);w!==-1&&w!==h.current&&v(w)},[v]),k=(0,$.useCallback)(()=>{z("ArrowDown")},[z]),te=((pe=o.current)==null?void 0:pe.firstChild)!=null;return(0,$.useEffect)(()=>{if(te&&b.current===void 0&&!t){let{current:f}=o,w=(f==null?void 0:f.querySelector(Ao(0)))||(f==null?void 0:f.querySelector(Io(0,0)));w&&(w.setAttribute("tabindex","0"),b.current=w)}},[o,t,te]),{highlightedIndexRef:h,navigate:k,onClick:oe,onFocus:P,onKeyDown:ee,onMouseLeave:a==="row"?Y:void 0,onMouseMove:a==="row"?K:void 0}};var be=require("@vuu-ui/vuu-utils"),Se=require("react"),{IDX:Ur}=be.metadataKeys,_r=[],Xr=["Enter"," "],Jt=({highlightedIndexRef:e,selectionKeys:o=Xr,selectionModel:t,onSelect:r,onSelectionChange:n})=>{let l=(0,Se.useRef)(-1),a=(0,Se.useRef)(_r),i=(0,Se.useCallback)(d=>o.includes(d.key),[o]),s=(0,Se.useCallback)((d,m,b,C)=>{let{[Ur]:h}=m,{current:x}=l,{current:c}=a,T=((0,be.isRowSelected)(m)?be.deselectItem:be.selectItem)(t,c,h,b,C,x);a.current=T,l.current=h,r==null||r(m),n==null||n(T)},[r,n,t]);return{onKeyDown:(0,Se.useCallback)(d=>{if(i(d)){let{current:m}=e;if(m!==void 0&&m!==-1){let b=d.target.querySelector(`[aria-rowindex="${m}"]`);b&&(0,be.dispatchMouseEvent)(b,"click")}}},[e,i]),onRowClick:s}};var Zt=require("@vuu-ui/vuu-popups"),io=require("@vuu-ui/vuu-utils"),Yt=require("react"),Qr=[],jt=({columns:e,data:o,dataSource:t,getSelectedRows:r})=>{let[n]=(0,Zt.useContextMenu)();return(0,Yt.useCallback)(a=>{let i=a.target,s=i==null?void 0:i.closest("div[role='cell']"),u=i==null?void 0:i.closest("div[role='row']");if(s&&u){let{selectedRowsCount:d}=t,m=(0,io.buildColumnMap)(e),b=(0,io.getIndexFromRowElement)(u),C=Array.from(u.childNodes).indexOf(s),h=o.find(([c])=>c===b),x=e[C];n(a,"grid",{columnMap:m,columnName:x,row:h,selectedRows:d===0?Qr:r(),viewport:t.viewport})}},[e,o,t,r,n])};var R=require("@vuu-ui/vuu-utils"),qt=require("@vuu-ui/vuu-ui-controls"),en=require("react"),{info:Fo}=(0,R.logger)("useTableModel"),Jr=100,Zr=({serverDataType:e})=>e===void 0,on=(e,o)=>{let t=o==null?void 0:o.columns.find(({name:r})=>r===e.name);return t?t.serverDataType:e.serverDataType},Yr=["int","long","double"],tn=e=>e===void 0?void 0:Yr.includes(e)?"right":"left",Go=e=>e.type==="columnSettings",Ko=e=>e.type==="tableSettings",jr=(e,o)=>{switch(Fo==null||Fo(`TableModelReducer ${o.type}`),o.type){case"init":return nn(o);case"moveColumn":return el(e,o);case"resizeColumn":return nl(e,o);case"setTableSchema":return rl(e,o);case"hideColumns":return ol(e,o);case"showColumns":return tl(e,o);case"pinColumn":return ll(e,o);case"updateColumnProp":return $e(e,o);case"tableConfig":return ln(e,o);default:return console.log(`unhandled action ${o.type}`),e}},Oo=(e,o)=>{let[t,r]=(0,en.useReducer)(jr,{tableConfig:e,dataSource:o},nn),{columns:n,headings:l,tableConfig:a,...i}=t;return{columns:n,dispatchTableModelAction:r,headings:l,tableAttributes:i,tableConfig:a}};function nn({dataSource:e,tableConfig:o}){let{columns:t,...r}=o,{config:n,tableSchema:l}=e,a=t.filter((0,R.subscribedOnly)(n==null?void 0:n.columns)).map(rn(r,l)),i=a.some(R.isPinned)?(0,R.sortPinnedColumns)(a):a,s={columns:i,headings:(0,R.getTableHeadings)(i),tableConfig:o,...r};if(n){let{columns:u,...d}=n;s=ln(s,{type:"tableConfig",...d})}return s}var qr=(e,o)=>o==="uppercase"?e.toUpperCase():o==="capitalize"?e[0].toUpperCase()+e.slice(1).toLowerCase():e,rn=(e,o)=>(t,r)=>{let{columnDefaultWidth:n=Jr,columnFormatHeader:l}=e,a=on(t,o),{align:i=tn(a),name:s,label:u=(0,R.getColumnLabel)(t),width:d=n,...m}=t,b={...m,align:i,CellRenderer:(0,R.getCellRenderer)(t),HeaderCellContentRenderer:(0,R.getColumnHeaderContentRenderer)(t),HeaderCellLabelRenderer:(0,R.getColumnHeaderLabelRenderer)(t),clientSideEditValidationCheck:(0,R.hasValidationRules)(t.type)?(0,qt.buildValidationChecker)(t.type.renderer.rules):void 0,index:r+1,label:qr(u,l),name:s,originalIdx:r,serverDataType:a,valueFormatter:(0,R.getValueFormatter)(t,a),width:d};return(0,R.isGroupColumn)(b)&&(b.columns=b.columns.map(C=>rn(e)(C,r))),b};function el(e,{column:o,moveBy:t}){let{columns:r}=e;if(typeof t=="number"){let n=r.indexOf(o),l=r.slice(),[a]=l.splice(n,1);return l.splice(n+t,0,a),{...e,columns:l}}return e}function ol(e,{columns:o}){return o.some(t=>t.hidden!==!0)?o.reduce((t,r)=>r.hidden!==!0?$e(t,{type:"updateColumnProp",column:r,hidden:!0}):t,e):e}function tl(e,{columns:o}){return o.some(t=>t.hidden)?o.reduce((t,r)=>r.hidden?$e(t,{type:"updateColumnProp",column:r,hidden:!1}):t,e):e}function nl(e,{column:o,phase:t,width:r}){let n="updateColumnProp",l=t!=="end";switch(t){case"begin":return $e(e,{type:n,column:o,resizing:l});case"end":return $e(e,{type:n,column:o,resizing:l,width:r});case"resize":return $e(e,{type:n,column:o,width:r});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${t}`)}}function rl(e,{tableSchema:o}){let{columns:t}=e;if(t.some(Zr)){let r=t.map(n=>{var a;let l=on(n,o);return{...n,align:(a=n.align)!=null?a:tn(l),serverDataType:l}});return{...e,columns:r}}else return e}function ll(e,o){let{columns:t}=e,{column:r,pin:n}=o,l=t.find(a=>a.name===r.name);return l?(t=(0,R.replaceColumn)(t,{...l,pin:n}),t=(0,R.sortPinnedColumns)(t),{...e,columns:t}):e}function $e(e,o){let{columns:t,tableConfig:r}=e,{align:n,column:l,hidden:a,label:i,resizing:s,width:u}=o,d=t.find(m=>m.name===l.name);if(d&&((n==="left"||n==="right")&&(t=(0,R.replaceColumn)(t,{...d,align:n})),typeof i=="string"&&(t=(0,R.replaceColumn)(t,{...d,label:i})),typeof s=="boolean"&&(t=(0,R.replaceColumn)(t,{...d,resizing:s})),typeof a=="boolean"&&(t=(0,R.replaceColumn)(t,{...d,hidden:a})),typeof u=="number")){t=(0,R.replaceColumn)(t,{...d,width:u});let m=r.columns.find(b=>b.name===l.name);m&&(r={...r,columns:(0,R.replaceColumn)(r.columns,{...m,width:u})})}return{...e,columns:t,tableConfig:r}}function ln(e,{confirmed:o,filter:t,groupBy:r,sort:n}){let l=r!==void 0,a=typeof(t==null?void 0:t.filter)=="string",i=n&&n.sortDefs.length>0,s=e;return l&&(s={...e,columns:(0,R.applyGroupByToColumns)(s.columns,r,o)}),i&&(s={...e,columns:(0,R.applySortToColumns)(s.columns,n)}),a?s={...e,columns:(0,R.applyFilterToColumns)(s.columns,t)}:s.columns.some(R.isFilteredColumn)&&(s={...e,columns:(0,R.stripFilterFromColumns)(s.columns)}),s}var ke=require("@vuu-ui/vuu-utils"),H=require("react");var il=100,an=200,sn=e=>{let{clientHeight:o,clientWidth:t,scrollHeight:r,scrollWidth:n}=e;return[n-t,r-o]},al=(e,o)=>{if(e!==void 0){let{scrollTop:t}=e;return o>t?"fwd":"bwd"}},un=(e,o)=>{let{clientHeight:t,clientWidth:r,scrollHeight:n,scrollLeft:l,scrollTop:a,scrollWidth:i}=e,s=i-r,u=l/(i-r),d=n-t,m=a/(n-t),b=al(o,a);return b==="fwd"&&m>.99?m=1:b==="bwd"&&m<.02&&(m=0),[l,u,s,a,m,d]},mn={scrollToIndex:()=>{},scrollToKey:()=>{}},cn=({onAttach:e,onDetach:o})=>{let t=(0,H.useRef)(null);return(0,H.useCallback)(n=>{if(n)t.current=n,e==null||e(n);else if(t.current){let{current:l}=t;t.current=n,o==null||o(l)}},[e,o])},$o=({columns:e,getRowAtPosition:o,onHorizontalScroll:t,onVerticalScroll:r,onVerticalScrollInSitu:n,rowHeight:l,scrollingApiRef:a,setRange:i,viewportMeasurements:s})=>{let u=(0,H.useRef)(0),d=(0,H.useRef)(l),m=(0,H.useRef)(!1),b=(0,H.useRef)({scrollTop:0,scrollLeft:0}),C=(0,H.useRef)(!1),h=(0,H.useRef)({scrollTop:0,scrollLeft:0}),x=(0,H.useRef)(null),c=(0,H.useRef)(null),v=(0,H.useRef)(0),{appliedPageSize:T,isVirtualScroll:S,rowCount:D,totalHeaderHeight:A,viewportWidth:F}=s,P=(0,H.useRef)([]),[,z]=(0,H.useState)({}),G=(0,H.useRef)(0);(0,H.useMemo)(()=>{let[g,E]=(0,ke.getColumnsInViewport)(e,b.current.scrollLeft,b.current.scrollLeft+F+an);G.current=E,P.current=g},[F,e]);let Z=(0,H.useCallback)(g=>{if(b.current.scrollLeft=g,t==null||t(g),Math.abs(g-v.current)>il){v.current=g;let[E,U]=(0,ke.getColumnsInViewport)(e,g,g+F+an);(0,ke.itemsChanged)(P.current,E)&&(G.current=U,P.current=E,z({}))}},[e,t,F]),ee=(0,H.useCallback)((g,E)=>{b.current.scrollTop=g,r==null||r(g,E);let U=o(g);U!==u.current&&(u.current=U,i({from:U,to:U+D})),n==null||n(0)},[o,r,n,i,D]),oe=(0,H.useCallback)(()=>{let{current:g}=c,{current:E}=x,{current:U}=m,{current:q}=h;if(U)m.current=!1;else if(g&&E){C.current=!0;let[j,ce,,J,I]=un(E,q);q.scrollLeft=j,q.scrollTop=J;let[O,ne]=sn(E),V=Math.round(ce*O),He=I*ne;g.scrollTo({left:V,top:He,behavior:"auto"})}n==null||n(0)},[n]),Y=(0,H.useCallback)(()=>{let{current:g}=C,{current:E}=c,{current:U}=x,{current:q}=b;if(E&&U){let[j,ce,J,I,O,ne]=un(E);m.current=!0,g?C.current=!1:(U.scrollLeft=Math.round(ce*J),U.scrollTop=O*ne),q.scrollTop!==I&&ee(I,O),q.scrollLeft!==j&&Z(j)}},[ee,Z]),K=(0,H.useCallback)(g=>{x.current=g,g.addEventListener("scroll",oe,{passive:!0})},[oe]),k=(0,H.useCallback)(g=>{x.current=null,g.removeEventListener("scroll",oe)},[oe]),te=(0,H.useCallback)(g=>{c.current=g,g.addEventListener("scroll",Y,{passive:!0})},[Y]),pe=(0,H.useCallback)(g=>{c.current=null,g.removeEventListener("scroll",Y)},[Y]),f=cn({onAttach:te,onDetach:pe}),w=cn({onAttach:K,onDetach:k}),y=(0,H.useCallback)(g=>{let{current:E}=c;if(E){let[U,q]=sn(E),{scrollLeft:j,scrollTop:ce}=E;if(m.current=!1,g.type==="scroll-row"){let J=(0,ke.getRowElementAtIndex)(E,g.rowIndex);if(J!==null){let[I,O]=Gt(J,A);if(console.log(`outside viewport ? ${I} ${O}`),I&&O)if(S){let ne=I==="down"?1:-1;n==null||n(ne);let V=u.current+ne;u.current=V,i({from:V,to:V+D})}else{let ne=j,V=ce;I==="up"||I==="down"?V=Math.min(Math.max(0,ce+O),q):ne=Math.min(Math.max(0,j+O),U),E.scrollTo({top:V,left:ne,behavior:"smooth"})}}}else if(g.type==="scroll-page"){let{direction:J}=g;if(S){let I=J==="down"?D:-D;n==null||n(I);let O=u.current+I;u.current=O,i({from:O,to:O+D})}else{let I=J==="down"?T:-T,O=Math.min(Math.max(0,ce+I),q);E.scrollTo({top:O,left:j,behavior:"auto"})}}else if(g.type==="scroll-end"){let{direction:J}=g,I=J==="end"?q:0;E.scrollTo({top:I,left:E.scrollLeft,behavior:"auto"})}}},[T,S,n,i,A,D]),W=(0,H.useMemo)(()=>({scrollToIndex:g=>{if(x.current){let E=(g-30)*20;x.current.scrollTop=E}},scrollToKey:g=>{console.log(`scrollToKey ${g}`)}}),[]);return(0,H.useImperativeHandle)(a,()=>x.current?W:mn,[W]),(0,H.useEffect)(()=>{if(l!==d.current)d.current=l,b.current.scrollTop>0&&c.current&&(c.current.scrollTop=0);else{let{current:g}=u,E={from:g,to:g+D};i(E)}},[l,i,D]),{columnsWithinViewport:P.current,scrollbarContainerRef:w,contentContainerRef:f,requestScroll:y,virtualColSpan:G.current}};var Be=require("@vuu-ui/vuu-utils"),se=require("react"),sl=1e7,ul={appliedPageSize:0,contentHeight:0,contentWidth:0,getRowAtPosition:()=>-1,getRowOffset:()=>-1,horizontalScrollbarHeight:0,isVirtualScroll:!1,pinnedWidthLeft:0,pinnedWidthRight:0,rowCount:0,setInSituRowOffset:()=>{},setScrollTop:()=>{},totalHeaderHeight:0,verticalScrollbarWidth:0,viewportBodyHeight:0,viewportWidth:0},Bo=({columns:e,headerHeight:o,headings:t,rowCount:r,rowHeight:n,selectionEndSize:l=4,size:a})=>{let i=(0,se.useRef)(0),s=(0,se.useRef)(0),u=Math.min(n*r,sl),d=r*n,m=d-u,{pinnedWidthLeft:b,pinnedWidthRight:C,unpinnedWidth:h}=(0,se.useMemo)(()=>(0,Be.measurePinnedColumns)(e,l),[e,l]),x=(0,se.useRef)(o);(0,se.useMemo)(()=>{x.current=o*(1+t.length)},[o,t.length]);let[c,v,T]=(0,se.useMemo)(()=>{if(m){let[A,F,P]=(0,Be.virtualRowPositioning)(n,m,s);return[G=>A(G,i.current),F,P]}else return(0,Be.actualRowPositioning)(n)},[m,n]),S=(0,se.useCallback)((A,F)=>{s.current=F},[]),D=(0,se.useCallback)(A=>{A===0?i.current=0:i.current=Math.max(0,i.current+A)},[]);return(0,se.useMemo)(()=>{if(a){let{current:A}=x,F=15,P=b+h+C,z=P>a.width?F:0,G=(a.height-o)/n,Z=Number.isInteger(G)?G:Math.ceil(G),ee=a.height-A,oe=u>ee?F:0,Y=Z*n*(u/d),K=a.width;return{appliedPageSize:Y,contentHeight:u,contentWidth:P,getRowAtPosition:v,getRowOffset:c,isVirtualScroll:T,horizontalScrollbarHeight:z,pinnedWidthLeft:b,pinnedWidthRight:C,rowCount:Z,setInSituRowOffset:D,setScrollTop:S,totalHeaderHeight:A,verticalScrollbarWidth:oe,viewportBodyHeight:ee,viewportWidth:K}}else return ul},[v,c,o,T,b,h,C,u,n,D,S,a,d])};var dn=require("@vuu-ui/vuu-layout"),pn=require("@vuu-ui/vuu-utils"),ue=require("react"),bn=({availableColumns:e,onAvailableColumnsChange:o,onConfigChange:t,onCreateCalculatedColumn:r,onDataSourceConfigChange:n,tableConfig:l})=>{let a=(0,dn.useLayoutProviderDispatch)(),i=(0,ue.useRef)(),[s,u]=(0,ue.useState)(e),d=(0,ue.useCallback)((c,v,T)=>{a({type:"set-props",path:"#context-panel",props:{expanded:!0,content:{type:c,props:T},title:v}})},[a]),m=(0,ue.useCallback)(()=>{requestAnimationFrame(()=>{var c;(c=i.current)==null||c.call(i)})},[]),b=(0,ue.useCallback)(c=>{let v=s.concat({name:c.name,serverDataType:(0,pn.getCalculatedColumnType)(c)});u(v),o==null||o(v),requestAnimationFrame(()=>{var T;(T=i.current)==null||T.call(i)}),r(c)},[s,o,r]),C=(0,ue.useCallback)(c=>{d("ColumnSettings","Column Settings",{column:c.column,onCancelCreateColumn:m,onConfigChange:t,onCreateCalculatedColumn:b,tableConfig:l,vuuTable:c.vuuTable})},[m,b,t,d,l]),h=(0,ue.useCallback)(()=>{C({column:{name:"::",serverDataType:"string"},type:"columnSettings",vuuTable:{module:"SIMUL",table:"instruments"}})},[C]),x=(0,ue.useCallback)(c=>{let v=l.columns.find(T=>T.name===c);v&&C({type:"columnSettings",column:v,vuuTable:{module:"SIMUL",table:"instruments"}})},[C,l.columns]);return i.current=(0,ue.useCallback)(()=>{d("TableSettings","DataGrid Settings",{availableColumns:s!=null?s:l.columns.map(({name:c,serverDataType:v})=>({name:c,serverDataType:v})),onAddCalculatedColumn:h,onConfigChange:t,onDataSourceConfigChange:n,onNavigateToColumn:x,tableConfig:l})},[s,h,x,t,n,d,l]),{showColumnSettingsPanel:C,showTableSettingsPanel:i.current}};var fn=require("@vuu-ui/vuu-utils"),gn=require("react"),cl=e=>{let o=[];return e==null||e.forEach(t=>{let r=(0,fn.getRowClassNameGenerator)(t);r&&o.push(r.fn)}),(t,r)=>{let n=[];return o==null||o.forEach(l=>{let a=l(t,r);a&&n.push(a)}),n.join(" ")}},Cn=({rowClassNameGenerators:e})=>(0,gn.useMemo)(()=>cl(e),[e]);var ao=e=>e,{KEY:ml,IS_EXPANDED:vn,IS_LEAF:hn}=B.metadataKeys,dl={draggable:void 0,onMouseDown:void 0},pl=()=>dl,bl=(e,o)=>({...e,columns:e.columns.concat(o)}),xn=({allowDragDrop:e=!1,availableColumns:o,config:t,containerRef:r,dataSource:n,disableFocus:l,headerHeight:a=25,highlightedIndex:i,id:s,navigationStyle:u="cell",onAvailableColumnsChange:d,onConfigChange:m,onDragStart:b,onDrop:C,onFeatureInvocation:h,onHighlight:x,onRowClick:c,onSelect:v,onSelectionChange:T,renderBufferSize:S=0,rowHeight:D=20,scrollingApiRef:A,selectionModel:F,size:P})=>{let[z,G]=(0,M.useState)(n.size);if(n===void 0)throw Error("no data source provided to Vuu Table");let Z=Cn(t),ee=e?wn.useDragDrop:pl,oe=(0,M.useMemo)(()=>Lt(n),[n]),Y=(0,M.useCallback)(p=>{G(p)},[]),{columns:K,dispatchTableModelAction:k,headings:te,tableAttributes:pe,tableConfig:f}=Oo(t,n);(0,B.useLayoutEffectSkipFirst)(()=>{k({type:"init",tableConfig:t,dataSource:n})},[t,n,k]);let w=(0,M.useCallback)(p=>{k({type:"init",tableConfig:p,dataSource:n}),m==null||m(ao(p))},[n,k,m]),y=(0,M.useMemo)(()=>(0,B.buildColumnMap)(n.columns),[n.columns]),W=(0,M.useCallback)(({tableSchema:p})=>{p?k({type:"setTableSchema",tableSchema:p}):console.log("subscription message with no schema")},[k]),{getRowAtPosition:g,getRowOffset:E,setInSituRowOffset:U,setScrollTop:q,...j}=Bo({columns:K,headerHeight:a,headings:te,rowCount:z,rowHeight:D,size:P}),ce=Bt({from:0,to:j.rowCount}),{data:J,dataRef:I,getSelectedRows:O,range:ne,setRange:V}=$t({dataSource:n,onFeatureInvocation:h,renderBufferSize:S,onSizeChange:Y,onSubscribed:W,range:ce}),{requestScroll:He,...fo}=$o({columns:K,getRowAtPosition:g,rowHeight:D,scrollingApiRef:A,setRange:V,onVerticalScroll:q,onVerticalScrollInSitu:U,viewportMeasurements:j}),Qe=(0,M.useCallback)(p=>{k({type:"init",tableConfig:p,dataSource:n}),m==null||m(ao(p))},[n,k,m]),Me=(0,M.useCallback)(p=>{n.config={...n.config,...p}},[n]);(0,M.useEffect)(()=>{n.on("config",(p,L,N)=>{((N==null?void 0:N.filterChanged)||(N==null?void 0:N.groupByChanged))&&n.range.from>0&&He({type:"scroll-end",direction:"home"}),k({type:"tableConfig",...p,confirmed:L})})},[n,k,He]);let $n=(0,M.useCallback)(p=>{n.columns=n.columns.concat(p.name),w(bl(f,p))},[n,f,w]),_o=(0,M.useCallback)(p=>{let{columns:L}=p,N=L.map(re=>re.name),X={...f,columns:f.columns.map(re=>N.includes(re.name)?{...re,hidden:!0}:re)};w(X)},[f,w]),Xo=(0,M.useCallback)(p=>{w({...f,columns:(0,B.updateColumn)(f.columns,{...p.column,pin:p.pin})})},[f,w]),{showColumnSettingsPanel:Qo,showTableSettingsPanel:Jo}=bn({availableColumns:o!=null?o:f.columns.map(({name:p,serverDataType:L="string"})=>({name:p,serverDataType:L})),onAvailableColumnsChange:d,onConfigChange:Qe,onCreateCalculatedColumn:$n,onDataSourceConfigChange:Me,tableConfig:f}),Bn=(0,M.useCallback)(p=>{if(Go(p))Qo(p);else if(Ko(p))Jo();else switch(p.type){case"hideColumns":return _o(p);case"pinColumn":return Xo(p);default:k(p)}},[k,_o,Xo,Qo,Jo]),Vn=It({dataSource:n,onPersistentColumnOperation:Bn}),Wn=(0,M.useCallback)((p,L=!1,N)=>{n&&(n.sort=(0,B.applySort)(n.sort,p,L,N))},[n]),go=(0,M.useRef)(),Un=(0,M.useCallback)((p,L,N)=>{var re,Ue,he;let X=K.find(ae=>ae.name===L);if(X)if(p==="resize")(re=go.current)==null||re.forEach(ae=>{ae.style.width=`${N}px`});else if(p==="end")go.current=void 0,(0,B.isValidNumber)(N)&&(k({type:"resizeColumn",phase:p,column:X,width:N}),m==null||m(ao(Lo(f,{type:"col-size",column:X,width:N}))));else{let ae=`[aria-colindex='${X.index}']`;go.current=Array.from((he=(Ue=r.current)==null?void 0:Ue.querySelectorAll(`.vuuTableCell${ae},.vuuTableHeaderCell${ae}`))!=null?he:[]),k({type:"resizeColumn",phase:p,column:X,width:N})}else throw Error(`useDataTable.handleColumnResize, column ${L} not found`)},[K,k,m,f,r]),_n=(0,M.useCallback)((p,L)=>{var re,Ue;let N=(0,B.isJsonGroup)(L,p,y),X=p[ml];if(p[vn]){if(n.closeTreeNode(X,!0),N){let he=K.indexOf(L),ae=(re=n.getRowsAtDepth)==null?void 0:re.call(n,he+1);ae&&!ae.some(Le=>Le[vn]||Le[hn])&&k({type:"hideColumns",columns:K.slice(he+2)})}}else if(n.openTreeNode(X),N){let he=(Ue=n.getChildRows)==null?void 0:Ue.call(n,X),ae=K.indexOf(L)+1,Le=[K[ae]];he&&he.some(Co=>Co[hn])&&Le.push(K[ae+1]),Le.some(Co=>Co.hidden)&&k({type:"showColumns",columns:Le})}},[y,K,n,k]),{highlightedIndexRef:Zo,navigate:Xn,onFocus:Yo,onKeyDown:jo,...Qn}=Qt({columnCount:K.filter(p=>p.hidden!==!0).length,containerRef:r,disableFocus:l,highlightedIndex:i,navigationStyle:u,requestScroll:He,rowCount:n==null?void 0:n.size,onHighlight:x,viewportRange:ne,viewportRowCount:j.rowCount}),{onBlur:Jn,onDoubleClick:Zn,onKeyDown:qo,onFocus:et}=Ot({navigate:Xn}),Yn=(0,M.useCallback)(p=>{Yo(),p.defaultPrevented||et(p)},[et,Yo]),jn=jt({columns:K,data:J,dataSource:n,getSelectedRows:O}),qn=(0,M.useCallback)(p=>{n.groupBy=p.map(L=>L.name)},[n]),er=(0,M.useCallback)(p=>{(0,B.isGroupColumn)(p)?n.groupBy=[]:n&&n.groupBy.includes(p.name)&&(n.groupBy=n.groupBy.filter(L=>L!==p.name))},[n]),or=(0,M.useCallback)(p=>{n.select(p),T==null||T(p)},[n,T]),tr=(0,M.useCallback)(p=>{v&&v(p===null?null:(0,B.asDataSourceRowObject)(p,y))},[y,v]),{onKeyDown:ot,onRowClick:tt}=Jt({highlightedIndexRef:Zo,onSelect:tr,onSelectionChange:or,selectionModel:F}),nr=(0,M.useCallback)((p,L,N,X)=>{tt(p,L,N,X),c==null||c(p,(0,B.asDataSourceRowObject)(L,y))},[y,c,tt]),rr=(0,M.useCallback)(p=>{jo(p),p.defaultPrevented||qo(p),p.defaultPrevented||ot(p)},[jo,qo,ot]),lr=(0,M.useCallback)(p=>{let L={...f,columns:p};k({type:"init",tableConfig:L,dataSource:n}),m==null||m(ao(L))},[n,k,m,f]),ir=(0,M.useCallback)(p=>{C==null||C(p)},[C]),ar=(0,M.useCallback)(async(p,L,N)=>n.applyEdit(p,L,N),[n]),sr=(0,M.useCallback)(p=>{let{initialDragElement:L}=p,N=(0,B.getIndexFromRowElement)(L),X=I.current.find(re=>re[0]===N);X&&p.setPayload(X),b==null||b(p)},[I,b]),{onMouseDown:ur,draggable:cr}=ee({allowDragDrop:e,containerRef:r,draggableClassName:"vuuTable",id:s,onDragStart:sr,onDrop:ir,orientation:"vertical",itemQuery:".vuuTableRow"});return{...Qn,"aria-rowcount":n.size,rowClassNameGenerator:Z,draggableRow:cr,onBlur:Jn,onDoubleClick:Zn,onFocus:Yn,onKeyDown:rr,onMouseDown:ur,columnMap:y,columns:K,data:J,getRowOffset:E,handleContextMenuAction:Vn,headings:te,highlightedIndex:Zo.current,menuBuilder:oe,onContextMenu:jn,onDataEdited:ar,onMoveColumn:lr,onMoveGroupColumn:qn,onRemoveGroupColumn:er,onRowClick:nr,onSortColumn:Wn,onResizeColumn:Un,onToggleGroup:_n,scrollProps:fo,tableAttributes:pe,tableConfig:f,viewportMeasurements:j}};var Tn=require("@vuu-ui/vuu-utils"),De=require("react"),Rn=({rowHeight:e=0})=>{let[o,t]=(0,De.useState)(e),r=(0,De.useRef)(o),n=(0,De.useMemo)(()=>new ResizeObserver(a=>{for(let i of a){let[{blockSize:s}]=i.borderBoxSize,u=Math.round(s);(0,Tn.isValidNumber)(u)&&r.current!==u&&(r.current=u,t(u))}}),[]),l=(0,De.useCallback)(a=>{if(a){if(e===0){let{height:i}=a.getBoundingClientRect();console.log({boundingClientHeight:i}),console.log(`measured rowHeight = ${i} (${e})`),n.observe(a),t(i)}}else n.disconnect()},[n,e]);return{rowHeight:o,rowRef:l}};var ie=require("react/jsx-runtime"),ve="vuuTable",{IDX:fl,RENDER_IDX:gl}=so.metadataKeys,Cl=({Row:e=Ho,allowDragDrop:o,availableColumns:t,config:r,containerRef:n,dataSource:l,disableFocus:a=!1,highlightedIndex:i,id:s,navigationStyle:u="cell",onAvailableColumnsChange:d,onConfigChange:m,onDragStart:b,onDrop:C,onFeatureInvocation:h,onHighlight:x,onRowClick:c,onSelect:v,onSelectionChange:T,renderBufferSize:S=5,rowHeight:D,scrollingApiRef:A,selectionModel:F="extended",showColumnHeaders:P=!0,headerHeight:z=P?D*1.25:0,size:G})=>{let Z=(0,so.useId)(s),{columnMap:ee,columns:oe,data:Y,draggableRow:K,getRowOffset:k,handleContextMenuAction:te,headings:pe,highlightedIndex:f,menuBuilder:w,onDataEdited:y,onMoveColumn:W,onMoveGroupColumn:g,onRemoveGroupColumn:E,onResizeColumn:U,onRowClick:q,onSortColumn:j,onToggleGroup:ce,rowClassNameGenerator:J,scrollProps:I,tableAttributes:O,tableConfig:ne,viewportMeasurements:V,...He}=xn({allowDragDrop:o,availableColumns:t,config:r,containerRef:n,dataSource:l,disableFocus:a,headerHeight:z,highlightedIndex:i,id:Z,navigationStyle:u,onAvailableColumnsChange:d,onConfigChange:m,onDragStart:b,onDrop:C,onFeatureInvocation:h,onHighlight:x,onRowClick:c,onSelect:v,onSelectionChange:T,renderBufferSize:Math.max(5,S),rowHeight:D,scrollingApiRef:A,selectionModel:F,size:G}),fo=(0,Vo.default)(`${ve}-contentContainer`,{[`${ve}-colLines`]:O.columnSeparators,[`${ve}-rowLines`]:O.rowSeparators,[`${ve}-zebra`]:O.zebraStripes}),Qe={"--content-height":`${V.contentHeight}px`,"--content-width":`${V.contentWidth}px`,"--horizontal-scrollbar-height":`${V.horizontalScrollbarHeight}px`,"--pinned-width-left":`${V.pinnedWidthLeft}px`,"--pinned-width-right":`${V.pinnedWidthRight}px`,"--header-height":`${z}px`,"--row-height-prop":`${D}px`,"--total-header-height":`${V.totalHeaderHeight}px`,"--vertical-scrollbar-width":`${V.verticalScrollbarWidth}px`,"--viewport-body-height":`${V.viewportBodyHeight}px`};return(0,ie.jsxs)(yn.ContextMenuProvider,{menuActionHandler:te,menuBuilder:w,children:[(0,ie.jsx)("div",{className:`${ve}-scrollbarContainer`,ref:I.scrollbarContainerRef,style:Qe,children:(0,ie.jsx)("div",{className:`${ve}-scrollbarContent`})}),(0,ie.jsx)("div",{className:fo,ref:I.contentContainerRef,style:Qe,children:(0,ie.jsxs)("div",{...He,className:`${ve}-table`,role:"table",tabIndex:a?void 0:-1,children:[P?(0,ie.jsx)(Mo,{columns:I.columnsWithinViewport,headings:pe,onMoveColumn:W,onMoveGroupColumn:g,onRemoveGroupColumn:E,onResizeColumn:U,onSortColumn:j,tableConfig:ne,tableId:Z,virtualColSpan:I.virtualColSpan}):null,(0,ie.jsx)("div",{className:`${ve}-body`,children:Y.map(Me=>(0,ie.jsx)(e,{"aria-rowindex":Me[0]+1,classNameGenerator:J,columnMap:ee,columns:I.columnsWithinViewport,highlighted:f===Me[fl],onClick:q,onDataEdited:y,row:Me,offset:k(Me),onToggleGroup:ce,virtualColSpan:I.virtualColSpan,zebraStripes:O.zebraStripes},Me[gl]))})]})}),K]})},vl=(0,Ve.forwardRef)(function({Row:o,allowDragDrop:t,availableColumns:r,className:n,config:l,dataSource:a,disableFocus:i,highlightedIndex:s,id:u,navigationStyle:d,onAvailableColumnsChange:m,onConfigChange:b,onDragStart:C,onDrop:h,onFeatureInvocation:x,onHighlight:c,onRowClick:v,onSelect:T,onSelectionChange:S,renderBufferSize:D,rowHeight:A,scrollingApiRef:F,selectionModel:P,showColumnHeaders:z,headerHeight:G,style:Z,...ee},oe){let Y=(0,Ve.useRef)(null),[K,k]=(0,Ve.useState)(),{rowHeight:te,rowRef:pe}=Rn({rowHeight:A});if(l===void 0)throw Error("vuu Table requires config prop. Minimum config is list of Column Descriptors");if(a===void 0)throw Error("vuu Table requires dataSource prop");return console.log({rowHeight:te}),(0,ie.jsxs)(Dn.MeasuredContainer,{...ee,className:(0,Vo.default)(ve,n),id:u,onResize:k,ref:(0,Hn.useForkRef)(Y,oe),children:[(0,ie.jsx)(Ht,{ref:pe,height:A}),K&&te?(0,ie.jsx)(Cl,{Row:o,allowDragDrop:t,availableColumns:r,config:l,containerRef:Y,dataSource:a,disableFocus:i,headerHeight:G,highlightedIndex:s,id:u,navigationStyle:d,onAvailableColumnsChange:m,onConfigChange:b,onDragStart:C,onDrop:h,onFeatureInvocation:x,onHighlight:c,onRowClick:v,onSelect:T,onSelectionChange:S,renderBufferSize:D,rowHeight:te,scrollingApiRef:F,selectionModel:P,showColumnHeaders:z,size:K}):null]})});var uo=require("react"),co=require("@vuu-ui/vuu-ui-controls"),Mn=require("@salt-ds/core"),We=require("@vuu-ui/vuu-utils");var Wo=require("react/jsx-runtime"),Uo=(0,uo.memo)(({column:e,columnMap:o,onCommit:t=co.WarnCommit,row:r})=>{let n=o[e.name],l=!!r[n],a=(0,uo.useCallback)(i=>async s=>{let u=await t(i);return u===!0&&(0,We.dispatchCustomEvent)(s.target,"vuu-commit"),u},[t]);return e.editable?(0,Wo.jsx)(Mn.Checkbox,{checked:l,onClick:a(!l)}):(0,Wo.jsx)(co.CheckboxIcon,{checked:l,disabled:!0})},We.dataColumnAndKeyUnchanged);Uo.displayName="CheckboxCell";(0,We.registerComponent)("checkbox-cell",Uo,"cell-renderer",{serverDataType:"boolean"});var Pn=require("@vuu-ui/vuu-utils"),En=require("@salt-ds/core"),Sn=require("@vuu-ui/vuu-ui-controls"),kn=me(require("clsx"));var po=require("react/jsx-runtime"),mo="vuuTableInputCell",hl=()=>(console.warn("onCommit handler has not been provided to InputCell cell renderer"),Promise.resolve(!0)),Ln=({column:e,columnMap:o,onCommit:t=hl,row:r})=>{let n=o[e.name],l=r[n],{align:a="left",clientSideEditValidationCheck:i}=e,{warningMessage:s,...u}=(0,Sn.useEditableText)({initialValue:l,onCommit:t,clientSideEditValidationCheck:i}),d=s&&a==="left"?(0,po.jsx)("span",{className:`${mo}-icon`,"data-icon":"error"}):void 0,m=s&&a==="right"?(0,po.jsx)("span",{className:`${mo}-icon`,"data-icon":"error"}):void 0;return(0,po.jsx)(En.Input,{...u,className:(0,kn.default)(mo,{[`${mo}-error`]:s!==void 0}),endAdornment:d,startAdornment:m})};(0,Pn.registerComponent)("input-cell",Ln,"cell-renderer",{userCanAssign:!1});var In=require("@vuu-ui/vuu-ui-controls"),fe=require("@vuu-ui/vuu-utils"),zn=me(require("clsx")),bo=require("react"),Nn=require("@vuu-ui/vuu-ui-controls");var Gn=require("react/jsx-runtime"),An="vuuTableToggleCell",wl=({name:e,type:o})=>{if((0,fe.isTypeDescriptor)(o)&&(0,fe.isValueListRenderer)(o.renderer))return o.renderer.values;throw Error(`useLookupValues column ${e} has not been configured with a values list`)},Fn=(0,bo.memo)(function({column:o,columnMap:t,onCommit:r=In.WarnCommit,row:n}){let l=wl(o),a=t[o.name],i=n[a],s=(0,bo.useCallback)((u,d)=>r(d).then(m=>(m===!0&&(0,fe.dispatchCustomEvent)(u.target,"vuu-commit"),m)),[r]);return(0,Gn.jsx)(Nn.CycleStateButton,{className:(0,zn.default)(An,`${An}-${o.name}`),onCommit:s,value:i,values:l,variant:"cta",children:i})},fe.dataColumnAndKeyUnchanged);(0,fe.registerComponent)("toggle-cell",Fn,"cell-renderer",{userCanAssign:!1});var Kn=require("@vuu-ui/vuu-ui-controls"),On=require("@vuu-ui/vuu-utils"),Xe=require("react"),xl=(e,o)=>{let t=(0,Xe.useRef)(null),[r,n]=(0,Kn.useStateRef)(e),l=(0,Xe.useCallback)(i=>{var s;if(i.key==="ArrowDown")n((u=-1)=>Math.min(o-1,u+1));else if(i.key==="ArrowUp")n((u=-1)=>Math.max(0,u-1));else if(i.key==="Enter"||i.key===" "){let{current:u}=r,d=(s=t.current)==null?void 0:s.querySelector(`[aria-rowindex="${u}"]`);d&&(0,On.dispatchMouseEvent)(d,"click")}},[r,o,n]),a=(0,Xe.useCallback)(i=>{n(i)},[n]);return{highlightedIndexRef:r,onHighlight:a,onKeyDown:l,tableRef:t}};
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CheckboxCell: () => CheckboxCell,
+  GroupHeaderCell: () => GroupHeaderCell,
+  GroupHeaderCellNext: () => GroupHeaderCell,
+  HeaderCell: () => HeaderCell,
+  InputCell: () => InputCell,
+  Table: () => Table,
+  TableCell: () => TableCell,
+  TableGroupCell: () => TableGroupCell,
+  ToggleCell: () => ToggleCell,
+  isShowColumnSettings: () => isShowColumnSettings,
+  isShowTableSettings: () => isShowTableSettings,
+  noScrolling: () => noScrolling,
+  updateTableConfig: () => updateTableConfig,
+  useControlledTableNavigation: () => useControlledTableNavigation,
+  useTableModel: () => useTableModel,
+  useTableScroll: () => useTableScroll,
+  useTableViewport: () => useTableViewport
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/header-cell/GroupHeaderCell.tsx
+var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_clsx3 = __toESM(require("clsx"));
+var import_react5 = require("react");
+
+// src/column-header-pill/ColumnHeaderPill.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_react = require("react");
+var import_jsx_runtime = require("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 = (0, import_react.useCallback)(
+    (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      onRemove == null ? void 0 : onRemove(column);
+    },
+    [column, onRemove]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx.default)(classBase, className), children: [
+    children,
+    removable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: `${classBase}-removeButton`,
+        role: "button",
+        "data-icon": "cross",
+        onClick: handleClickRemove
+      }
+    ) : null
+  ] });
+};
+
+// src/column-header-pill/GroupColumnPill.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuGroupColumnPill-label", children: name }),
+    icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-icon": icon }) : null,
+    typeof sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
+  ] });
+};
+
+// src/column-header-pill/SortIndicator.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)(ColumnHeaderPill, { column, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-icon": icon }),
+    typeof column.sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
+  ] });
+};
+
+// src/column-resizing/ColumnResizer.tsx
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NOOP = () => void 0;
+var baseClass = "vuuColumnResizerNext";
+var ColumnResizer = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const positionRef = (0, import_react2.useRef)({ start: 0, now: 0 });
+  const onMouseMove = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      const { current: position } = positionRef;
+      const x = Math.round(e.clientX);
+      const moveBy = x - position.now;
+      const distanceMoved = position.now - position.start;
+      positionRef.current.now = x;
+      if (moveBy !== 0) {
+        onDrag(e, moveBy, distanceMoved);
+      }
+    },
+    [onDrag]
+  );
+  const onMouseUp = (0, import_react2.useCallback)(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      const { current: position } = positionRef;
+      const distanceMoved = position.now - position.start;
+      onDragEnd(e, distanceMoved);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = (0, import_react2.useCallback)(
+    (e) => {
+      const { current: position } = positionRef;
+      onDragStart(e);
+      position.now = position.start = 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__ */ (0, import_jsx_runtime4.jsx)("div", { className: baseClass, onMouseDown: handleMouseDown });
+};
+
+// src/column-resizing/useTableColumnResize.tsx
+var import_react3 = require("react");
+var useTableColumnResize = ({
+  column,
+  onResize,
+  rootRef
+}) => {
+  const widthRef = (0, import_react3.useRef)({ start: 0, now: 0 });
+  const [isResizing, setResizing] = (0, import_react3.useState)(false);
+  const { name } = column;
+  const handleResizeStart = (0, import_react3.useCallback)(() => {
+    if (onResize && rootRef.current) {
+      const { current: width } = widthRef;
+      const { width: measuredWidth } = rootRef.current.getBoundingClientRect();
+      width.start = width.now = Math.round(measuredWidth);
+      setResizing(true);
+      onResize == null ? void 0 : onResize("begin", name);
+    }
+  }, [name, onResize, rootRef]);
+  const handleResize = (0, import_react3.useCallback)(
+    (_evt, moveBy, totalDistanceMoved) => {
+      if (rootRef.current) {
+        if (onResize) {
+          const { current: width } = widthRef;
+          const newWidth = width.start + totalDistanceMoved;
+          if (newWidth !== width.now && newWidth > 0) {
+            onResize("resize", name, newWidth);
+            width.now = newWidth;
+          }
+        }
+      }
+    },
+    [name, onResize, rootRef]
+  );
+  const handleResizeEnd = (0, import_react3.useCallback)(() => {
+    if (onResize) {
+      const { current: width } = widthRef;
+      onResize("end", name, width.now);
+      setTimeout(() => {
+        setResizing(false);
+      }, 80);
+    }
+  }, [name, onResize]);
+  return {
+    isResizing,
+    onDrag: handleResize,
+    onDragStart: handleResizeStart,
+    onDragEnd: handleResizeEnd
+  };
+};
+
+// src/useCell.ts
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
+var import_clsx2 = __toESM(require("clsx"));
+var import_react4 = require("react");
+var useCell = (column, classBase11, isHeader) => (
+  // TODO measure perf without the memo, might not be worth the cost
+  (0, import_react4.useMemo)(() => {
+    const className = (0, import_clsx2.default)(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 = (0, import_vuu_utils.getColumnStyle)(column);
+    return {
+      className,
+      style
+    };
+  }, [column, classBase11, isHeader])
+);
+
+// src/header-cell/GroupHeaderCell.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var classBase2 = "vuuTableGroupHeaderCell";
+var switchIfChanged = (columns, newColumns) => {
+  if (columns === newColumns) {
+    return columns;
+  } else {
+    return newColumns;
+  }
+};
+var GroupHeaderCell = ({
+  column: groupColumn,
+  className: classNameProp,
+  onMoveColumn,
+  onRemoveColumn,
+  onResize,
+  ...htmlAttributes
+}) => {
+  const rootRef = (0, import_react5.useRef)(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column: groupColumn,
+    onResize,
+    rootRef
+  });
+  const [columns, setColumns] = (0, import_react5.useState)(groupColumn.columns);
+  const { className, style } = useCell(groupColumn, classBase2, true);
+  const columnPillProps = columns.length > 1 ? {
+    removable: true,
+    onRemove: onRemoveColumn
+  } : void 0;
+  const handleMoveItem = (0, import_react5.useCallback)(
+    (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]
+  );
+  (0, import_vuu_utils2.useLayoutEffectSkipFirst)(() => {
+    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
+  }, [groupColumn.columns]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ...htmlAttributes,
+      className: (0, import_clsx3.default)(className, classNameProp, {
+        [`${classBase2}-pending`]: groupColumn.groupConfirmed === false
+      }),
+      ref: rootRef,
+      role: "columnheader",
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_vuu_ui_controls.OverflowContainer,
+          {
+            allowDragDrop: true,
+            className: `${classBase2}-inner`,
+            onMoveItem: handleMoveItem,
+            overflowPosition: "start",
+            children: columns.map((column) => {
+              return /* @__PURE__ */ (0, import_react6.createElement)(
+                GroupColumnPill,
+                {
+                  ...columnPillProps,
+                  column,
+                  key: column.name
+                }
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ColumnHeaderPill,
+          {
+            column: groupColumn,
+            removable: true,
+            onRemove: onRemoveColumn
+          }
+        ),
+        groupColumn.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColumnResizer, { ...resizeProps }) : null
+      ]
+    }
+  );
+};
+
+// src/header-cell/HeaderCell.tsx
+var import_clsx5 = __toESM(require("clsx"));
+var import_react7 = require("react");
+
+// src/column-menu/ColumnMenu.tsx
+var import_vuu_popups = require("@vuu-ui/vuu-popups");
+var import_clsx4 = __toESM(require("clsx"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var classBase3 = "vuuColumnMenu";
+var ColumnMenu = ({ className, column }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_vuu_popups.PopupMenu,
+    {
+      className: (0, import_clsx4.default)(classBase3, className),
+      "data-embedded": true,
+      menuLocation: "column-menu",
+      menuOptions: { column }
+    }
+  );
+};
+
+// src/header-cell/HeaderCell.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase4 = "vuuTableHeaderCell";
+var HeaderCell = ({
+  className: classNameProp,
+  column,
+  onClick,
+  onResize,
+  ...htmlAttributes
+}) => {
+  var _a;
+  const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
+  const rootRef = (0, import_react7.useRef)(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize({
+    column,
+    onResize,
+    rootRef
+  });
+  const handleClick = (0, import_react7.useCallback)(
+    (evt) => {
+      !isResizing && (onClick == null ? void 0 : onClick(evt));
+    },
+    [isResizing, onClick]
+  );
+  const { className, style } = useCell(column, classBase4, true);
+  const columnMenu = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColumnMenu, { column });
+  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCellLabelRenderer, { className: `${classBase4}-label`, column }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase4}-label`, children: (_a = column.label) != null ? _a : column.name });
+  const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCellContentRenderer, { column }, "content")] : [];
+  const sortIndicator = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortIndicator, { column });
+  const headerItems = column.align === "right" ? [sortIndicator, columnLabel].concat(columnContent).concat(columnMenu) : [columnMenu, columnLabel, sortIndicator].concat(columnContent);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      ...htmlAttributes,
+      className: (0, import_clsx5.default)(className, classNameProp, {
+        [`${classBase4}-resizing`]: isResizing
+      }),
+      onClick: handleClick,
+      ref: rootRef,
+      role: "columnheader",
+      style,
+      children: [
+        ...headerItems,
+        column.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColumnResizer, { ...resizeProps }) : null
+      ]
+    }
+  );
+};
+
+// src/Table.tsx
+var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
+var import_core2 = require("@salt-ds/core");
+var import_clsx9 = __toESM(require("clsx"));
+var import_react26 = require("react");
+
+// src/Row.tsx
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_clsx7 = __toESM(require("clsx"));
+var import_react10 = require("react");
+
+// src/table-cell/TableCell.tsx
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase5 = "vuuTableCell";
+var TableCell = ({
+  column,
+  columnMap,
+  onClick,
+  onDataEdited,
+  row
+}) => {
+  const { className, style } = useCell(column, classBase5);
+  const { CellRenderer, index, name, valueFormatter } = column;
+  const dataIdx = columnMap[name];
+  const handleDataItemEdited = (0, import_react8.useCallback)(
+    (value) => {
+      if (onDataEdited) {
+        let typedValue = value;
+        if ((0, import_vuu_utils3.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 = (0, import_react8.useCallback)(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      "aria-colindex": index,
+      className,
+      onClick: onClick ? handleClick : void 0,
+      role: "cell",
+      style,
+      children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        CellRenderer,
+        {
+          column,
+          columnMap,
+          onCommit: handleDataItemEdited,
+          row
+        }
+      ) : valueFormatter(row[dataIdx])
+    }
+  );
+};
+
+// src/table-cell/TableGroupCell.tsx
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_react9 = require("react");
+var import_clsx6 = __toESM(require("clsx"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var { IS_LEAF } = import_vuu_utils4.metadataKeys;
+var classBase6 = "vuuTableGroupCell";
+var TableGroupCell = ({
+  column,
+  columnMap,
+  onClick,
+  row
+}) => {
+  const { columns } = column;
+  const [value, offset] = (0, import_vuu_utils4.getGroupValueAndOffset)(columns, row, columnMap);
+  const { className, style } = useCell(column, classBase6);
+  const handleClick = (0, import_react9.useCallback)(
+    (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__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${classBase6}-spacer` }, i));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx6.default)(className, "vuuTableCell"),
+      role: "cell",
+      style,
+      onClick: isLeaf ? void 0 : handleClick,
+      children: [
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${classBase6}-toggle`, "data-icon": "triangle-right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: value })
+      ]
+    }
+  );
+};
+
+// src/Row.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils5.metadataKeys;
+var classBase7 = "vuuTableRow";
+var RowProxy = (0, import_react10.forwardRef)(
+  function RowProxy2({ height }, forwardedRef) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        className: (0, import_clsx7.default)(classBase7, `${classBase7}-proxy`),
+        ref: forwardedRef,
+        style: { height }
+      }
+    );
+  }
+);
+var Row = (0, import_react10.memo)(
+  ({
+    className: classNameProp,
+    classNameGenerator,
+    columnMap,
+    columns,
+    highlighted,
+    row,
+    offset,
+    onClick,
+    onDataEdited,
+    onToggleGroup,
+    virtualColSpan = 0,
+    zebraStripes = false,
+    ...htmlAttributes
+  }) => {
+    const {
+      [IDX]: rowIndex,
+      [IS_EXPANDED]: isExpanded,
+      [SELECTED]: selectionStatus
+    } = row;
+    const handleRowClick = (0, import_react10.useCallback)(
+      (evt) => {
+        const rangeSelect = evt.shiftKey;
+        const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+        onClick == null ? void 0 : onClick(evt, row, rangeSelect, keepExistingSelection);
+      },
+      [onClick, row]
+    );
+    const { True, First, Last } = import_vuu_utils5.RowSelected;
+    const className = (0, import_clsx7.default)(
+      classBase7,
+      classNameProp,
+      classNameGenerator == null ? void 0 : classNameGenerator(row, columnMap),
+      {
+        [`${classBase7}-even`]: zebraStripes && rowIndex % 2 === 0,
+        [`${classBase7}-expanded`]: isExpanded,
+        [`${classBase7}-highlighted`]: highlighted,
+        [`${classBase7}-selected`]: selectionStatus & True,
+        [`${classBase7}-selectedStart`]: selectionStatus & First,
+        [`${classBase7}-selectedEnd`]: selectionStatus & Last
+      }
+    );
+    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
+    const handleGroupCellClick = (0, import_react10.useCallback)(
+      (evt, column) => {
+        if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row, columnMap)) {
+          evt.stopPropagation();
+          onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+        }
+      },
+      [columnMap, onToggleGroup, row]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        ...htmlAttributes,
+        role: "row",
+        className,
+        onClick: handleRowClick,
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase7}-selectionDecorator vuuStickyLeft` }),
+          virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "vuuTableCell", style: { width: virtualColSpan } }) : null,
+          columns.filter(import_vuu_utils5.isNotHidden).map((column) => {
+            const isGroup = (0, import_vuu_utils5.isGroupColumn)(column);
+            const isJsonCell = (0, import_vuu_utils5.isJsonColumn)(column);
+            const Cell = isGroup ? TableGroupCell : TableCell;
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Cell,
+              {
+                column,
+                columnMap,
+                onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+                onDataEdited,
+                row
+              },
+              column.name
+            );
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase7}-selectionDecorator vuuStickyRight` })
+        ]
+      }
+    );
+  }
+);
+Row.displayName = "Row";
+
+// src/table-header/TableHeader.tsx
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_clsx8 = __toESM(require("clsx"));
+var import_react12 = require("react");
+
+// src/table-header/useTableHeader.ts
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_react11 = require("react");
+var useTableHeader = ({
+  columns,
+  onMoveColumn,
+  onSortColumn,
+  tableConfig
+}) => {
+  const containerRef = (0, import_react11.useRef)(null);
+  const scrollingContainerRef = (0, import_react11.useRef)(null);
+  const setContainerRef = (0, import_react11.useCallback)((el) => {
+    containerRef.current = el;
+    if (el) {
+      scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
+    } else {
+      scrollingContainerRef.current = null;
+    }
+  }, []);
+  const handleDropColumnHeader = (0, import_react11.useCallback)(
+    ({ fromIndex: moveFrom, toIndex: moveTo }) => {
+      const column = columns[moveFrom];
+      const orderedColumns = (0, import_vuu_utils6.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;
+      if (moveTo > moveFrom && insertPos !== -1) {
+        onMoveColumn((0, import_vuu_utils6.moveColumnTo)(tableConfig.columns, column, insertPos - 1));
+      } else {
+        onMoveColumn((0, import_vuu_utils6.moveColumnTo)(tableConfig.columns, column, insertPos));
+      }
+    },
+    [columns, onMoveColumn, tableConfig.columns]
+  );
+  const handleColumnHeaderClick = (0, import_react11.useCallback)(
+    (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 = (0, import_vuu_utils6.visibleColumnAtIndex)(columns, colIdx);
+      const isAdditive = evt.shiftKey;
+      column && onSortColumn(column, isAdditive);
+    },
+    [columns, onSortColumn]
+  );
+  const {
+    onMouseDown: columnHeaderDragMouseDown,
+    draggable: draggableColumn,
+    ...dragDropHook
+  } = (0, import_vuu_ui_controls2.useDragDrop)({
+    allowDragDrop: true,
+    containerRef,
+    draggableClassName: `vuuTable`,
+    itemQuery: ".vuuTableHeaderCell",
+    onDrop: handleDropColumnHeader,
+    orientation: "horizontal",
+    scrollingContainerRef
+  });
+  return {
+    draggableColumn,
+    draggedColumnIndex: dragDropHook.draggedItemIndex,
+    onClick: handleColumnHeaderClick,
+    onMouseDown: columnHeaderDragMouseDown,
+    setContainerRef
+  };
+};
+
+// src/table-header/TableHeader.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TableHeader = (0, import_react12.memo)(
+  ({
+    classBase: classBase11 = "vuuTable",
+    columns,
+    headings,
+    onMoveColumn,
+    onMoveGroupColumn,
+    onRemoveGroupColumn,
+    onResizeColumn,
+    onSortColumn,
+    tableConfig,
+    tableId,
+    virtualColSpan = 0
+  }) => {
+    const {
+      draggableColumn,
+      draggedColumnIndex,
+      onClick,
+      onMouseDown,
+      setContainerRef
+    } = useTableHeader({
+      columns,
+      onMoveColumn,
+      onSortColumn,
+      tableConfig
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase11}-col-headings`, ref: setContainerRef, children: [
+      headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase11}-col-headers`, role: "row", children: [
+        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            role: "cell",
+            className: "vuuTableCell",
+            style: { width: virtualColSpan }
+          }
+        ) : null,
+        columns.filter(import_vuu_utils7.isNotHidden).map(
+          (col, i) => (0, import_vuu_utils7.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            GroupHeaderCell,
+            {
+              "aria-colindex": col.index,
+              column: col,
+              "data-index": i,
+              onMoveColumn: onMoveGroupColumn,
+              onRemoveColumn: onRemoveGroupColumn,
+              onResize: onResizeColumn
+            },
+            col.name
+          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            HeaderCell,
+            {
+              "aria-colindex": col.index,
+              className: (0, import_clsx8.default)({
+                "vuuDraggable-dragAway": i === draggedColumnIndex
+              }),
+              column: col,
+              "data-index": i,
+              id: `${tableId}-col-${i}`,
+              onClick,
+              onMouseDown,
+              onResize: onResizeColumn
+            },
+            col.name
+          )
+        ),
+        draggableColumn
+      ] })
+    ] });
+  }
+);
+TableHeader.displayName = "TableHeader";
+
+// src/useTable.ts
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_react24 = require("react");
+
+// src/context-menu/buildContextMenuDescriptors.ts
+var import_vuu_utils8 = require("@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
+    });
+  }
+  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(
+        (0, import_vuu_utils8.isNumericColumn)(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
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var removeFilterColumn = (dataSourceFilter, column) => {
+  if (dataSourceFilter.filterStruct && column) {
+    const [filterStruct, filter] = (0, import_vuu_utils9.removeColumnFromFilter)(
+      column,
+      dataSourceFilter.filterStruct
+    );
+    return {
+      filter,
+      filterStruct
+    };
+  } else {
+    return dataSourceFilter;
+  }
+};
+var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils10.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 = (0, import_vuu_utils10.setSortColumn)(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = (0, import_vuu_utils10.setSortColumn)(dataSource.sort, column, "D"), true;
+        case "sort-add-asc":
+          return dataSource.sort = (0, import_vuu_utils10.addSortColumn)(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = (0, import_vuu_utils10.addSortColumn)(dataSource.sort, column, "D"), true;
+        case "group":
+          return dataSource.groupBy = (0, import_vuu_utils10.addGroupColumn)(dataSource.groupBy, column), true;
+        case "group-add":
+          return dataSource.groupBy = (0, import_vuu_utils10.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 = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Count), true;
+        case "agg-distinct":
+          return dataSource.aggregations = (0, import_vuu_utils10.setAggregations)(dataSource.aggregations, column, Distinct), true;
+        case "agg-sum":
+          return dataSource.aggregations = (0, import_vuu_utils10.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
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_react13 = require("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 + 1}'] > [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 == null ? void 0 : 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) - 1;
+    }
+  }
+  return -1;
+}
+var closestRow = (el) => el.closest('[role="row"]');
+var closestRowIndex = (el) => getRowIndex(closestRow(el));
+var NO_SCROLL_NECESSARY = [void 0, void 0];
+var howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
+  if (contentContainer) {
+    const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
+    const upperBoundary = viewport.top + totalHeaderHeight;
+    const row = rowEl.getBoundingClientRect();
+    if (row) {
+      if (row.bottom > viewport.bottom) {
+        return ["down", row.bottom - viewport.bottom];
+      } else if (row.top < upperBoundary) {
+        return ["up", row.top - upperBoundary];
+      } else {
+        return NO_SCROLL_NECESSARY;
+      }
+    } else {
+      throw Error("Whats going on, row not found");
+    }
+  } else {
+    throw Error("Whats going on, scrollbar container not found");
+  }
+};
+
+// src/useCellEditing.ts
+var useCellEditing = ({ navigate }) => {
+  const commitHandler = (0, import_react13.useCallback)(() => {
+    navigate();
+  }, [navigate]);
+  const editInput = (0, import_react13.useCallback)(
+    (evt) => {
+      const cellEl = evt.target;
+      const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+    },
+    []
+  );
+  const focusInput = (0, import_react13.useCallback)(
+    (evt) => {
+      const cellEl = evt.target;
+      const input = cellEl.querySelector("input");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+    },
+    []
+  );
+  const handleKeyDown = (0, import_react13.useCallback)(
+    (e) => {
+      const el = e.target;
+      if (cellIsTextInput(el)) {
+        if ((0, import_vuu_utils11.isCharacterKey)(e.key)) {
+          editInput(e);
+        } else if (e.key === "Enter") {
+          focusInput(e);
+        }
+      }
+    },
+    [editInput, focusInput]
+  );
+  const handleDoubleClick = (0, import_react13.useCallback)(
+    (e) => {
+      const el = e.target;
+      if (el.matches("input") || el.querySelector("input")) {
+        editInput(e);
+        e.stopPropagation();
+      }
+    },
+    [editInput]
+  );
+  const handleBlur = (0, import_react13.useCallback)(
+    (e) => {
+      const el = e.target;
+      el.removeEventListener("vuu-commit", commitHandler, true);
+    },
+    [commitHandler]
+  );
+  const handleFocus = (0, import_react13.useCallback)(
+    (e) => {
+      const el = e.target;
+      el.addEventListener("vuu-commit", commitHandler, true);
+    },
+    [commitHandler]
+  );
+  return {
+    onBlur: handleBlur,
+    onDoubleClick: handleDoubleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown
+  };
+};
+
+// src/useDataSource.ts
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react14 = require("react");
+
+// src/moving-window.ts
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var { SELECTED: SELECTED2 } = import_vuu_utils12.metadataKeys;
+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 import_vuu_utils12.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 ((0, import_vuu_utils12.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 isVuuFeatureInvocation = (action) => action.type === "vuu-link-created" || action.type === "vuu-link-removed";
+var useDataSource = ({
+  dataSource,
+  onFeatureInvocation,
+  onSizeChange,
+  onSubscribed,
+  range = import_vuu_utils13.NULL_RANGE,
+  renderBufferSize = 0
+}) => {
+  const [, forceUpdate] = (0, import_react14.useState)(null);
+  const data = (0, import_react14.useRef)([]);
+  const isMounted = (0, import_react14.useRef)(true);
+  const hasUpdated = (0, import_react14.useRef)(false);
+  const rangeRef = (0, import_react14.useRef)(range);
+  const dataWindow = (0, import_react14.useMemo)(
+    () => new MovingWindow((0, import_vuu_utils13.getFullRange)(range, renderBufferSize)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const setData = (0, import_react14.useCallback)(
+    (updates) => {
+      for (const row of updates) {
+        dataWindow.add(row);
+      }
+      data.current = dataWindow.data;
+      if (isMounted.current) {
+        forceUpdate({});
+      } else {
+      }
+    },
+    [dataWindow]
+  );
+  const datasourceMessageHandler = (0, import_react14.useCallback)(
+    (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 = (0, import_react14.useCallback)(() => {
+    return dataWindow.getSelectedRows();
+  }, [dataWindow]);
+  (0, import_react14.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]);
+  (0, import_react14.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: (0, import_vuu_utils13.getFullRange)(range, renderBufferSize) },
+        datasourceMessageHandler
+      );
+    }
+  }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
+  const setRange = (0, import_react14.useCallback)(
+    (range2) => {
+      if (!(0, import_vuu_utils13.rangesAreSame)(range2, rangeRef.current)) {
+        const fullRange = (0, import_vuu_utils13.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
+var import_react15 = require("react");
+var useInitialValue = (value) => {
+  const ref = (0, import_react15.useRef)(value);
+  return (0, import_react15.useMemo)(() => ref.current, []);
+};
+
+// src/useKeyboardNavigation.ts
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_core = require("@salt-ds/core");
+var import_react16 = require("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];
+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 = (0, import_react16.useRef)([-1, -1]);
+  const focusableCell = (0, import_react16.useRef)();
+  const activeCellPos = (0, import_react16.useRef)([-1, 0]);
+  const highlightedIndexRef = (0, import_react16.useRef)();
+  const [highlightedIndex, setHighlightedIdx] = (0, import_core.useControlled)({
+    controlled: highlightedIndexProp,
+    default: defaultHighlightedIndex,
+    name: "UseKeyboardNavigation"
+  });
+  highlightedIndexRef.current = highlightedIndex;
+  const setHighlightedIndex = (0, import_react16.useCallback)(
+    (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;
+    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 = (0, import_vuu_utils14.getIndexFromRowElement)(focusedRow);
+        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
+        return [rowIdx, colIdx];
+      }
+    }
+    return NULL_CELL_POS;
+  };
+  const focusCell = (0, import_react16.useCallback)(
+    (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");
+          }
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex: cellPos[0] });
+          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 = (0, import_react16.useCallback)(
+    (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 = (0, import_react16.useCallback)(
+    (key, [rowIdx, colIdx]) => new Promise((resolve) => {
+      let newRowIdx = rowIdx;
+      switch (key) {
+        case "PageDown": {
+          newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
+          if (newRowIdx !== rowIdx) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
+          }
+          break;
+        }
+        case "PageUp": {
+          newRowIdx = Math.max(0, rowIdx - viewportRowCount);
+          if (newRowIdx !== rowIdx) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
+          }
+          break;
+        }
+        case "Home": {
+          newRowIdx = 0;
+          if (newRowIdx !== rowIdx) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
+          }
+          break;
+        }
+        case "End": {
+          newRowIdx = rowCount - 1;
+          if (newRowIdx !== rowIdx) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
+          }
+          break;
+        }
+      }
+      setTimeout(() => {
+        resolve([newRowIdx, colIdx]);
+      }, 35);
+    }),
+    [requestScroll, rowCount, viewportRowCount]
+  );
+  const handleFocus = (0, import_react16.useCallback)(() => {
+    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 = (0, import_react16.useCallback)(
+    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 = (0, import_react16.useCallback)(
+    (rowIndex) => {
+      requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex });
+    },
+    [requestScroll]
+  );
+  const moveHighlightedRow = (0, import_react16.useCallback)(
+    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
+    ]
+  );
+  (0, import_react16.useEffect)(() => {
+    if (highlightedIndexProp !== void 0 && highlightedIndexProp !== -1) {
+      scrollRowIntoViewIfNecessary(highlightedIndexProp);
+    }
+  }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
+  const handleKeyDown = (0, import_react16.useCallback)(
+    (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 = (0, import_react16.useCallback)(
+    // 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 = (0, import_react16.useCallback)(() => {
+    setHighlightedIndex(-1);
+  }, [setHighlightedIndex]);
+  const handleMouseMove = (0, import_react16.useCallback)(
+    (evt) => {
+      const idx = closestRowIndex(evt.target);
+      if (idx !== -1 && idx !== highlightedIndexRef.current) {
+        setHighlightedIndex(idx);
+      }
+    },
+    [setHighlightedIndex]
+  );
+  const navigate = (0, import_react16.useCallback)(() => {
+    navigateChildItems("ArrowDown");
+  }, [navigateChildItems]);
+  const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
+  (0, import_react16.useEffect)(() => {
+    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
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_react17 = require("react");
+var { IDX: IDX2 } = import_vuu_utils15.metadataKeys;
+var NO_SELECTION = [];
+var defaultSelectionKeys = ["Enter", " "];
+var useSelection = ({
+  highlightedIndexRef,
+  selectionKeys = defaultSelectionKeys,
+  selectionModel,
+  onSelect,
+  onSelectionChange
+}) => {
+  selectionModel === "extended" || selectionModel === "checkbox";
+  const lastActiveRef = (0, import_react17.useRef)(-1);
+  const selectedRef = (0, import_react17.useRef)(NO_SELECTION);
+  const isSelectionEvent = (0, import_react17.useCallback)(
+    (evt) => selectionKeys.includes(evt.key),
+    [selectionKeys]
+  );
+  const handleRowClick = (0, import_react17.useCallback)(
+    (evt, row, rangeSelect, keepExistingSelection) => {
+      const { [IDX2]: idx } = row;
+      const { current: active } = lastActiveRef;
+      const { current: selected } = selectedRef;
+      const selectOperation = (0, import_vuu_utils15.isRowSelected)(row) ? import_vuu_utils15.deselectItem : import_vuu_utils15.selectItem;
+      const newSelected = selectOperation(
+        selectionModel,
+        selected,
+        idx,
+        rangeSelect,
+        keepExistingSelection,
+        active
+      );
+      selectedRef.current = newSelected;
+      lastActiveRef.current = idx;
+      onSelect == null ? void 0 : onSelect(selectOperation === import_vuu_utils15.selectItem ? row : null);
+      onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
+    },
+    [onSelect, onSelectionChange, selectionModel]
+  );
+  const handleKeyDown = (0, import_react17.useCallback)(
+    (e) => {
+      if (isSelectionEvent(e)) {
+        const { current: rowIndex } = highlightedIndexRef;
+        if (rowIndex !== void 0 && rowIndex !== -1) {
+          const rowEl = (0, import_vuu_utils15.getRowElementAtIndex)(e.target, rowIndex);
+          if (rowEl) {
+            (0, import_vuu_utils15.dispatchMouseEvent)(rowEl, "click");
+          }
+        }
+      }
+    },
+    [highlightedIndexRef, isSelectionEvent]
+  );
+  return {
+    onKeyDown: handleKeyDown,
+    onRowClick: handleRowClick
+  };
+};
+
+// src/useTableContextMenu.ts
+var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_react18 = require("react");
+var NO_ROWS = [];
+var useTableContextMenu = ({
+  columns,
+  data,
+  dataSource,
+  getSelectedRows
+}) => {
+  const [showContextMenu] = (0, import_vuu_popups2.useContextMenu)();
+  const onContextMenu = (0, import_react18.useCallback)(
+    (evt) => {
+      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 = (0, import_vuu_utils16.buildColumnMap)(columns);
+        const rowIndex = (0, import_vuu_utils16.getIndexFromRowElement)(rowEl);
+        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
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+var import_react19 = require("react");
+var { info } = (0, import_vuu_utils17.logger)("useTableModel");
+var DEFAULT_COLUMN_WIDTH = 100;
+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, dispatchTableModelAction] = (0, import_react19.useReducer)(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
+  const { columns, headings, tableConfig, ...tableAttributes } = state;
+  return {
+    columns,
+    dispatchTableModelAction,
+    headings,
+    tableAttributes,
+    tableConfig
+  };
+};
+function init({ dataSource, tableConfig }) {
+  const { columns, ...tableAttributes } = tableConfig;
+  const { config: dataSourceConfig, tableSchema } = dataSource;
+  const runtimeColumns = columns.filter((0, import_vuu_utils17.subscribedOnly)(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
+    columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema)
+  );
+  const maybePinnedColumns = runtimeColumns.some(import_vuu_utils17.isPinned) ? (0, import_vuu_utils17.sortPinnedColumns)(runtimeColumns) : runtimeColumns;
+  let state = {
+    columns: maybePinnedColumns,
+    headings: (0, import_vuu_utils17.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),
+    name,
+    label = (0, import_vuu_utils17.getColumnLabel)(column),
+    width = columnDefaultWidth,
+    ...rest
+  } = column;
+  const runtimeColumnWithDefaults = {
+    ...rest,
+    align,
+    CellRenderer: (0, import_vuu_utils17.getCellRenderer)(column),
+    HeaderCellContentRenderer: (0, import_vuu_utils17.getColumnHeaderContentRenderer)(column),
+    HeaderCellLabelRenderer: (0, import_vuu_utils17.getColumnHeaderLabelRenderer)(column),
+    clientSideEditValidationCheck: (0, import_vuu_utils17.hasValidationRules)(column.type) ? (0, import_vuu_ui_controls3.buildValidationChecker)(column.type.renderer.rules) : void 0,
+    index: index + 1,
+    label: getLabel(label, columnFormatHeader),
+    name,
+    originalIdx: index,
+    serverDataType,
+    valueFormatter: (0, import_vuu_utils17.getValueFormatter)(column, serverDataType),
+    width
+  };
+  if ((0, import_vuu_utils17.isGroupColumn)(runtimeColumnWithDefaults)) {
+    runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(
+      (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(col, index)
+    );
+  }
+  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 = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, pin });
+    columns = (0, import_vuu_utils17.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 = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, align });
+    }
+    if (typeof label === "string") {
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, label });
+    }
+    if (typeof resizing === "boolean") {
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, resizing });
+    }
+    if (typeof hidden === "boolean") {
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, hidden });
+    }
+    if (typeof width === "number") {
+      columns = (0, import_vuu_utils17.replaceColumn)(columns, { ...targetColumn, width });
+      const targetConfigColumn = tableConfig.columns.find(
+        (col) => col.name === column.name
+      );
+      if (targetConfigColumn) {
+        tableConfig = {
+          ...tableConfig,
+          columns: (0, import_vuu_utils17.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: (0, import_vuu_utils17.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+    };
+  }
+  if (hasSort) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils17.applySortToColumns)(result.columns, sort)
+    };
+  }
+  if (hasFilter) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils17.applyFilterToColumns)(result.columns, filter)
+    };
+  } else if (result.columns.some(import_vuu_utils17.isFilteredColumn)) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils17.stripFilterFromColumns)(result.columns)
+    };
+  }
+  return result;
+}
+
+// src/useTableScroll.ts
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_react20 = require("react");
+var SCROLL_MOVE_CHECK_THRESHOLD = 100;
+var HORIZONTAL_SCROLL_BUFFER = 200;
+var getMaxScroll = (container) => {
+  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+  return [scrollWidth - clientWidth, scrollHeight - clientHeight];
+};
+var getScrollDirection = (prevScrollPositions, scrollPos) => {
+  if (prevScrollPositions === void 0) {
+    return void 0;
+  } else {
+    const { scrollTop: prevTop } = prevScrollPositions;
+    return scrollPos > prevTop ? "fwd" : "bwd";
+  }
+};
+var getPctScroll = (container, currentScrollPos) => {
+  const {
+    clientHeight,
+    clientWidth,
+    scrollHeight,
+    scrollLeft,
+    scrollTop,
+    scrollWidth
+  } = container;
+  const maxScrollLeft = scrollWidth - clientWidth;
+  const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
+  const maxScrollTop = scrollHeight - clientHeight;
+  let pctScrollTop = scrollTop / (scrollHeight - clientHeight);
+  const scrollDirection = getScrollDirection(currentScrollPos, scrollTop);
+  if (scrollDirection === "fwd" && pctScrollTop > 0.99) {
+    pctScrollTop = 1;
+  } else if (scrollDirection === "bwd" && pctScrollTop < 0.02) {
+    pctScrollTop = 0;
+  }
+  return [
+    scrollLeft,
+    pctScrollLeft,
+    maxScrollLeft,
+    scrollTop,
+    pctScrollTop,
+    maxScrollTop
+  ];
+};
+var noScrolling = {
+  scrollToIndex: () => void 0,
+  scrollToKey: () => void 0
+};
+var useCallbackRef = ({
+  onAttach,
+  onDetach
+}) => {
+  const ref = (0, import_react20.useRef)(null);
+  const callbackRef = (0, import_react20.useCallback)(
+    (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 = ({
+  columns,
+  getRowAtPosition,
+  onHorizontalScroll,
+  onVerticalScroll,
+  onVerticalScrollInSitu,
+  rowHeight,
+  scrollingApiRef,
+  setRange,
+  viewportMeasurements
+}) => {
+  const firstRowRef = (0, import_react20.useRef)(0);
+  const rowHeightRef = (0, import_react20.useRef)(rowHeight);
+  const contentContainerScrolledRef = (0, import_react20.useRef)(false);
+  const contentContainerPosRef = (0, import_react20.useRef)({
+    scrollTop: 0,
+    scrollLeft: 0
+  });
+  const scrollbarContainerScrolledRef = (0, import_react20.useRef)(false);
+  const scrollbarContainerPosRef = (0, import_react20.useRef)({
+    scrollTop: 0,
+    scrollLeft: 0
+  });
+  const scrollbarContainerRef = (0, import_react20.useRef)(null);
+  const contentContainerRef = (0, import_react20.useRef)(null);
+  const lastHorizontalScrollCheckPoint = (0, import_react20.useRef)(0);
+  const {
+    appliedPageSize,
+    isVirtualScroll,
+    rowCount: viewportRowCount,
+    totalHeaderHeight,
+    viewportWidth
+  } = viewportMeasurements;
+  const columnsWithinViewportRef = (0, import_react20.useRef)([]);
+  const [, forceRefresh] = (0, import_react20.useState)({});
+  const preSpanRef = (0, import_react20.useRef)(0);
+  (0, import_react20.useMemo)(() => {
+    const [visibleColumns, offset] = (0, import_vuu_utils18.getColumnsInViewport)(
+      columns,
+      contentContainerPosRef.current.scrollLeft,
+      contentContainerPosRef.current.scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
+    );
+    preSpanRef.current = offset;
+    columnsWithinViewportRef.current = visibleColumns;
+  }, [viewportWidth, columns]);
+  const handleHorizontalScroll = (0, import_react20.useCallback)(
+    (scrollLeft) => {
+      contentContainerPosRef.current.scrollLeft = scrollLeft;
+      onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
+      if (Math.abs(scrollLeft - lastHorizontalScrollCheckPoint.current) > SCROLL_MOVE_CHECK_THRESHOLD) {
+        lastHorizontalScrollCheckPoint.current = scrollLeft;
+        const [visibleColumns, pre] = (0, import_vuu_utils18.getColumnsInViewport)(
+          columns,
+          scrollLeft,
+          scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER
+        );
+        if ((0, import_vuu_utils18.itemsChanged)(columnsWithinViewportRef.current, visibleColumns)) {
+          preSpanRef.current = pre;
+          columnsWithinViewportRef.current = visibleColumns;
+          forceRefresh({});
+        }
+      }
+    },
+    [columns, onHorizontalScroll, viewportWidth]
+  );
+  const handleVerticalScroll = (0, import_react20.useCallback)(
+    (scrollTop, pctScrollTop) => {
+      contentContainerPosRef.current.scrollTop = scrollTop;
+      onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
+      const firstRow = getRowAtPosition(scrollTop);
+      if (firstRow !== firstRowRef.current) {
+        firstRowRef.current = firstRow;
+        setRange({ from: firstRow, to: firstRow + viewportRowCount });
+      }
+      onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(0);
+    },
+    [
+      getRowAtPosition,
+      onVerticalScroll,
+      onVerticalScrollInSitu,
+      setRange,
+      viewportRowCount
+    ]
+  );
+  const handleScrollbarContainerScroll = (0, import_react20.useCallback)(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: contentContainerScrolled } = contentContainerScrolledRef;
+    const { current: scrollPos } = scrollbarContainerPosRef;
+    if (contentContainerScrolled) {
+      contentContainerScrolledRef.current = false;
+    } else if (contentContainer && scrollbarContainer) {
+      scrollbarContainerScrolledRef.current = true;
+      const [scrollLeft, pctScrollLeft, , scrollTop, pctScrollTop] = getPctScroll(scrollbarContainer, scrollPos);
+      scrollPos.scrollLeft = scrollLeft;
+      scrollPos.scrollTop = scrollTop;
+      const [maxScrollLeft, maxScrollTop] = getMaxScroll(scrollbarContainer);
+      const contentScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      const contentScrollTop = pctScrollTop * maxScrollTop;
+      contentContainer.scrollTo({
+        left: contentScrollLeft,
+        top: contentScrollTop,
+        behavior: "auto"
+      });
+    }
+    onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(0);
+  }, [onVerticalScrollInSitu]);
+  const handleContentContainerScroll = (0, import_react20.useCallback)(() => {
+    const { current: scrollbarContainerScrolled } = scrollbarContainerScrolledRef;
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: scrollPos } = contentContainerPosRef;
+    if (contentContainer && scrollbarContainer) {
+      const [
+        scrollLeft,
+        pctScrollLeft,
+        maxScrollLeft,
+        scrollTop,
+        pctScrollTop,
+        maxScrollTop
+      ] = getPctScroll(contentContainer);
+      contentContainerScrolledRef.current = true;
+      if (scrollbarContainerScrolled) {
+        scrollbarContainerScrolledRef.current = false;
+      } else {
+        scrollbarContainer.scrollLeft = Math.round(
+          pctScrollLeft * maxScrollLeft
+        );
+        scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;
+      }
+      if (scrollPos.scrollTop !== scrollTop) {
+        handleVerticalScroll(scrollTop, pctScrollTop);
+      }
+      if (scrollPos.scrollLeft !== scrollLeft) {
+        handleHorizontalScroll(scrollLeft);
+      }
+    }
+  }, [handleVerticalScroll, handleHorizontalScroll]);
+  const handleAttachScrollbarContainer = (0, import_react20.useCallback)(
+    (el) => {
+      scrollbarContainerRef.current = el;
+      el.addEventListener("scroll", handleScrollbarContainerScroll, {
+        passive: true
+      });
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleDetachScrollbarContainer = (0, import_react20.useCallback)(
+    (el) => {
+      scrollbarContainerRef.current = null;
+      el.removeEventListener("scroll", handleScrollbarContainerScroll);
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleAttachContentContainer = (0, import_react20.useCallback)(
+    (el) => {
+      contentContainerRef.current = el;
+      el.addEventListener("scroll", handleContentContainerScroll, {
+        passive: true
+      });
+    },
+    [handleContentContainerScroll]
+  );
+  const handleDetachContentContainer = (0, import_react20.useCallback)(
+    (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 = (0, import_react20.useCallback)(
+    (scrollRequest) => {
+      const { current: contentContainer } = contentContainerRef;
+      if (contentContainer) {
+        const [maxScrollLeft, maxScrollTop] = getMaxScroll(contentContainer);
+        const { scrollLeft, scrollTop } = contentContainer;
+        contentContainerScrolledRef.current = false;
+        if (scrollRequest.type === "scroll-row") {
+          const activeRow = (0, import_vuu_utils18.getRowElementAtIndex)(
+            contentContainer,
+            scrollRequest.rowIndex
+          );
+          if (activeRow !== null) {
+            const [direction, distance] = howFarIsRowOutsideViewport(
+              activeRow,
+              totalHeaderHeight
+            );
+            console.log(`outside viewport ? ${direction} ${distance}`);
+            if (direction && distance) {
+              if (isVirtualScroll) {
+                const offset = direction === "down" ? 1 : -1;
+                onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(offset);
+                const firstRow = firstRowRef.current + offset;
+                firstRowRef.current = firstRow;
+                setRange({
+                  from: firstRow,
+                  to: firstRow + viewportRowCount
+                });
+              } else {
+                let newScrollLeft = scrollLeft;
+                let newScrollTop = scrollTop;
+                if (direction === "up" || direction === "down") {
+                  newScrollTop = Math.min(
+                    Math.max(0, scrollTop + distance),
+                    maxScrollTop
+                  );
+                } else {
+                  newScrollLeft = Math.min(
+                    Math.max(0, scrollLeft + distance),
+                    maxScrollLeft
+                  );
+                }
+                contentContainer.scrollTo({
+                  top: newScrollTop,
+                  left: newScrollLeft,
+                  behavior: "smooth"
+                });
+              }
+            }
+          }
+        } else if (scrollRequest.type === "scroll-page") {
+          const { direction } = scrollRequest;
+          if (isVirtualScroll) {
+            const offset = direction === "down" ? viewportRowCount : -viewportRowCount;
+            onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(offset);
+            const firstRow = firstRowRef.current + offset;
+            firstRowRef.current = firstRow;
+            setRange({ from: firstRow, to: firstRow + viewportRowCount });
+          } else {
+            const scrollBy = direction === "down" ? appliedPageSize : -appliedPageSize;
+            const newScrollTop = Math.min(
+              Math.max(0, scrollTop + scrollBy),
+              maxScrollTop
+            );
+            contentContainer.scrollTo({
+              top: newScrollTop,
+              left: scrollLeft,
+              behavior: "auto"
+            });
+          }
+        } else if (scrollRequest.type === "scroll-end") {
+          const { direction } = scrollRequest;
+          const scrollTo = direction === "end" ? maxScrollTop : 0;
+          contentContainer.scrollTo({
+            top: scrollTo,
+            left: contentContainer.scrollLeft,
+            behavior: "auto"
+          });
+        }
+      }
+    },
+    [
+      appliedPageSize,
+      isVirtualScroll,
+      onVerticalScrollInSitu,
+      setRange,
+      totalHeaderHeight,
+      viewportRowCount
+    ]
+  );
+  const scrollHandles = (0, import_react20.useMemo)(
+    // TODO not complete yet
+    () => ({
+      scrollToIndex: (rowIndex) => {
+        if (scrollbarContainerRef.current) {
+          const scrollPos = (rowIndex - 30) * 20;
+          scrollbarContainerRef.current.scrollTop = scrollPos;
+        }
+      },
+      scrollToKey: (rowKey) => {
+        console.log(`scrollToKey ${rowKey}`);
+      }
+    }),
+    []
+  );
+  (0, import_react20.useImperativeHandle)(
+    scrollingApiRef,
+    () => {
+      if (scrollbarContainerRef.current) {
+        return scrollHandles;
+      } else {
+        return noScrolling;
+      }
+    },
+    [scrollHandles]
+  );
+  (0, import_react20.useEffect)(() => {
+    if (rowHeight !== rowHeightRef.current) {
+      rowHeightRef.current = rowHeight;
+      if (contentContainerPosRef.current.scrollTop > 0) {
+        if (contentContainerRef.current) {
+          contentContainerRef.current.scrollTop = 0;
+        }
+      }
+    } else {
+      const { current: from } = firstRowRef;
+      const rowRange = { from, to: from + viewportRowCount };
+      setRange(rowRange);
+    }
+  }, [rowHeight, setRange, viewportRowCount]);
+  return {
+    columnsWithinViewport: columnsWithinViewportRef.current,
+    /** Ref to be assigned to ScrollbarContainer */
+    scrollbarContainerRef: scrollbarContainerCallbackRef,
+    /** Ref to be assigned to ContentContainer */
+    contentContainerRef: contentContainerCallbackRef,
+    /** Scroll the table  */
+    requestScroll,
+    /** number of leading columns not rendered because of virtualization  */
+    virtualColSpan: preSpanRef.current
+  };
+};
+
+// src/useTableViewport.ts
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_react21 = require("react");
+var MAX_PIXEL_HEIGHT = 1e7;
+var UNMEASURED_VIEWPORT = {
+  appliedPageSize: 0,
+  contentHeight: 0,
+  contentWidth: 0,
+  getRowAtPosition: () => -1,
+  getRowOffset: () => -1,
+  horizontalScrollbarHeight: 0,
+  isVirtualScroll: false,
+  pinnedWidthLeft: 0,
+  pinnedWidthRight: 0,
+  rowCount: 0,
+  setInSituRowOffset: () => void 0,
+  setScrollTop: () => void 0,
+  totalHeaderHeight: 0,
+  verticalScrollbarWidth: 0,
+  viewportBodyHeight: 0,
+  viewportWidth: 0
+};
+var useTableViewport = ({
+  columns,
+  headerHeight,
+  headings,
+  rowCount,
+  rowHeight,
+  selectionEndSize = 4,
+  size
+}) => {
+  const inSituRowOffsetRef = (0, import_react21.useRef)(0);
+  const pctScrollTopRef = (0, import_react21.useRef)(0);
+  const pixelContentHeight = Math.min(rowHeight * rowCount, MAX_PIXEL_HEIGHT);
+  const virtualContentHeight = rowCount * rowHeight;
+  const virtualisedExtent = virtualContentHeight - pixelContentHeight;
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react21.useMemo)(
+    () => (0, import_vuu_utils19.measurePinnedColumns)(columns, selectionEndSize),
+    [columns, selectionEndSize]
+  );
+  const totalHeaderHeightRef = (0, import_react21.useRef)(headerHeight);
+  (0, import_react21.useMemo)(() => {
+    totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
+  }, [headerHeight, headings.length]);
+  const [getRowOffset, getRowAtPosition, isVirtualScroll] = (0, import_react21.useMemo)(() => {
+    if (virtualisedExtent) {
+      const [_getRowOffset, getRowAtPosition2, _isVirtual] = (0, import_vuu_utils19.virtualRowPositioning)(rowHeight, virtualisedExtent, pctScrollTopRef);
+      const getOffset = (row) => {
+        return _getRowOffset(row, inSituRowOffsetRef.current);
+      };
+      return [getOffset, getRowAtPosition2, _isVirtual];
+    } else {
+      return (0, import_vuu_utils19.actualRowPositioning)(rowHeight);
+    }
+  }, [virtualisedExtent, rowHeight]);
+  const setScrollTop = (0, import_react21.useCallback)((_, scrollPct) => {
+    pctScrollTopRef.current = scrollPct;
+  }, []);
+  const setInSituRowOffset = (0, import_react21.useCallback)((rowIndexOffset) => {
+    if (rowIndexOffset === 0) {
+      inSituRowOffsetRef.current = 0;
+    } else {
+      inSituRowOffsetRef.current = Math.max(
+        0,
+        inSituRowOffsetRef.current + rowIndexOffset
+      );
+    }
+  }, []);
+  return (0, import_react21.useMemo)(() => {
+    if (size) {
+      const { current: totalHeaderHeight } = totalHeaderHeightRef;
+      const scrollbarSize = 15;
+      const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
+      const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
+      const visibleRows = (size.height - headerHeight) / rowHeight;
+      const count = Number.isInteger(visibleRows) ? visibleRows : Math.ceil(visibleRows);
+      const viewportBodyHeight = size.height - totalHeaderHeight;
+      const verticalScrollbarWidth = pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
+      const viewportWidth = size.width;
+      return {
+        appliedPageSize,
+        contentHeight: pixelContentHeight,
+        contentWidth,
+        getRowAtPosition,
+        getRowOffset,
+        isVirtualScroll,
+        horizontalScrollbarHeight,
+        pinnedWidthLeft,
+        pinnedWidthRight,
+        rowCount: count,
+        setInSituRowOffset,
+        setScrollTop,
+        totalHeaderHeight,
+        verticalScrollbarWidth,
+        viewportBodyHeight,
+        viewportWidth
+      };
+    } else {
+      return UNMEASURED_VIEWPORT;
+    }
+  }, [
+    getRowAtPosition,
+    getRowOffset,
+    headerHeight,
+    isVirtualScroll,
+    pinnedWidthLeft,
+    unpinnedWidth,
+    pinnedWidthRight,
+    pixelContentHeight,
+    rowHeight,
+    setInSituRowOffset,
+    setScrollTop,
+    size,
+    virtualContentHeight
+  ]);
+};
+
+// src/useTableAndColumnSettings.ts
+var import_vuu_layout = require("@vuu-ui/vuu-layout");
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_react22 = require("react");
+var useTableAndColumnSettings = ({
+  availableColumns: availableColumnsProps,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  onDataSourceConfigChange,
+  tableConfig
+}) => {
+  const dispatchLayoutAction = (0, import_vuu_layout.useLayoutProviderDispatch)();
+  const showTableSettingsRef = (0, import_react22.useRef)();
+  const [availableColumns, setAvailableColumns] = (0, import_react22.useState)(
+    availableColumnsProps
+  );
+  const showContextPanel = (0, import_react22.useCallback)(
+    (componentType, title, props) => {
+      dispatchLayoutAction({
+        type: "set-props",
+        path: "#context-panel",
+        props: {
+          expanded: true,
+          content: {
+            type: componentType,
+            props
+          },
+          title
+        }
+      });
+    },
+    [dispatchLayoutAction]
+  );
+  const handleCancelCreateColumn = (0, import_react22.useCallback)(() => {
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
+    });
+  }, []);
+  const handleCreateCalculatedColumn = (0, import_react22.useCallback)(
+    (column) => {
+      const newAvailableColumns = availableColumns.concat({
+        name: column.name,
+        serverDataType: (0, import_vuu_utils20.getCalculatedColumnType)(column)
+      });
+      setAvailableColumns(newAvailableColumns);
+      onAvailableColumnsChange == null ? void 0 : onAvailableColumnsChange(newAvailableColumns);
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
+      });
+      onCreateCalculatedColumn(column);
+    },
+    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
+  );
+  const showColumnSettingsPanel = (0, import_react22.useCallback)(
+    (action) => {
+      showContextPanel("ColumnSettings", "Column Settings", {
+        column: action.column,
+        onCancelCreateColumn: handleCancelCreateColumn,
+        onConfigChange,
+        onCreateCalculatedColumn: handleCreateCalculatedColumn,
+        tableConfig,
+        vuuTable: action.vuuTable
+      });
+    },
+    [
+      handleCancelCreateColumn,
+      handleCreateCalculatedColumn,
+      onConfigChange,
+      showContextPanel,
+      tableConfig
+    ]
+  );
+  const handleAddCalculatedColumn = (0, import_react22.useCallback)(() => {
+    showColumnSettingsPanel({
+      column: {
+        name: "::",
+        serverDataType: "string"
+      },
+      type: "columnSettings",
+      vuuTable: { module: "SIMUL", table: "instruments" }
+    });
+  }, [showColumnSettingsPanel]);
+  const handleNavigateToColumn = (0, import_react22.useCallback)(
+    (columnName) => {
+      const column = tableConfig.columns.find((c) => c.name === columnName);
+      if (column) {
+        showColumnSettingsPanel({
+          type: "columnSettings",
+          column,
+          //TODO where do we get this from
+          vuuTable: { module: "SIMUL", table: "instruments" }
+        });
+      }
+    },
+    [showColumnSettingsPanel, tableConfig.columns]
+  );
+  showTableSettingsRef.current = (0, import_react22.useCallback)(() => {
+    showContextPanel("TableSettings", "DataGrid Settings", {
+      availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
+        name,
+        serverDataType
+      })),
+      onAddCalculatedColumn: handleAddCalculatedColumn,
+      onConfigChange,
+      onDataSourceConfigChange,
+      onNavigateToColumn: handleNavigateToColumn,
+      tableConfig
+    });
+  }, [
+    availableColumns,
+    handleAddCalculatedColumn,
+    handleNavigateToColumn,
+    onConfigChange,
+    onDataSourceConfigChange,
+    showContextPanel,
+    tableConfig
+  ]);
+  return {
+    showColumnSettingsPanel,
+    showTableSettingsPanel: showTableSettingsRef.current
+  };
+};
+
+// src/useRowClassNameGenerators.ts
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_react23 = require("react");
+var createClassNameGenerator = (ids) => {
+  const functions = [];
+  ids == null ? void 0 : ids.forEach((id) => {
+    const fn = (0, import_vuu_utils21.getRowClassNameGenerator)(id);
+    if (fn) {
+      functions.push(fn.fn);
+    }
+  });
+  return (row, columnMap) => {
+    const classNames = [];
+    functions == null ? void 0 : functions.forEach((fn) => {
+      const className = fn(row, columnMap);
+      if (className) {
+        classNames.push(className);
+      }
+    });
+    return classNames.join(" ");
+  };
+};
+var useRowClassNameGenerators = ({
+  rowClassNameGenerators
+}) => {
+  return (0, import_react23.useMemo)(() => {
+    return createClassNameGenerator(rowClassNameGenerators);
+  }, [rowClassNameGenerators]);
+};
+
+// src/useTable.ts
+var stripInternalProperties = (tableConfig) => {
+  return tableConfig;
+};
+var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils22.metadataKeys;
+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,
+  scrollingApiRef,
+  selectionModel,
+  size
+}) => {
+  const [rowCount, setRowCount] = (0, import_react24.useState)(dataSource.size);
+  if (dataSource === void 0) {
+    throw Error("no data source provided to Vuu Table");
+  }
+  const rowClassNameGenerator = useRowClassNameGenerators(config);
+  const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls4.useDragDrop : useNullDragDrop;
+  const menuBuilder = (0, import_react24.useMemo)(
+    () => buildContextMenuDescriptors(dataSource),
+    [dataSource]
+  );
+  const onDataRowcountChange = (0, import_react24.useCallback)((size2) => {
+    setRowCount(size2);
+  }, []);
+  const {
+    columns,
+    dispatchTableModelAction,
+    headings,
+    tableAttributes,
+    tableConfig
+  } = useTableModel(config, dataSource);
+  (0, import_vuu_utils22.useLayoutEffectSkipFirst)(() => {
+    dispatchTableModelAction({
+      type: "init",
+      tableConfig: config,
+      dataSource
+    });
+  }, [config, dataSource, dispatchTableModelAction]);
+  const applyTableConfigChange = (0, import_react24.useCallback)(
+    (config2) => {
+      dispatchTableModelAction({
+        type: "init",
+        tableConfig: config2,
+        dataSource
+      });
+      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(config2));
+    },
+    [dataSource, dispatchTableModelAction, onConfigChange]
+  );
+  const columnMap = (0, import_react24.useMemo)(
+    () => (0, import_vuu_utils22.buildColumnMap)(dataSource.columns),
+    [dataSource.columns]
+  );
+  const onSubscribed = (0, import_react24.useCallback)(
+    ({ tableSchema }) => {
+      if (tableSchema) {
+        dispatchTableModelAction({
+          type: "setTableSchema",
+          tableSchema
+        });
+      } else {
+        console.log("subscription message with no schema");
+      }
+    },
+    [dispatchTableModelAction]
+  );
+  const {
+    getRowAtPosition,
+    getRowOffset,
+    setInSituRowOffset: viewportHookSetInSituRowOffset,
+    setScrollTop: viewportHookSetScrollTop,
+    ...viewportMeasurements
+  } = useTableViewport({
+    columns,
+    headerHeight,
+    headings,
+    rowCount,
+    rowHeight,
+    size
+  });
+  const initialRange = useInitialValue({
+    from: 0,
+    to: viewportMeasurements.rowCount
+  });
+  const { data, dataRef, getSelectedRows, range, setRange } = useDataSource({
+    dataSource,
+    // We need to factor this out of Table
+    onFeatureInvocation,
+    renderBufferSize,
+    onSizeChange: onDataRowcountChange,
+    onSubscribed,
+    range: initialRange
+  });
+  const { requestScroll, ...scrollProps } = useTableScroll({
+    columns,
+    getRowAtPosition,
+    rowHeight,
+    scrollingApiRef,
+    setRange,
+    onVerticalScroll: viewportHookSetScrollTop,
+    onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
+    viewportMeasurements
+  });
+  const handleConfigEditedInSettingsPanel = (0, import_react24.useCallback)(
+    (tableConfig2) => {
+      dispatchTableModelAction({
+        type: "init",
+        tableConfig: tableConfig2,
+        dataSource
+      });
+      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(tableConfig2));
+    },
+    [dataSource, dispatchTableModelAction, onConfigChange]
+  );
+  const handleDataSourceConfigChanged = (0, import_react24.useCallback)(
+    (dataSourceConfig) => {
+      dataSource.config = {
+        ...dataSource.config,
+        ...dataSourceConfig
+      };
+    },
+    [dataSource]
+  );
+  (0, import_react24.useEffect)(() => {
+    dataSource.on("config", (config2, confirmed, changes) => {
+      const scrollSensitiveChanges = (changes == null ? void 0 : changes.filterChanged) || (changes == null ? void 0 : changes.groupByChanged);
+      if (scrollSensitiveChanges && dataSource.range.from > 0) {
+        requestScroll({
+          type: "scroll-end",
+          direction: "home"
+        });
+      }
+      dispatchTableModelAction({
+        type: "tableConfig",
+        ...config2,
+        confirmed
+      });
+    });
+  }, [dataSource, dispatchTableModelAction, requestScroll]);
+  const handleCreateCalculatedColumn = (0, import_react24.useCallback)(
+    (column) => {
+      dataSource.columns = dataSource.columns.concat(column.name);
+      applyTableConfigChange(addColumn(tableConfig, column));
+    },
+    [dataSource, tableConfig, applyTableConfigChange]
+  );
+  const hideColumns2 = (0, import_react24.useCallback)(
+    (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 = (0, import_react24.useCallback)(
+    (action) => {
+      applyTableConfigChange({
+        ...tableConfig,
+        columns: (0, import_vuu_utils22.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 = (0, import_react24.useCallback)(
+    (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:
+            dispatchTableModelAction(action);
+        }
+      }
+    },
+    [
+      dispatchTableModelAction,
+      hideColumns2,
+      pinColumn3,
+      showColumnSettingsPanel,
+      showTableSettingsPanel
+    ]
+  );
+  const handleContextMenuAction = useHandleTableContextMenu({
+    dataSource,
+    onPersistentColumnOperation
+  });
+  const handleSort = (0, import_react24.useCallback)(
+    (column, extendSort = false, sortType) => {
+      if (dataSource) {
+        dataSource.sort = (0, import_vuu_utils22.applySort)(
+          dataSource.sort,
+          column,
+          extendSort,
+          sortType
+        );
+      }
+    },
+    [dataSource]
+  );
+  const resizeCells = (0, import_react24.useRef)();
+  const onResizeColumn = (0, import_react24.useCallback)(
+    (phase, columnName, width) => {
+      var _a, _b, _c;
+      const column = columns.find((column2) => column2.name === columnName);
+      if (column) {
+        if (phase === "resize") {
+          (_a = resizeCells.current) == null ? void 0 : _a.forEach((cell) => {
+            cell.style.width = `${width}px`;
+          });
+        } else if (phase === "end") {
+          resizeCells.current = void 0;
+          if ((0, import_vuu_utils22.isValidNumber)(width)) {
+            dispatchTableModelAction({
+              type: "resizeColumn",
+              phase,
+              column,
+              width
+            });
+            onConfigChange == null ? void 0 : onConfigChange(
+              stripInternalProperties(
+                updateTableConfig(tableConfig, {
+                  type: "col-size",
+                  column,
+                  width
+                })
+              )
+            );
+          }
+        } else {
+          const byColIndex = `[aria-colindex='${column.index}']`;
+          resizeCells.current = Array.from(
+            (_c = (_b = containerRef.current) == null ? void 0 : _b.querySelectorAll(
+              `.vuuTableCell${byColIndex},.vuuTableHeaderCell${byColIndex}`
+            )) != null ? _c : []
+          );
+          dispatchTableModelAction({
+            type: "resizeColumn",
+            phase,
+            column,
+            width
+          });
+        }
+      } else {
+        throw Error(
+          `useDataTable.handleColumnResize, column ${columnName} not found`
+        );
+      }
+    },
+    [
+      columns,
+      dispatchTableModelAction,
+      onConfigChange,
+      tableConfig,
+      containerRef
+    ]
+  );
+  const onToggleGroup = (0, import_react24.useCallback)(
+    (row, column) => {
+      var _a, _b;
+      const isJson = (0, import_vuu_utils22.isJsonGroup)(column, row, columnMap);
+      const key = row[KEY];
+      if (row[IS_EXPANDED2]) {
+        dataSource.closeTreeNode(key, true);
+        if (isJson) {
+          const idx = columns.indexOf(column);
+          const rows = (_a = dataSource.getRowsAtDepth) == null ? void 0 : _a.call(dataSource, idx + 1);
+          if (rows && !rows.some((row2) => row2[IS_EXPANDED2] || row2[IS_LEAF2])) {
+            dispatchTableModelAction({
+              type: "hideColumns",
+              columns: columns.slice(idx + 2)
+            });
+          }
+        }
+      } else {
+        dataSource.openTreeNode(key);
+        if (isJson) {
+          const childRows = (_b = dataSource.getChildRows) == null ? void 0 : _b.call(dataSource, key);
+          const idx = columns.indexOf(column) + 1;
+          const columnsToShow = [columns[idx]];
+          if (childRows && childRows.some((row2) => row2[IS_LEAF2])) {
+            columnsToShow.push(columns[idx + 1]);
+          }
+          if (columnsToShow.some((col) => col.hidden)) {
+            dispatchTableModelAction({
+              type: "showColumns",
+              columns: columnsToShow
+            });
+          }
+        }
+      }
+    },
+    [columnMap, columns, dataSource, dispatchTableModelAction]
+  );
+  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 = (0, import_react24.useCallback)(
+    (e) => {
+      navigationFocus();
+      if (!e.defaultPrevented) {
+        editingFocus(e);
+      }
+    },
+    [editingFocus, navigationFocus]
+  );
+  const onContextMenu = useTableContextMenu({
+    columns,
+    data,
+    dataSource,
+    getSelectedRows
+  });
+  const onMoveGroupColumn = (0, import_react24.useCallback)(
+    (columns2) => {
+      dataSource.groupBy = columns2.map((col) => col.name);
+    },
+    [dataSource]
+  );
+  const onRemoveGroupColumn = (0, import_react24.useCallback)(
+    (column) => {
+      if ((0, import_vuu_utils22.isGroupColumn)(column)) {
+        dataSource.groupBy = [];
+      } else {
+        if (dataSource && dataSource.groupBy.includes(column.name)) {
+          dataSource.groupBy = dataSource.groupBy.filter(
+            (columnName) => columnName !== column.name
+          );
+        }
+      }
+    },
+    [dataSource]
+  );
+  const handleSelectionChange = (0, import_react24.useCallback)(
+    (selected) => {
+      dataSource.select(selected);
+      onSelectionChange == null ? void 0 : onSelectionChange(selected);
+    },
+    [dataSource, onSelectionChange]
+  );
+  const handleSelect = (0, import_react24.useCallback)(
+    (row) => {
+      if (onSelect) {
+        onSelect(row === null ? null : (0, import_vuu_utils22.asDataSourceRowObject)(row, columnMap));
+      }
+    },
+    [columnMap, onSelect]
+  );
+  const {
+    onKeyDown: selectionHookKeyDown,
+    onRowClick: selectionHookOnRowClick
+  } = useSelection({
+    highlightedIndexRef,
+    onSelect: handleSelect,
+    onSelectionChange: handleSelectionChange,
+    selectionModel
+  });
+  const handleRowClick = (0, import_react24.useCallback)(
+    (evt, row, rangeSelect, keepExistingSelection) => {
+      selectionHookOnRowClick(evt, row, rangeSelect, keepExistingSelection);
+      onRowClickProp == null ? void 0 : onRowClickProp(evt, (0, import_vuu_utils22.asDataSourceRowObject)(row, columnMap));
+    },
+    [columnMap, onRowClickProp, selectionHookOnRowClick]
+  );
+  const handleKeyDown = (0, import_react24.useCallback)(
+    (e) => {
+      navigationKeyDown(e);
+      if (!e.defaultPrevented) {
+        editingKeyDown(e);
+      }
+      if (!e.defaultPrevented) {
+        selectionHookKeyDown(e);
+      }
+    },
+    [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
+  );
+  const onMoveColumn = (0, import_react24.useCallback)(
+    (columns2) => {
+      const newTableConfig = {
+        ...tableConfig,
+        columns: columns2
+      };
+      dispatchTableModelAction({
+        type: "init",
+        tableConfig: newTableConfig,
+        dataSource
+      });
+      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(newTableConfig));
+    },
+    [dataSource, dispatchTableModelAction, onConfigChange, tableConfig]
+  );
+  const handleDropRow = (0, import_react24.useCallback)(
+    (dragDropState) => {
+      onDrop == null ? void 0 : onDrop(dragDropState);
+    },
+    [onDrop]
+  );
+  const handleDataEdited = (0, import_react24.useCallback)(
+    async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
+    [dataSource]
+  );
+  const handleDragStartRow = (0, import_react24.useCallback)(
+    (dragDropState) => {
+      const { initialDragElement } = dragDropState;
+      const rowIndex = (0, import_vuu_utils22.getIndexFromRowElement)(initialDragElement);
+      const row = dataRef.current.find((row2) => row2[0] === rowIndex);
+      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,
+    "aria-rowcount": dataSource.size,
+    rowClassNameGenerator,
+    draggableRow,
+    onBlur: editingBlur,
+    onDoubleClick: editingDoubleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    onMouseDown: rowDragMouseDown,
+    columnMap,
+    columns,
+    data,
+    getRowOffset,
+    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/useRowHeight.ts
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_react25 = require("react");
+var useRowHeight = ({
+  rowHeight: rowHeightProp = 0
+}) => {
+  const [rowHeight, setRowHeight] = (0, import_react25.useState)(rowHeightProp);
+  const heightRef = (0, import_react25.useRef)(rowHeight);
+  const resizeObserver = (0, import_react25.useMemo)(() => {
+    return new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const [{ blockSize: measuredSize }] = entry.borderBoxSize;
+        const newHeight = Math.round(measuredSize);
+        if ((0, import_vuu_utils23.isValidNumber)(newHeight) && heightRef.current !== newHeight) {
+          heightRef.current = newHeight;
+          setRowHeight(newHeight);
+        }
+      }
+    });
+  }, []);
+  const rowRef = (0, import_react25.useCallback)(
+    (el) => {
+      if (el) {
+        if (rowHeightProp === 0) {
+          const { height } = el.getBoundingClientRect();
+          console.log({ boundingClientHeight: height });
+          console.log(`measured rowHeight = ${height} (${rowHeightProp})`);
+          resizeObserver.observe(el);
+          setRowHeight(height);
+        }
+      } else {
+        resizeObserver.disconnect();
+      }
+    },
+    [resizeObserver, rowHeightProp]
+  );
+  return { rowHeight, rowRef };
+};
+
+// src/Table.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var classBase8 = "vuuTable";
+var { IDX: IDX3, RENDER_IDX } = import_vuu_utils24.metadataKeys;
+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 = 5,
+  rowHeight,
+  scrollingApiRef,
+  selectionModel = "extended",
+  showColumnHeaders = true,
+  headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,
+  size
+}) => {
+  const id = (0, import_vuu_utils24.useId)(idProp);
+  const {
+    columnMap,
+    columns,
+    data,
+    draggableRow,
+    getRowOffset,
+    handleContextMenuAction,
+    headings,
+    highlightedIndex,
+    menuBuilder,
+    onDataEdited,
+    onMoveColumn,
+    onMoveGroupColumn,
+    onRemoveGroupColumn,
+    onResizeColumn,
+    onRowClick,
+    onSortColumn,
+    onToggleGroup,
+    rowClassNameGenerator,
+    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: Math.max(5, renderBufferSize),
+    rowHeight,
+    scrollingApiRef,
+    selectionModel,
+    size
+  });
+  const contentContainerClassName = (0, import_clsx9.default)(`${classBase8}-contentContainer`, {
+    [`${classBase8}-colLines`]: tableAttributes.columnSeparators,
+    [`${classBase8}-rowLines`]: tableAttributes.rowSeparators,
+    [`${classBase8}-zebra`]: tableAttributes.zebraStripes
+  });
+  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-prop": `${rowHeight}px`,
+    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
+    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_vuu_popups3.ContextMenuProvider,
+    {
+      menuActionHandler: handleContextMenuAction,
+      menuBuilder,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            className: `${classBase8}-scrollbarContainer`,
+            ref: scrollProps.scrollbarContainerRef,
+            style: cssVariables,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase8}-scrollbarContent` })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            className: contentContainerClassName,
+            ref: scrollProps.contentContainerRef,
+            style: cssVariables,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "div",
+              {
+                ...tableProps,
+                className: `${classBase8}-table`,
+                role: "table",
+                tabIndex: disableFocus ? void 0 : -1,
+                children: [
+                  showColumnHeaders ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    TableHeader,
+                    {
+                      columns: scrollProps.columnsWithinViewport,
+                      headings,
+                      onMoveColumn,
+                      onMoveGroupColumn,
+                      onRemoveGroupColumn,
+                      onResizeColumn,
+                      onSortColumn,
+                      tableConfig,
+                      tableId: id,
+                      virtualColSpan: scrollProps.virtualColSpan
+                    }
+                  ) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase8}-body`, children: data.map((data2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    Row2,
+                    {
+                      "aria-rowindex": data2[0] + 1,
+                      classNameGenerator: rowClassNameGenerator,
+                      columnMap,
+                      columns: scrollProps.columnsWithinViewport,
+                      highlighted: highlightedIndex === data2[IDX3],
+                      onClick: onRowClick,
+                      onDataEdited,
+                      row: data2,
+                      offset: getRowOffset(data2),
+                      onToggleGroup,
+                      virtualColSpan: scrollProps.virtualColSpan,
+                      zebraStripes: tableAttributes.zebraStripes
+                    },
+                    data2[RENDER_IDX]
+                  )) })
+                ]
+              }
+            )
+          }
+        ),
+        draggableRow
+      ]
+    }
+  );
+};
+var Table = (0, import_react26.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: rowHeightProp,
+  scrollingApiRef,
+  selectionModel,
+  showColumnHeaders,
+  headerHeight,
+  style: styleProp,
+  ...htmlAttributes
+}, forwardedRef) {
+  const containerRef = (0, import_react26.useRef)(null);
+  const [size, setSize] = (0, import_react26.useState)();
+  const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });
+  if (config === void 0) {
+    throw Error(
+      "vuu Table requires config prop. Minimum config is list of Column Descriptors"
+    );
+  }
+  if (dataSource === void 0) {
+    throw Error("vuu Table requires dataSource prop");
+  }
+  console.log({ rowHeight });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_vuu_ui_controls5.MeasuredContainer,
+    {
+      ...htmlAttributes,
+      className: (0, import_clsx9.default)(classBase8, classNameProp),
+      id,
+      onResize: setSize,
+      ref: (0, import_core2.useForkRef)(containerRef, forwardedRef),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RowProxy, { ref: rowRef, height: rowHeightProp }),
+        size && rowHeight ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          TableCore,
+          {
+            Row: Row2,
+            allowDragDrop,
+            availableColumns,
+            config,
+            containerRef,
+            dataSource,
+            disableFocus,
+            headerHeight,
+            highlightedIndex,
+            id,
+            navigationStyle,
+            onAvailableColumnsChange,
+            onConfigChange,
+            onDragStart,
+            onDrop,
+            onFeatureInvocation,
+            onHighlight,
+            onRowClick,
+            onSelect,
+            onSelectionChange,
+            renderBufferSize,
+            rowHeight,
+            scrollingApiRef,
+            selectionModel,
+            showColumnHeaders,
+            size
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+// src/cell-renderers/checkbox-cell/CheckboxCell.tsx
+var import_react27 = require("react");
+var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
+var import_core3 = require("@salt-ds/core");
+var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var CheckboxCell = (0, import_react27.memo)(
+  ({ column, columnMap, onCommit = import_vuu_ui_controls6.WarnCommit, row }) => {
+    const dataIdx = columnMap[column.name];
+    const isChecked = !!row[dataIdx];
+    const handleCommit = (0, import_react27.useCallback)(
+      (value) => async (evt) => {
+        const res = await onCommit(value);
+        if (res === true) {
+          (0, import_vuu_utils25.dispatchCustomEvent)(evt.target, "vuu-commit");
+        }
+        return res;
+      },
+      [onCommit]
+    );
+    return column.editable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core3.Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vuu_ui_controls6.CheckboxIcon, { checked: isChecked, disabled: true });
+  },
+  import_vuu_utils25.dataColumnAndKeyUnchanged
+);
+CheckboxCell.displayName = "CheckboxCell";
+(0, import_vuu_utils25.registerComponent)("checkbox-cell", CheckboxCell, "cell-renderer", {
+  serverDataType: "boolean"
+});
+
+// src/cell-renderers/input-cell/InputCell.tsx
+var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
+var import_core4 = require("@salt-ds/core");
+var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_clsx10 = __toESM(require("clsx"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var classBase9 = "vuuTableInputCell";
+var WarnCommit2 = () => {
+  console.warn(
+    "onCommit handler has not been provided to InputCell cell renderer"
+  );
+  return Promise.resolve(true);
+};
+var InputCell = ({
+  column,
+  columnMap,
+  onCommit = WarnCommit2,
+  row
+}) => {
+  const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
+  const { align = "left", clientSideEditValidationCheck } = column;
+  const { warningMessage, ...editProps } = (0, import_vuu_ui_controls7.useEditableText)({
+    initialValue: dataValue,
+    onCommit,
+    clientSideEditValidationCheck
+  });
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_core4.Input,
+    {
+      ...editProps,
+      className: (0, import_clsx10.default)(classBase9, {
+        [`${classBase9}-error`]: warningMessage !== void 0
+      }),
+      endAdornment,
+      startAdornment
+    }
+  );
+};
+(0, import_vuu_utils26.registerComponent)("input-cell", InputCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+// src/cell-renderers/toggle-cell/ToggleCell.tsx
+var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
+var import_clsx11 = __toESM(require("clsx"));
+var import_react28 = require("react");
+var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var classBase10 = "vuuTableToggleCell";
+var getValueList = ({ name, type }) => {
+  if ((0, import_vuu_utils27.isTypeDescriptor)(type) && (0, import_vuu_utils27.isValueListRenderer)(type.renderer)) {
+    return type.renderer.values;
+  } else {
+    throw Error(
+      `useLookupValues column ${name} has not been configured with a values list`
+    );
+  }
+};
+var ToggleCell = (0, import_react28.memo)(
+  function ToggleCell2({
+    column,
+    columnMap,
+    onCommit = import_vuu_ui_controls8.WarnCommit,
+    row
+  }) {
+    const values = getValueList(column);
+    const dataIdx = columnMap[column.name];
+    const value = row[dataIdx];
+    const handleCommit = (0, import_react28.useCallback)(
+      (evt, value2) => {
+        return onCommit(value2).then((response) => {
+          if (response === true) {
+            (0, import_vuu_utils27.dispatchCustomEvent)(evt.target, "vuu-commit");
+          }
+          return response;
+        });
+      },
+      [onCommit]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_vuu_ui_controls9.CycleStateButton,
+      {
+        className: (0, import_clsx11.default)(classBase10, `${classBase10}-${column.name}`),
+        onCommit: handleCommit,
+        value,
+        values,
+        variant: "cta",
+        children: value
+      }
+    );
+  },
+  import_vuu_utils27.dataColumnAndKeyUnchanged
+);
+(0, import_vuu_utils27.registerComponent)("toggle-cell", ToggleCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+// src/useControlledTableNavigation.ts
+var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+var import_react29 = require("react");
+var useControlledTableNavigation = (initialValue, rowCount) => {
+  const tableRef = (0, import_react29.useRef)(null);
+  const [highlightedIndexRef, setHighlightedIndex] = (0, import_vuu_ui_controls10.useStateRef)(initialValue);
+  const handleKeyDown = (0, import_react29.useCallback)(
+    (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) {
+          (0, import_vuu_utils28.dispatchMouseEvent)(rowEl, "click");
+        }
+      }
+    },
+    [highlightedIndexRef, rowCount, setHighlightedIndex]
+  );
+  const handleHighlight = (0, import_react29.useCallback)(
+    (idx) => {
+      setHighlightedIndex(idx);
+    },
+    [setHighlightedIndex]
+  );
+  return {
+    highlightedIndexRef,
+    onHighlight: handleHighlight,
+    onKeyDown: handleKeyDown,
+    tableRef
+  };
+};
 //# sourceMappingURL=index.js.map