@vuu-ui/vuu-datatable 0.5.9 → 0.5.17

package/cjs/index.js

@@ -1,5 +1,5 @@
-"use strict";var Ze=Object.create;var N=Object.defineProperty;var et=Object.getOwnPropertyDescriptor;var tt=Object.getOwnPropertyNames;var ot=Object.getPrototypeOf,rt=Object.prototype.hasOwnProperty;var nt=(t,e)=>{for(var o in e)N(t,o,{get:e[o],enumerable:!0})},re=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of tt(e))!rt.call(t,s)&&s!==o&&N(t,s,{get:()=>e[s],enumerable:!(n=et(e,s))||n.enumerable});return t};var Y=(t,e,o)=>(o=t!=null?Ze(ot(t)):{},re(e||!t||!t.__esModule?N(o,"default",{value:t,enumerable:!0}):o,t)),st=t=>re(N({},"__esModule",{value:!0}),t);var Wt={};nt(Wt,{DataTable:()=>kt});module.exports=st(Wt);var Ge=require("@salt-ds/core"),A=require("react");var de=require("@vuu-ui/vuu-utils"),fe=require("react"),be=Y(require("classnames"));var ie=require("@vuu-ui/vuu-utils"),le=Y(require("classnames")),ae=require("react");var q=require("react/jsx-runtime"),it=t=>{let e=t.align==="right",o=t.pin==="left";if(o&&e)return"vuuAlignRight vuuPinLeft";if(o)return"vuuPinLeft";if(e)return"vuuAlignRight"},lt=t=>t==null?"":typeof t=="string"?t:t.toString(),ne=({column:t,row:e,valueFormatter:o=lt})=>{let n=it(t),s=o(e[t.key]);return t.pin==="left"?(0,q.jsx)("td",{className:n,style:{left:t.pinnedLeftOffset},children:s}):(0,q.jsx)("td",{className:n,children:s})};var Q=require("react/jsx-runtime"),{IDX:at}=ie.metadataKeys,se="vuuDataTableRow",K=(0,ae.memo)(function({columns:e,height:o,index:n,row:s,valueFormatters:i}){let r=s[at],l=(0,le.default)(se,{[`${se}-even`]:r%2===0}),u=r-n;return(0,Q.jsx)("tr",{"data-idx":n,className:l,style:{transform:`translate3d(0px, ${u*o}px, 0px)`},children:e.map(p=>(0,Q.jsx)(ne,{column:p,row:s,valueFormatter:i==null?void 0:i[p.name]},p.name))})});var me=Y(require("classnames")),J=require("react");var ce=require("react/jsx-runtime"),ut="vuuColumnResizer",ue=()=>(0,ce.jsx)("div",{className:ut});var $=require("react/jsx-runtime"),G="vuuTable-headerCell",I=({column:t,className:e,onDragEnd:o,onDragStart:n,...s})=>{let i=(0,J.useCallback)(u=>{n==null||n(u)},[n]),r=(0,J.useCallback)(()=>{o==null||o()},[o]),l=(0,me.default)(G,e,{vuuPinLeft:t.pin==="left",[`${G}-right`]:t.align==="right"});return(0,$.jsx)("th",{className:l,...s,onMouseDown:i,onMouseUp:r,children:(0,$.jsxs)("div",{className:`${G}-inner`,children:[(0,$.jsx)("div",{className:`${G}-label`,children:t.label}),t.resizeable!==!1?(0,$.jsx)(ue,{}):null]})})};var D=require("react/jsx-runtime"),pe="vuuDataTable",{RENDER_IDX:ct}=de.metadataKeys,he=({columns:t,data:e,headerHeight:o,onHeaderCellDragEnd:n,rowHeight:s})=>{let i=(0,fe.useCallback)(()=>{n==null||n()},[n]);return(0,D.jsx)(D.Fragment,{children:t.map((r,l)=>(0,D.jsx)("table",{className:(0,be.default)(`${pe}-table`,`${pe}-columnBased`,{vuuPinLeft:r.pin==="left"}),"data-idx":l,id:`col-${l}`,style:{width:r.width,left:r.pinnedLeftOffset,"--vuuTableHeaderHeight":`${o}px`,"--row-height":`${s}px`},children:(0,D.jsxs)("tbody",{children:[(0,D.jsx)("tr",{children:(0,D.jsx)(I,{column:r,"data-idx":l,onDragEnd:i},l)},"header"),e.map((u,p)=>(0,D.jsx)(K,{columns:[r],height:s,index:p,row:u},u[ct])),(0,D.jsx)("tr",{className:"vuuTable-filler"})]})},r.name))})};var ye=require("@vuu-ui/vuu-utils"),Ce=require("react");var w=require("react/jsx-runtime"),ge="vuuDataTable",{RENDER_IDX:mt}=ye.metadataKeys,Te=({columns:t,data:e,onHeaderCellDragStart:o,rowHeight:n,valueFormatters:s})=>{let i=(0,Ce.useCallback)(r=>{o==null||o(r)},[o]);return(0,w.jsxs)("table",{className:`${ge}-table`,children:[(0,w.jsx)("colgroup",{children:t.map((r,l)=>(0,w.jsx)("col",{width:`${r.width}px`},l))}),(0,w.jsx)("thead",{children:(0,w.jsx)("tr",{children:t.map((r,l)=>(0,w.jsx)(I,{column:r,"data-idx":l,onDragStart:i,style:{left:r.pinnedLeftOffset}},l))})}),(0,w.jsxs)("tbody",{children:[e==null?void 0:e.map((r,l)=>(0,w.jsx)(K,{columns:t,height:n,index:l,row:r,valueFormatters:s},r[mt])),(0,w.jsx)("tr",{className:`${ge}-filler`})]})]})};var Re=require("@heswell/salt-lab"),L=require("react"),xe=({onDrop:t,tableContainerRef:e,tableLayout:o})=>{let[n,s]=(0,L.useState)(o),i=(0,L.useRef)(),r=(0,L.useCallback)(()=>{console.log("handleDropSettle"),i.current=void 0,s("row")},[]),{draggable:l,draggedItemIndex:u,onMouseDown:p}=(0,Re.useDragDrop)({allowDragDrop:!0,draggableClassName:"table-column",orientation:"horizontal",containerRef:e,itemQuery:".vuuDataTable-table",onDrop:t,onDropSettle:r}),m=(0,L.useCallback)(c=>{let{clientX:f,clientY:h}=c,d=c.target;console.log({sourceElement:d});let a=d.closest(".vuuTable-headerCell"),{dataset:{idx:b="-1"}}=a;i.current={clientX:f,clientY:h,idx:b},s("column")},[]);return(0,L.useLayoutEffect)(()=>{var c;if(console.log(`useDraggableColumn useLayoutEffect tableLayout ${n}`,{mousePosRef:i.current}),n==="column"&&i.current&&!l){let{clientX:f,clientY:h,idx:d}=i.current,a=(c=e.current)==null?void 0:c.querySelector(`.vuuDataTable-table[data-idx="${d}"]`);if(a){let b={persist:()=>{},nativeEvent:{clientX:f,clientY:h,target:a}};p==null||p(b)}}},[l,p,e,n]),{draggable:l,draggedItemIndex:u,tableLayout:n,handleHeaderCellDragStart:m}};var U=require("react");var E=require("react");var z=new Map,we=(t,e,o)=>{switch(o){case"height":return e.height;case"clientHeight":return t.clientHeight;case"clientWidth":return t.clientWidth;case"contentHeight":return e.contentHeight;case"contentWidth":return e.contentWidth;case"scrollHeight":return Math.ceil(t.scrollHeight);case"scrollWidth":return Math.ceil(t.scrollWidth);case"width":return e.width;default:return 0}};var De=new ResizeObserver(t=>{for(let e of t){let{target:o,borderBoxSize:n,contentBoxSize:s}=e,i=z.get(o);if(i){let[{blockSize:r,inlineSize:l}]=n,[{blockSize:u,inlineSize:p}]=s,{onResize:m,measurements:c}=i,f=!1;for(let[h,d]of Object.entries(c)){let a=we(o,{height:r,width:l,contentHeight:u,contentWidth:p},h);a!==d&&(f=!0,c[h]=a)}f&&m&&m(c)}}});function ve(t,e,o,n=!1){let s=(0,E.useRef)(e),i=(0,E.useCallback)(r=>{let{width:l,height:u}=r.getBoundingClientRect(),{clientWidth:p,clientHeight:m}=r;return s.current.reduce((c,f)=>(c[f]=we(r,{width:l,height:u,contentHeight:m,contentWidth:p},f),c),{})},[]);(0,E.useEffect)(()=>{let r=t.current;async function l(){z.set(r,{measurements:{}}),await document.fonts.ready;let u=z.get(r);if(u){let p=i(r);u.measurements=p,De.observe(r),n&&o(p)}else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation","font-weight:bold; color:red;")}if(r){if(z.has(r))throw Error("useResizeObserver attemping to observe same element twice");l()}return()=>{r&&z.has(r)&&(De.unobserve(r),z.delete(r))}},[i,t]),(0,E.useEffect)(()=>{let r=t.current,l=z.get(r);if(l){if(s.current!==e){s.current=e;let u=i(r);l.measurements=u}l.onResize=o}},[e,i,t,o])}var pt=["clientHeight","clientWidth","height","width"],B=t=>typeof t.clientHeight=="number"&&typeof t.clientWidth=="number",j=t=>t.height==="100%"&&t.width==="100%",Me=(t,e,o)=>{let[n,s]=(0,U.useState)({pixelHeight:e!=null?e:0,pixelWidth:o!=null?o:0,height:e!=null?e:"100%",width:o!=null?o:"100%"}),i=(0,U.useCallback)(({clientWidth:r,clientHeight:l,height:u,width:p})=>{s(m=>typeof l=="number"&&typeof r=="number"&&(r!==m.clientWidth||l!==m.clientHeight)?{...m,pixelWidth:Math.floor(r),pixelHeight:Math.floor(l),clientWidth:Math.floor(r),clientHeight:Math.floor(l)}:m)},[s]);return ve(t,pt,i,!0),n};var $e=require("@vuu-ui/vuu-utils"),x=require("react");var dt=([,t],[,e])=>t-e,_=class{constructor(e){this.keys=new Map,this.free=[],this.nextKeyValue=0,this.reset(e)}next(){return this.free.length>0?this.free.pop():this.nextKeyValue++}reset({from:e,to:o}){this.keys.forEach((s,i)=>{(i<e||i>=o)&&(this.free.push(s),this.keys.delete(i))});let n=o-e;this.keys.size+this.free.length>n&&(this.free.length=n-this.keys.size);for(let s=e;s<o;s++)if(!this.keys.has(s)){let i=this.next();this.keys.set(s,i)}}keyFor(e){let o=this.keys.get(e);if(o===void 0)throw console.log(`key not found
-        keys: ${Object.entries(this.keys).map((n,s)=>`${n}=>${s}`).join(", ")}
+"use strict";var lo=Object.create;var Re=Object.defineProperty;var uo=Object.getOwnPropertyDescriptor;var ao=Object.getOwnPropertyNames;var co=Object.getPrototypeOf,mo=Object.prototype.hasOwnProperty;var po=(e,t)=>{for(var n in t)Re(e,n,{get:t[n],enumerable:!0})},wt=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ao(t))!mo.call(e,r)&&r!==n&&Re(e,r,{get:()=>t[r],enumerable:!(o=uo(t,r))||o.enumerable});return e};var F=(e,t,n)=>(n=e!=null?lo(co(e)):{},wt(t||!e||!e.__esModule?Re(n,"default",{value:e,enumerable:!0}):n,e)),fo=e=>wt(Re({},"__esModule",{value:!0}),e);var Ar={};po(Ar,{DataTable:()=>Ir,useMeasuredContainer:()=>yt});module.exports=fo(Ar);var Qe=require("@heswell/salt-lab"),Co=require("@salt-ds/core"),yo=F(require("classnames")),Je=require("react");var ye=require("react"),St=F(require("react-dom"));var Tt=F(require("react-dom")),Rt=require("@salt-ds/core"),Et=require("react/jsx-runtime"),bo=1,go=(e=0,t=0,n=window)=>{let o=n.document.createElement("div");return o.className="vuuPopup "+bo++,o.style.cssText=`left:${e}px; top:${t}px;`,n.document.body.appendChild(o),o},ho=(e,t)=>go(e,t),Pe=(e,t,n,o,r)=>{t.style.cssText=`left:${n}px; top:${o}px;position: absolute;`,Tt.render((0,Et.jsx)(Rt.SaltProvider,{applyClassesTo:"child",children:e}),t,r)},Pt=ho;var Ye=function({children:t,x:n=0,y:o=0,onRender:r}){let s=(0,ye.useMemo)(()=>Pt(),[]);return(0,ye.useLayoutEffect)(()=>{Pe(t,s,n,o,r)},[t,r,s,n,o]),(0,ye.useLayoutEffect)(()=>()=>{var i;s&&(St.unmountComponentAtNode(s),s.classList.contains("vuuPopup")&&((i=s.parentElement)==null||i.removeChild(s)))},[s]),null};var Ht=require("react/jsx-runtime");var qt=require("@salt-ds/core"),ne=require("react");var J=F(require("react")),je=F(require("classnames")),Ot=require("@salt-ds/core");var $=require("react");var Lt=e=>e.closest("[data-root='true']")!==null,kt=(e,t)=>{var n;return e.ariaHasPopup==="true"&&((n=e.dataset)==null?void 0:n.idx)===`${t}`||e.querySelector(`:scope > [data-idx='${t}'][aria-haspopup='true']`)!==null};function Mo(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var xo="Enter";var vo="Delete",Do=new Set([xo,vo]),wo=new Set(["Tab"]),To=new Set(["ArrowRight","ArrowLeft"]),It=new Set(["Home","End","ArrowDown","ArrowUp"]),At=new Set(["Home","End","ArrowRight","ArrowLeft"]),Ro=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),es=Mo(Do,At,It,To,Ro,wo);var Kt=({key:e},t="vertical")=>(t==="vertical"?It:At).has(e);var Ft=({autoHighlightFirstItem:e=!1,count:t,highlightedIndex:n,onActivate:o,onHighlight:r,onCloseMenu:s,onOpenMenu:i})=>{let l=(0,$.useRef)((n!=null?n:e)?0:-1),[,u]=(0,$.useState)(null),a=n!==void 0,m=(0,$.useCallback)(g=>{l.current=g,r==null||r(g),u({})},[r]),c=(0,$.useCallback)(g=>{g!==l.current&&(a||m(g))},[a,m]),p=(0,$.useRef)(!0),x=(0,$.useRef)(!1),C=g=>x.current=g,b=a?n:l.current,d=(0,$.useCallback)(g=>{let M=Po(t,g.key,l.current);M!==l.current&&c(M)},[t,c]),D=(0,$.useCallback)(g=>{Kt(g)?(g.preventDefault(),g.stopPropagation(),p.current=!0,d(g)):(g.key==="ArrowRight"||g.key==="Enter")&&kt(g.target,b)?i(b):g.key==="ArrowLeft"&&!Lt(g.target)?s(b):g.key==="Enter"&&o&&o(b)},[b,d,o,s,i]),v=(0,$.useMemo)(()=>({onFocus:()=>{b===-1&&m(0)},onKeyDown:D,onMouseDownCapture:()=>{p.current=!1,C(!0)},onMouseMove:()=>{p.current&&(p.current=!1)},onMouseLeave:()=>{p.current=!0,C(!1),c(-1)}}),[b,c,d,o,s,i,m]);return{focusVisible:p.current?b:-1,controlledHighlighting:a,highlightedIndex:b,setHighlightedIndex:c,listProps:v,setIgnoreFocus:C}};function Po(e,t,n){return t==="ArrowUp"?n>0?n-1:n:n===null?0:n===e-1?n:n+1}var te=F(require("react"));var Ze=e=>e.type===Ee||!!e.props["data-group"],Nt=e=>{let t=(0,te.useCallback)(()=>{let r=(i,l="root",u={},a={})=>{let m=u[l]=[],c=0,p=!1;return te.default.Children.forEach(i,x=>{if(x.type===zt)p=!0;else{let C=Ze(x),b=l==="root"?`${c}`:`${l}.${c}`,{props:{action:d,options:D}}=x,{childWithId:v,grandChildren:g}=s(x,b,C,p);m.push(v),g?r(g,b,u,a):a[b]={action:d,options:D},c+=1,p=!1}}),[u,a]},s=(i,l,u,a=!1)=>{let{props:{children:m}}=i;return{childWithId:te.default.cloneElement(i,{hasSeparator:a,id:`${l}`,key:l,children:u?void 0:m}),grandChildren:u?m:void 0}};return r(e)},[e]),[n,o]=(0,te.useMemo)(()=>t(),[t]);return[n,o]};var ae=require("react/jsx-runtime"),$t="vuuMenuList",zt=()=>(0,ae.jsx)("li",{className:"vuuMenuItem-divider"}),Ee=()=>null,et=({children:e,idx:t,...n})=>(0,ae.jsx)("div",{...n,children:e}),Eo=e=>e.props["data-icon"],Bt=({activatedByKeyboard:e,childMenuShowing:t=-1,children:n,className:o,highlightedIdx:r,id:s,isRoot:i,listItemProps:l,menuId:u,onHighlightMenuItem:a,onActivate:m,onCloseMenu:c,onOpenMenu:p,...x})=>{let C=(0,Ot.useIdMemo)(s),b=(0,J.useRef)(null),d=(0,J.useMemo)(()=>new Map,[]),D=w=>{var E;let T=(E=b.current)==null?void 0:E.querySelector(`:scope > [data-idx='${w}']`);T!=null&&T.id&&(p==null||p(T.id))},v=w=>{var E;let T=(E=b.current)==null?void 0:E.querySelector(`:scope > [data-idx='${w}']`);T!=null&&T.id&&(m==null||m(T.id))},{focusVisible:g,highlightedIndex:M,listProps:h}=Ft({count:J.default.Children.count(n),highlightedIndex:r,onActivate:v,onHighlight:a,onOpenMenu:D,onCloseMenu:c}),f=t==-1?g:-1;return(0,J.useLayoutEffect)(()=>{var w;t===-1&&e&&((w=b.current)==null||w.focus())},[e,t]),(0,ae.jsx)("div",{...x,...h,"aria-activedescendant":(()=>M===void 0||M===-1?void 0:d.get(M))(),className:(0,je.default)($t,o,{[`${$t}-childMenuShowing`]:t!==-1}),"data-root":i||void 0,id:`${C}-${u}`,ref:b,role:"menu",tabIndex:0,children:R()});function R(){let w={...l,role:"menuitem"},T=(S,N,O)=>N?[(0,ae.jsx)("span",{className:"vuuIconContainer","data-icon":O},"icon")].concat(S):S;function E(S,N,O,j){var Dt;let{children:P,className:H,"data-icon":B,id:X,hasSeparator:ee,label:Xe,...so}=N.props,qe=Ze(N),vt=qe&&t===O,io=vt?`${C}-${X}`:void 0;S.push((0,ae.jsx)(et,{...so,...w,...So(`${C}-${u}`,X,O,(Dt=N.key)!=null?Dt:X,M,f,H,ee),"aria-controls":io,"aria-haspopup":qe||void 0,"aria-expanded":vt||void 0,children:T(qe?Xe:P,j,B)}))}let k=[];if(n.length>0){let S=n.some(Eo);n.forEach((N,O)=>{E(k,N,O,S)})}return k}},So=(e,t,n,o,r,s,i,l)=>({id:`${e}-${t}`,key:o!=null?o:n,"data-idx":n,"data-highlighted":n===r||void 0,className:(0,je.default)("vuuMenuItem",i,{"vuuMenuItem-separator":l,focusVisible:s===n})});Bt.displayName="MenuList";var Gt=Bt;var I=require("react");function Vt(e){if(e){let t=e.dataset.idx;if(t)return parseInt(t,10);if(e.ariaPosInSet)return parseInt(e.ariaPosInSet,10)-1}}var tt=e=>e==null?void 0:e.closest("[data-idx],[aria-posinset]");var Wt=(e,t,n)=>e.map((o,r)=>r===e.length-1?{...o,[n]:o[n]-t}:o),Ho=(e,t)=>Wt(e,t,"left"),Lo=(e,t)=>Wt(e,t,"top"),ko=(e,t)=>{let[n,o]=t.slice(-2),r=document.getElementById(`${e}-${o.id}`);if(r===null)throw Error(`useCascade.flipSides element with id ${o.id} not found`);let{width:s}=r.getBoundingClientRect();return t.map(i=>i===o?{...i,left:n.left-(s-2)}:i)},Io=(e,t)=>{let[{left:n,top:o}]=t.slice(-1),{offsetWidth:r,offsetTop:s}=e;return{left:n+r,top:s+o}},Me=e=>{let t=e.lastIndexOf("-");return t===-1?e:e.slice(t+1)},Se=e=>{let t=Me(e),n=t.lastIndexOf(".");return n>-1?t.slice(0,n):"root"},Ao=e=>{let t=0,n=e.indexOf(".",0);for(;n!==-1;)t+=1,n=e.indexOf(".",n+1);return t},Ko=e=>({menuId:Se(e.id),itemId:Me(e.id),isGroup:e.ariaHasPopup==="true",isOpen:e.ariaExpanded==="true",level:Ao(e.id)}),Ut=({id:e,onActivate:t,onMouseEnterItem:n,position:{x:o,y:r}})=>{let[,s]=(0,I.useState)({}),i=(0,I.useRef)([{id:"root",left:o,top:r}]),l=(0,I.useCallback)(g=>{i.current=g,s({})},[]),u=(0,I.useRef)(),a=(0,I.useRef)(),m=(0,I.useRef)({root:"no-popup"}),c=(0,I.useRef)(0),p=(0,I.useCallback)((g="root",M=null,h=null)=>{if(g==="root"&&M===null)l([{id:"root",left:o,top:r}]);else{m.current[g]="popup-open";let y=(h?h.ownerDocument:document).getElementById(`${e}-${g}-${M}`),{left:R,top:w}=Io(y,i.current);l(i.current.concat({id:M,left:R,top:w}))}},[e,o,r,l]),x=(0,I.useCallback)(g=>{l(g==="root"?[]:i.current.slice(0,-1))},[l]),C=(0,I.useCallback)((g,M)=>{let h=i.current.slice(),{id:f}=h[h.length-1];for(;h.length>1&&!M.startsWith(f);){let y=Se(f);h.pop(),m.current[f]="no-popup",m.current[y]="no-popup",{id:f}=h[h.length-1]}h.length<i.current.length&&l(h)},[l]),b=(0,I.useCallback)((g,M,h)=>{u.current&&clearTimeout(u.current),u.current=window.setTimeout(()=>{console.log(`scheduleOpen timed out opening ${M}`),C(g,M),m.current[g]="popup-open",m.current[M]="no-popup",p(g,M,h)},400)},[C,p]),d=(0,I.useCallback)((g,M,h)=>{console.log(`scheduleClose openMenuId ${g} menuId ${M} itemId ${h}`),m.current[g]="pending-close",a.current=window.setTimeout(()=>{C(M,h)},400)},[C]),D=(0,I.useCallback)(()=>{let{current:g}=i,[M]=g.slice(-1),h=document.getElementById(`${e}-${M.id}`);if(h){let{right:f,bottom:y}=h.getBoundingClientRect(),{clientHeight:R,clientWidth:w}=document.body;if(f>w){let T=g.length>1?ko(e,g):Ho(g,f-w);l(T)}else if(y>R){let T=Lo(g,y-R);l(T)}}},[e,l]),v=(0,I.useMemo)(()=>({onMouseEnter:g=>{let M=tt(g.target),{menuId:h,itemId:f,isGroup:y,isOpen:R,level:w}=Ko(M),T=c.current===w,{current:{[h]:E}}=m;if(c.current=w,E==="no-popup"&&y)m.current[h]="popup-pending",b(h,f,M);else if(E==="popup-pending"&&!y)m.current[h]="no-popup",clearTimeout(u.current),u.current=void 0;else if(E==="popup-pending"&&y)clearTimeout(u.current),b(h,f,M);else if(E==="popup-open"){let[{id:k},{id:S}]=i.current.slice(-2);k===h&&m.current[S]!=="pending-close"&&T?(d(S,h,f),y&&!R&&b(h,f,M)):k===h&&y&&f!==S&&m.current[S]==="pending-close"?b(h,f,M):y?(C(h,f),b(h,f,M)):m.current[S]==="pending-close"&&T||C(h,f)}E==="pending-close"&&(u.current&&(clearTimeout(u.current),u.current=void 0),clearTimeout(a.current),a.current=void 0,m.current[h]="popup-open"),n(g,f)},onClick:g=>{let M=g.target,h=tt(M),f=Vt(h);console.log(`list item click [${f}] hasPopup ${h.ariaHasPopup}`),h.ariaHasPopup==="true"?h.ariaExpanded!=="true"&&p(f):t(Me(h.id))}}),[C,t,n,p,d,b]);return{closeMenu:x,handleRender:D,listItemProps:v,openMenu:p,openMenus:i.current}};var _t=require("react"),Xt=({containerClassName:e,isOpen:t,onClose:n})=>{(0,_t.useEffect)(()=>{let o;return t&&(o=r=>{r.target.closest(`.${e}`)===null&&(n==null||n("root"))},document.body.addEventListener("click",o,!0)),()=>{o&&document.body.removeEventListener("click",o,!0)}},[e,t,n])};var xe=require("react/jsx-runtime"),Yt=require("react"),Fo=()=>{},nt=({activatedByKeyboard:e,children:t,className:n,id:o,onClose:r=()=>{},position:s={x:0,y:0},style:i,...l})=>{let u=(0,qt.useIdMemo)(o),a=(0,ne.useRef)(Fo),[m,c]=Nt(t),p=(0,ne.useRef)(e),x=(0,ne.useCallback)(()=>{p.current=!1},[]),C=(0,ne.useCallback)(T=>{let{action:E,options:k}=c[T];a.current("root"),r(E,k)},[c,r]),{closeMenu:b,listItemProps:d,openMenu:D,openMenus:v,handleRender:g}=Ut({id:u,onActivate:C,onMouseEnterItem:x,position:s});a.current=b,console.log({openMenus:v});let M=(0,ne.useCallback)(()=>{b(),r()},[b,r]);Xt({containerClassName:"vuuMenuList",onClose:M,isOpen:v.length>0});let h=T=>{let E=Me(T),k=Se(E);p.current=!0,D(k,E)},f=()=>{p.current=!0,b()},y=()=>{},R=v.length-1,w=T=>{if(T>=R)return-1;{let{id:E}=v[T+1],k=E.lastIndexOf(".");return parseInt(k===-1?E:E.slice(-k),10)}};return(0,xe.jsx)(xe.Fragment,{children:v.map(({id:T,left:E,top:k},S)=>{let N=w(S);return(0,xe.jsx)(Ye,{x:E,y:k,onRender:g,children:(0,Yt.createElement)(Gt,{...l,activatedByKeyboard:p.current,childMenuShowing:N,className:n,id:u,menuId:T,isRoot:S===0,key:S,listItemProps:d,onActivate:C,onHighlightMenuItem:y,onCloseMenu:f,onOpenMenu:h,style:i},m[T])},S)})})};nt.displayName="ContextMenu";var ce=require("react"),He=require("react/jsx-runtime"),Le=(0,ce.createContext)(null),Qt=e=>"children"in e,No=({children:e,context:t,menuActionHandler:n,menuBuilder:o})=>{let r=(0,ce.useMemo)(()=>(t==null?void 0:t.menuBuilders)&&o?t.menuBuilders.concat(o):o?[o]:(t==null?void 0:t.menuBuilders)||[],[t,o]),s=(0,ce.useCallback)((i,l)=>{var u;if(n!=null&&n(i,l)||(u=t==null?void 0:t.menuActionHandler)!=null&&u.call(t,i,l))return!0},[t,n]);return(0,He.jsx)(Le.Provider,{value:{menuActionHandler:s,menuBuilders:r},children:e})},Jt=({children:e,label:t,menuActionHandler:n,menuBuilder:o})=>(0,He.jsx)(Le.Consumer,{children:r=>(0,He.jsx)(No,{context:r,label:t,menuActionHandler:n,menuBuilder:o,children:e})});var ve=require("react");var Zt=F(require("classnames")),me=F(require("react")),ke=F(require("react-dom"));var ot=!1,V=[];function jt(e){if(e.key==="Esc"){if(V.length)tn();else if(ot){let t=document.body.querySelector(".vuuDialog");t&&ke.default.unmountComponentAtNode(t)}}}function en(e){if(V.length){let t=document.body.querySelectorAll(".vuuPopup");for(let n=0;n<t.length;n++)if(t[n].contains(e.target))return;tn()}}function tn(){if(V.length){let e=document.body.querySelectorAll(".vuuPopup");for(let t=0;t<e.length;t++)ke.default.unmountComponentAtNode(e[t]);nn("*")}}function zo(e){V.indexOf(e)===-1&&(V.push(e),ot===!1&&(window.addEventListener("keydown",jt,!0),window.addEventListener("click",en,!0)))}function nn(e){if(V.length){if(e==="*")V.length=0;else{let t=V.indexOf(e);t!==-1&&V.splice(t,1)}V.length===0&&ot===!1&&(window.removeEventListener("keydown",jt,!0),window.removeEventListener("click",en,!0))}}var $o=({children:e,position:t,style:n})=>{let o=(0,Zt.default)("hwPopup","hwPopupContainer",t);return(0,me.createElement)("div",{className:o,style:n},e)},Oo=1,oe=class{static showPopup({name:t="anon",group:n="all",position:o="",left:r=0,right:s="auto",top:i=0,width:l="auto",component:u}){if(!u)throw Error("PopupService showPopup, no component supplied");zo(t);let a=document.body.querySelector(".vuuPopup."+n);a===null&&(a=document.createElement("div"),a.className="vuuPopup "+n,document.body.appendChild(a));let m={width:l};Pe((0,me.createElement)($o,{key:Oo++,position:o,style:m},u),a,r,i,()=>{oe.keepWithinThePage(a,s)})}static hidePopup(t="anon",n="all"){if(V.indexOf(t)!==-1){nn(t);let o=document.body.querySelector(`.vuuPopup.${n}`);o&&ke.default.unmountComponentAtNode(o)}}static keepWithinThePage(t,n="auto"){let o=t.querySelector(".vuuPopupContainer > *");if(o){let{top:r,left:s,width:i,height:l,right:u}=o.getBoundingClientRect(),a=window.innerWidth,c=window.innerHeight-(r+l);c<0&&(o.style.top=Math.round(r)+c+"px");let p=a-(s+i);if(p<0&&(o.style.left=Math.round(s)+p+"px"),typeof n=="number"&&n!==u){let x=n-u;o.style.left=s+x+"px"}}}};var Ie=require("react/jsx-runtime"),Ae=()=>{let e=(0,ve.useContext)(Le),t=(0,ve.useCallback)((o,r,s)=>{let i=[];for(let l of o)i=i.concat(l(r,s));return i},[]);return(0,ve.useCallback)((o,r,s)=>{var u;o.stopPropagation(),o.preventDefault();let i=(u=e==null?void 0:e.menuBuilders)!=null?u:[],l=t(i,r,s);console.log({menuItemDescriptors:l}),l.length&&(e==null?void 0:e.menuActionHandler)&&(console.log(`showContextMenu ${r}`,{options:s}),Bo(o,l,e.menuActionHandler))},[t,e])},Bo=(e,t,n)=>{let{clientX:o,clientY:r}=e,l=(0,Ie.jsx)(nt,{onClose:(u,a)=>{u&&(n(u,a),oe.hidePopup())},position:{x:o,y:r},children:(u=>{let a=(m,c)=>Qt(m)?(0,Ie.jsx)(Ee,{label:m.label,children:m.children.map(a)},c):(0,Ie.jsx)(et,{action:m.action,"data-icon":m.icon,options:m.options,children:m.label},c);return u.map(a)})(t)});oe.showPopup({left:0,top:0,component:l})};var _e=require("@salt-ds/core"),ro=require("react");var Mn=require("@vuu-ui/vuu-utils"),xn=require("react"),vn=F(require("classnames"));var Ke=require("@vuu-ui/vuu-utils"),an=F(require("classnames")),Fe=require("react");var on=F(require("classnames"));var rt=require("react/jsx-runtime"),Go=e=>e==null?"":typeof e=="string"?e:e.toString(),rn=({className:e,column:t,row:n,valueFormatter:o=Go})=>{let r=(0,on.default)(e,{vuuAlignRight:t.align==="right",vuuPinLeft:t.pin==="left","vuuTableCell-resizing":t.resizing}),s=o(n[t.key]);return t.pin==="left"?(0,rt.jsx)("td",{className:r,style:{left:t.pinnedLeftOffset},children:s}):(0,rt.jsx)("td",{className:r,children:s})};var sn=require("@vuu-ui/vuu-utils");var pe=require("react/jsx-runtime"),{DEPTH:Vo,IS_LEAF:ln}=sn.metadataKeys,Wo=(e,t)=>{let{[Vo]:n,[ln]:o}=t;if(o||n>e.length)return[null,n===null?0:n-1];if(n===0)return["$root",0];{let r=e[n-1];return[t[r.key],n-1]}},un=({column:e,onClick:t,row:n})=>{let{columns:o}=e,[r,s]=Wo(o,n),i={left:e.pin=="left"?e.pinnedLeftOffset:void 0},l=n[ln],u=Array(s).fill(0).map((a,m)=>(0,pe.jsx)("span",{className:"vuuTableGroupCell-spacer"},m));return(0,pe.jsxs)("td",{className:"vuuTableGroupCell vuuPinLeft",onClick:l?void 0:t,style:i,children:[u,l?null:(0,pe.jsx)("span",{className:"vuuTableGroupCell-toggle","data-icon":"triangle-right"}),(0,pe.jsx)("span",{children:r})]})};var it=require("react/jsx-runtime"),{IDX:Uo,IS_EXPANDED:_o}=Ke.metadataKeys,st="vuuDataTableRow",Ne=(0,Fe.memo)(function({columns:t,height:n,index:o,onToggleGroup:r,row:s,valueFormatters:i}){let{[Uo]:l,[_o]:u}=s,a=(0,an.default)(st,{[`${st}-even`]:l%2===0,[`${st}-expanded`]:u}),m=l-o,c=(0,Fe.useCallback)(()=>r==null?void 0:r(s),[r,s]);return(0,it.jsx)("tr",{"data-idx":l,className:a,style:{transform:`translate3d(0px, ${m*n}px, 0px)`},children:t.map(p=>{let x=(0,Ke.isGroupColumn)(p);return(0,it.jsx)(x?un:rn,{column:p,onClick:x?c:void 0,row:s,valueFormatter:i==null?void 0:i[p.name]},p.name)})})});var Cn=F(require("classnames")),fe=require("react");var de=require("react");var mn=require("react/jsx-runtime"),cn=()=>{},Xo="vuuColumnResizer",ze=({onDrag:e,onDragEnd:t=cn,onDragStart:n=cn})=>{let o=(0,de.useRef)(0),r=(0,de.useCallback)(l=>{l.stopPropagation&&l.stopPropagation(),l.preventDefault&&l.preventDefault();let u=Math.round(l.clientX),a=u-o.current;o.current=u,a!==0&&e(l,a)},[e]),s=(0,de.useCallback)(l=>{window.removeEventListener("mouseup",s),window.removeEventListener("mousemove",r),t(l)},[t,r]),i=(0,de.useCallback)(l=>{n(l),o.current=Math.round(l.clientX),window.addEventListener("mouseup",s),window.addEventListener("mousemove",r),l.stopPropagation&&l.stopPropagation(),l.preventDefault&&l.preventDefault()},[n,r,s]);return(0,mn.jsx)("div",{className:Xo,onMouseDown:i})};var lt=F(require("classnames"));var re=require("react/jsx-runtime"),pn="vuuSortIndicator",dn=({sorted:e})=>{if(!e)return null;let t=typeof e=="number"?e<0?"dsc":"asc":e==="A"?"asc":"dsc";return typeof e=="number"?(0,re.jsxs)("div",{className:(0,lt.default)(pn,"multi-col",t),children:[(0,re.jsx)("span",{"data-icon":`sorted-${t}`}),(0,re.jsx)("span",{className:"vuuSortPosition",children:Math.abs(e)})]}):(0,re.jsx)("div",{className:(0,lt.default)(pn,"single-col"),children:(0,re.jsx)("span",{"data-icon":`sorted-${t}`})})};var se=require("react"),$e=({column:e,onResize:t,rootRef:n})=>{let o=(0,se.useRef)(0),r=(0,se.useRef)(!1),{name:s}=e,i=(0,se.useCallback)(()=>{if(t&&n.current){let{width:a}=n.current.getBoundingClientRect();o.current=Math.round(a),r.current=!0,t==null||t("begin",s)}},[s,t,n]),l=(0,se.useCallback)((a,m)=>{if(n.current&&t){let{width:c}=n.current.getBoundingClientRect(),p=Math.round(c)+m;p!==o.current&&p>0&&(t("resize",s,p),o.current=p)}},[s,t,n]),u=(0,se.useCallback)(()=>{t&&(t("end",s,o.current),r.current=!1)},[s,t]);return{isResizing:r.current,onDrag:l,onDragStart:i,onDragEnd:u}};var fn=F(require("classnames")),bn=require("react");var hn=require("react/jsx-runtime");var gn=({column:e,filter:t})=>{let n=Ae(),o=(0,bn.useCallback)(r=>{r.stopPropagation(),n(r,"filter",{column:e,filter:t})},[e,t,n]);return e.filter?(0,hn.jsx)("div",{className:(0,fn.default)("vuuFilterIndicator"),"data-icon":"filter",onClick:o}):null};var Z=require("react/jsx-runtime"),De="vuuTable-headerCell",Oe=({column:e,className:t,onClick:n,onDragEnd:o,onDragStart:r,onResize:s,...i})=>{let l=(0,fe.useRef)(null),{isResizing:u,...a}=$e({column:e,onResize:s,rootRef:l}),m=Ae(),c=d=>{m(d,"header",{column:e})},p=(0,fe.useCallback)(d=>!u&&(n==null?void 0:n(d)),[u,n]),x=(0,fe.useCallback)(d=>{r==null||r(d)},[r]),C=(0,fe.useCallback)(()=>{o==null||o()},[o]),b=(0,Cn.default)(De,t,{vuuPinLeft:e.pin==="left",vuuEndPin:e.endPin,[`${De}-resizing`]:e.resizing,[`${De}-right`]:e.align==="right"});return(0,Z.jsx)("th",{className:b,...i,onClick:p,onContextMenu:c,onMouseDown:x,onMouseUp:C,ref:l,children:(0,Z.jsxs)("div",{className:`${De}-inner`,children:[(0,Z.jsx)(gn,{column:e}),(0,Z.jsx)("div",{className:`${De}-label`,children:e.label}),(0,Z.jsx)(dn,{sorted:e.sorted}),e.resizeable!==!1?(0,Z.jsx)(ze,{...a}):null]})})};var W=require("react/jsx-runtime"),yn="vuuDataTable",{RENDER_IDX:qo}=Mn.metadataKeys,Dn=({columns:e,data:t,headerHeight:n,onHeaderCellDragEnd:o,rowHeight:r})=>{let s=(0,xn.useCallback)(()=>{o==null||o()},[o]);return(0,W.jsx)(W.Fragment,{children:e.map((i,l)=>(0,W.jsx)("table",{className:(0,vn.default)(`${yn}-table`,`${yn}-columnBased`,{vuuPinLeft:i.pin==="left"}),"data-idx":l,id:`col-${l}`,style:{width:i.width,left:i.pinnedLeftOffset,"--vuuTableHeaderHeight":`${n}px`,"--row-height":`${r}px`},children:(0,W.jsxs)("tbody",{children:[(0,W.jsx)("tr",{children:(0,W.jsx)(Oe,{column:i,"data-idx":l,onDragEnd:s},l)},"header"),t.map((u,a)=>(0,W.jsx)(Ne,{columns:[i],height:r,index:a,row:u},u[qo])),(0,W.jsx)("tr",{className:"vuuTable-filler"})]})},i.name))})};var wn=require("@vuu-ui/vuu-utils"),Tn=e=>(t,n)=>{let o=[];if(e===void 0)return o;if(t==="header")o.push(...Yo(n,e)),o.push(...Zo(n,e)),o.push(...Qo(n,e)),o.push(...Jo(n,e));else if(t==="filter"){let{column:r,filter:s}=n,i=(s==null?void 0:s.column)===(r==null?void 0:r.name);o.push({label:"Edit filter",action:"filter-edit",options:n}),o.push({label:"Remove filter",action:"filter-remove-column",options:n}),r&&!i&&o.push({label:"Remove all filters",action:"remove-filters",options:n})}return o};function Yo(e,{sort:{sortDefs:t}}){let{column:n}=e,o=[];if(n===void 0)return o;let r=t.length>0;return n.sorted==="A"?o.push({label:"Reverse Sort (DSC)",action:"sort-dsc",options:e}):n.sorted==="D"?o.push({label:"Reverse Sort (ASC)",action:"sort-asc",options:e}):typeof n.sorted=="number"?(n.sorted>0?o.push({label:"Reverse Sort (DSC)",action:"sort-add-dsc",options:e}):o.push({label:"Reverse Sort (ASC)",action:"sort-add-asc",options:e}),r&&Math.abs(n.sorted)<t.length&&o.push({label:"Remove from sort",action:"sort-remove",options:e}),o.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):r?(o.push({label:"Add to sort",children:[{label:"Ascending",action:"sort-add-asc",options:e},{label:"Descending",action:"sort-add-dsc",options:e}]}),o.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):o.push({label:"Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]}),o}function Qo(e,t){let{column:n}=e;if(n===void 0||t.groupBy.length===0)return[];let{name:o,label:r=o}=n;return[{label:`Aggregate ${r}`,children:[{label:"Count",action:"agg-count",options:e}].concat((0,wn.isNumericColumn)(n)?[{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 mt=(e,t)=>({label:`Pin ${t}`,action:`column-pin-${t}`,options:e}),ut=e=>mt(e,"left"),at=e=>mt(e,"floating"),ct=e=>mt(e,"right");function Jo(e,t){let{column:n}=e;if(n===void 0)return[];let{name:o,label:r=o,pin:s}=n,i=[{label:"Hide column",action:"column-hide",options:e}];return s===void 0?i.push({label:"Pin column",children:[ut(e),at(e),ct(e)]}):s==="left"?i.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[at(e),ct(e)]}):s==="right"?i.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[ut(e),at(e)]}):s==="floating"&&i.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[ut(e),ct(e)]}),i}function Zo(e,{groupBy:t}){let{column:n}=e,o=[];if(n===void 0)return o;let{name:r,label:s=r}=n;return t.length===0?o.push({label:`Group by ${s}`,action:"group",options:e}):o.push({label:`Add ${s} to group by`,action:"group-add",options:e}),o}var Rn=require("@vuu-ui/vuu-filters"),q=require("@vuu-ui/vuu-utils"),jo=(e,t)=>{if(e.filterStruct&&t){let[n,o]=(0,Rn.removeColumnFromFilter)(t,e.filterStruct);return{filter:o,filterStruct:n}}else return e},Pn=({dataSource:e,dispatchColumnAction:t})=>(o,r)=>{let s=r;if(s.column&&e){let{column:i}=s;switch(o){case"sort-asc":return e.sort=(0,q.setSortColumn)(e.sort,i,"A"),!0;case"sort-dsc":return e.sort=(0,q.setSortColumn)(e.sort,i,"D"),!0;case"sort-add-asc":return e.sort=(0,q.addSortColumn)(e.sort,i,"A"),!0;case"sort-add-dsc":return e.sort=(0,q.addSortColumn)(e.sort,i,"D"),!0;case"group":return e.groupBy=(0,q.addGroupColumn)(e.groupBy,i),!0;case"group-add":return e.groupBy=(0,q.addGroupColumn)(e.groupBy,i),!0;case"filter-remove-column":return e.filter=jo(e.filter,i),!0;case"remove-filters":return e.filter={filter:""},!0;case"column-pin-left":return t({type:"updateColumnProp",column:i,pin:"left"}),!0;case"column-unpin":return t({type:"updateColumnProp",column:i,pin:void 0}),!0;default:}}return!1};var Be=require("@vuu-ui/vuu-utils"),dt=require("react");var pt=F(require("classnames")),En=require("react");var Y=require("react/jsx-runtime"),be="vuuTable-groupHeaderCell",er=e=>{let{column:t,className:n,onRemoveColumn:o}=e;return(0,Y.jsxs)("div",{className:(0,pt.default)(`${be}-col`,n),role:"columnheader",children:[(0,Y.jsx)("span",{className:`${be}-label`,children:t.name}),(0,Y.jsx)("span",{className:`${be}-close`,"data-icon":"close-circle",onClick:()=>o==null?void 0:o(t)})]})},Sn=({column:e,className:t,onRemoveColumn:n,onResize:o,...r})=>{let s=(0,En.useRef)(null),{isResizing:i,...l}=$e({column:e,onResize:o,rootRef:s}),u=(0,pt.default)(be,t,{vuuPinLeft:e.pin==="left",[`${be}-right`]:e.align==="right"}),{columns:a}=e;return(0,Y.jsx)("th",{className:u,...r,children:(0,Y.jsxs)("div",{className:`${be}-inner`,children:[a.map(m=>(0,Y.jsx)(er,{column:m,onRemoveColumn:n},m.key)),e.resizeable!==!1?(0,Y.jsx)(ze,{...l}):null]})})};var G=require("react/jsx-runtime"),Hn="vuuDataTable",{RENDER_IDX:tr}=Be.metadataKeys,Ln=({columns:e,data:t,onColumnResize:n,onHeaderCellDragStart:o,onRemoveColumnFromGroupBy:r,onSort:s,onToggleGroup:i,rowHeight:l,valueFormatters:u})=>{let a=(0,dt.useCallback)(c=>{console.log("handkleDRagSTart",{evt:c,onHeaderCellDragStart:o})},[o]),m=(0,dt.useCallback)(c=>{var D;let x=c.target.closest(".vuuTable-headerCell"),C=parseInt((D=x==null?void 0:x.dataset.idx)!=null?D:"-1"),b=e[C],d=c.shiftKey;b&&s(b,d)},[e,s]);return(0,G.jsxs)("table",{className:`${Hn}-table`,children:[(0,G.jsx)("colgroup",{children:e.map((c,p)=>(0,G.jsx)("col",{width:`${c.width}px`},p))}),(0,G.jsx)("thead",{children:(0,G.jsx)("tr",{children:e.map((c,p)=>(0,Be.isGroupColumn)(c)?(0,G.jsx)(Sn,{column:c,"data-idx":p,onRemoveColumn:r,onResize:n,style:{left:c.pinnedLeftOffset}},p):(0,G.jsx)(Oe,{column:c,"data-idx":p,onClick:m,onDragStart:a,onResize:n,style:{left:c.pinnedLeftOffset}},p))})}),(0,G.jsxs)("tbody",{children:[t==null?void 0:t.map((c,p)=>(0,G.jsx)(Ne,{columns:e,height:l,index:p,onToggleGroup:i,row:c,valueFormatters:u},c[tr])),(0,G.jsx)("tr",{className:`${Hn}-filler`})]})]})};var Ce=require("@vuu-ui/vuu-utils"),K=require("react");var nr=([,e],[,t])=>e-t,Ge=class{constructor(t){this.keys=new Map,this.free=[],this.nextKeyValue=0,this.reset(t)}next(){return this.free.length>0?this.free.pop():this.nextKeyValue++}reset({from:t,to:n}){this.keys.forEach((r,s)=>{(s<t||s>=n)&&(this.free.push(r),this.keys.delete(s))});let o=n-t;this.keys.size+this.free.length>o&&(this.free.length=o-this.keys.size);for(let r=t;r<n;r++)if(!this.keys.has(r)){let s=this.next();this.keys.set(r,s)}}keyFor(t){let n=this.keys.get(t);if(n===void 0)throw console.log(`key not found
+        keys: ${Object.entries(this.keys).map((o,r)=>`${o}=>${r}`).join(", ")}
         free : ${this.free.join(",")}  
-      `),Error(`KeySet, no key found for rowIndex ${e}`);return o}withKeys(e){for(let o of e)o[1]=this.keyFor(o[0]);return e.sort(dt)}};var Se=require("@heswell/salt-lab"),He=require("@vuu-ui/vuu-utils"),Le=require("react"),ft=100,bt=He.metadataKeys.count,ht=({serverDataType:t})=>t===void 0,gt=(t,e,o)=>{var s;let n=e.indexOf(t.name);return n!==-1&&o[n]?o[n]:(s=t.serverDataType)!=null?s:"string"},yt=["int","long","double"],ke=t=>t===void 0?void 0:yt.includes(t)?"right":"left",Ct=(t,e)=>{switch(e.type){case"init":return ze(e.config);case"moveColumn":return Rt(t,e);case"setTypes":return xt(t,e);case"updateColumnProp":return Dt(t,e);default:return console.log(`unhandled action ${e.type}`),t}},We=t=>{let[e,o]=(0,Le.useReducer)(Ct,t,ze);return{columns:e.columns,dispatchColumnAction:o}};function ze(t){return console.log("init, columns",{columns:t.columns}),{columns:t.columns.map(Tt)}}var Tt=(t,e)=>{let{align:o=ke(t.serverDataType),name:n,label:s=n,width:i=ft,...r}=t;return{...r,align:o,label:s,key:e+bt,name:n,width:i}};function Rt(t,{column:e,moveBy:o,moveTo:n}){let{columns:s}=t;if(typeof o=="number"){let i=s.indexOf(e),r=s.slice(),[l]=r.splice(i,1);return r.splice(i+o,0,l),{...t,columns:r}}else if(typeof n=="number"){let i=s.indexOf(e);return{...t,columns:(0,Se.moveItem)(s,i,n)}}return t}function xt(t,{columnNames:e,serverDataTypes:o}){console.log("setTypes, existing columns",{state:t});let{columns:n}=t;if(n.some(ht)){let s=n.map(i=>{var l;let r=gt(i,e,o);return{...i,align:(l=i.align)!=null?l:ke(r),serverDataType:r}});return{...t,columns:s}}else return t}function Dt(t,{align:e,column:o,label:n,width:s}){let{columns:i}=t,r=i.find(l=>l.name===o.name);return r&&((e==="left"||e==="right")&&(i=Z(i,{...r,align:e})),typeof n=="string"&&(i=Z(i,{...r,label:n})),typeof s=="number"&&(i=Z(i,{...r,width:s}))),{...t,columns:i}}function Z(t,e){return t.map(o=>o.name===e.name?e:o)}var F=require("@vuu-ui/vuu-utils"),y=require("react"),{RENDER_IDX:Ee}=F.metadataKeys,Ve=(t,e)=>t[Ee]-e[Ee];function Ae({dataSource:t,onSizeChange:e,onSubscribed:o,range:n={from:0,to:0}}){let[,s]=(0,y.useState)(null),i=(0,y.useRef)(!0),r=(0,y.useRef)(!1),l=(0,y.useRef)({from:0,to:0}),u=(0,y.useRef)(null),p=(0,y.useRef)([]),m=(0,y.useMemo)(()=>new ee((0,F.getFullRange)(n)),[]),c=(0,y.useCallback)(a=>{for(let b of a)m.add(b);p.current=m.data.slice().sort(Ve),r.current=!0},[m]),f=(0,y.useCallback)(a=>{a.type==="subscribed"?o==null||o(a):a.type==="viewport-update"&&(typeof a.size=="number"&&(e==null||e(a.size),m.setRowCount(a.size)),a.rows?c(a.rows):typeof a.size=="number"&&(p.current=m.data.slice().sort(Ve),r.current=!0))},[m,e,o,c]);(0,y.useEffect)(()=>()=>{u.current&&(cancelAnimationFrame(u.current),u.current=null),i.current=!1},[]);let h=(0,y.useCallback)(()=>{i.current&&(r.current&&(s({}),r.current=!1),u.current=requestAnimationFrame(h))},[s]);(0,y.useEffect)(()=>{u.current=requestAnimationFrame(h)},[h]);let d=(0,y.useCallback)((a,b)=>{l.current={from:a,to:b},t==null||t.setRange(a,b),m.setRange(a,b)},[t,m]);return(0,y.useEffect)(()=>(t==null||t.subscribe({range:l.current},f),()=>{t==null||t.unsubscribe()}),[t,f]),{data:p.current,setRange:d,dataSource:t}}var ee=class{constructor({from:e,to:o}){this.rowCount=0;this.setRowCount=e=>{e<this.data.length&&(this.data.length=e),this.rowCount=e};this.range=new F.WindowRange(e,o),this.data=new Array(o-e),this.rowCount=0}add(e){let[o]=e;if(this.isWithinRange(o)){let n=o-this.range.from;this.data[n]=e}}getAtIndex(e){return this.range.isWithin(e)&&this.data[e-this.range.from]!=null?this.data[e-this.range.from]:void 0}isWithinRange(e){return this.range.isWithin(e)}setRange(e,o){if(e!==this.range.from||o!==this.range.to){let[n,s]=this.range.overlap(e,o),i=new Array(o-e);for(let r=n;r<s;r++){let l=this.getAtIndex(r);if(l){let u=r-e;i[u]=l}}this.data=i,this.range.from=e,this.range.to=o}}};var wt={},Fe=t=>t==null?"":typeof t=="string"?t:t.toString(),vt=({align:t="right",type:e})=>{var o;if(e===void 0||typeof e=="string")return Fe;{let{alignOnDecimals:n=!1,decimals:s,zeroPad:i=!1}=(o=e.formatting)!=null?o:wt;return r=>{if(typeof r=="string"&&(r.startsWith("\u03A3")||r.startsWith("[")))return r;let l=typeof r=="number"?r:typeof r=="string"?parseFloat(r):void 0;return(0,$e.roundDecimal)(l,t,s,i,n)}}},Mt=t=>{let{serverDataType:e}=t;return e==="string"||e==="char"?o=>o:e==="double"?vt(t):Fe},Pe=({config:t,data:e,dataSource:o,onConfigChange:n})=>{var C;let s=(0,x.useMemo)(()=>new _({from:0,to:0}),[]),[i,r]=(0,x.useState)([]),[l,u]=(0,x.useState)((C=e==null?void 0:e.length)!=null?C:0);if(e===void 0&&o===void 0)throw Error("no data source provided to DataTable");let p=(0,x.useCallback)(g=>{u(g)},[]),{columns:m,dispatchColumnAction:c}=We(t),f=(0,x.useCallback)(g=>{if(g.tableMeta){let{columns:T,dataTypes:S}=g.tableMeta;c({type:"setTypes",columnNames:T,serverDataTypes:S})}},[c]),h=(0,x.useMemo)(()=>m.reduce((g,T)=>(g[T.name]=Mt(T),g),{}),[m]);(0,x.useMemo)(()=>{n==null||n({...t,columns:m})},[m,t,n]),(0,x.useMemo)(()=>{console.log("config has changed re-init store"),c({type:"init",config:t})},[t,c]);let{data:d,setRange:a}=Ae({dataSource:o,onSubscribed:f,onSizeChange:p}),b=(0,x.useCallback)((g,T)=>{if(o)a(g,T);else{s.reset({from:g,to:T});let S=e?s.withKeys(e.slice(g,T)):[];r(S)}},[e,o,s,a]);return{valueFormatters:h,columns:m,data:o?d:i,dispatchColumnAction:c,setRangeVertical:b,rowCount:l}};var k=require("react"),Oe=t=>{let{scrollLeft:e,scrollTop:o}=t,{clientHeight:n,clientWidth:s,scrollHeight:i,scrollWidth:r}=t,l=e/(r-s),u=o/(i-n);return[l,u,e,o]},St=t=>{let{clientHeight:e,clientWidth:o,scrollHeight:n,scrollWidth:s}=t;return[s-o,n-e]},Ne=({onRangeChange:t,rootRef:e,rowHeight:o,scrollContainerRef:n,tableContainerRef:s,viewport:i})=>{let r=(0,k.useRef)(-1),l=(0,k.useRef)(!1),{rowCount:u,maxScrollContainerScrollHorizontal:p,maxScrollContainerScrollVertical:m}=i,c=(0,k.useCallback)((d,a)=>{let{current:b}=s;if(b){let C=Math.floor(a/o);C!==r.current&&(r.current=C,t(C,C+u)),b.scrollLeft=d,b.scrollTop=a}},[t,o,s,u]),f=(0,k.useCallback)(()=>{let{current:d}=e,{current:a}=n;if(d&&a){let[b,C,g,T]=Oe(d);l.current=!0,a.scrollLeft=Math.round(b*p),a.scrollTop=Math.round(C*m),c(g,T)}},[p,m,e,n,c]),h=(0,k.useCallback)(()=>{let{current:d}=e,{current:a}=n,{current:b}=l;if(b)l.current=!1;else if(d&&a){let[C,g]=Oe(a),[T,S]=St(d),M=Math.round(C*T),H=Math.round(g*S);d.scrollLeft=M,d.scrollTop=H,c(M,H)}},[e,n,c]);return(0,k.useLayoutEffect)(()=>{c(0,0)},[c]),{handleScrollbarScroll:h,handleRootScroll:f}};var V=require("react"),Ht=t=>{let e=0,o=0,n=100;for(let s=0;s<t.length;s++){let i=t[s],{pin:r,width:l=n}=i;r==="left"?(i.pinnedLeftOffset=e,e+=l):o+=l}return{pinnedWidthLeft:e,unpinnedWidth:o}},Ke=({columns:t,headerHeight:e,rootRef:o,rowCount:n,rowHeight:s,size:i})=>{let{pinnedWidthLeft:r,unpinnedWidth:l}=(0,V.useMemo)(()=>Ht(t),[t]),{pixelHeight:u,pixelWidth:p}=i,m=B(i),c=15,f=n*s,h=e+f+c,d=r+l,a=d-p+r,b=f+e-(u-e-c),[C,g]=(0,V.useState)({contentHeight:f,left:-1,right:-1,scrollbarSize:c,scrollContentHeight:h,status:"unmeasured",top:-1}),[T,S]=(0,V.useMemo)(()=>{let M=(i.pixelHeight-e)/s,H=Number.isInteger(M)?M+1:Math.ceil(M),R=(n-H)*s;return[H,R]},[e,i.pixelHeight,n,s]);return(0,V.useLayoutEffect)(()=>{if(o.current&&m){let{left:M,right:H,top:R}=o.current.getBoundingClientRect();g({contentHeight:f,left:M,status:"measured",right:H,scrollbarSize:c,scrollContentHeight:h,top:R})}},[f,o,h,m]),{measurements:C,viewport:{fillerHeight:S,maxScrollContainerScrollHorizontal:a,maxScrollContainerScrollVertical:b,pinnedWidthLeft:r,rowCount:T,scrollContentWidth:d}}};var v=require("react/jsx-runtime"),W="vuuDataTable",Lt={display:"none"},kt=({config:t,data:e,dataSource:o,headerHeight:n=25,height:s,onConfigChange:i,onShowConfigEditor:r,rowHeight:l=20,allowConfigEditing:u=!1,style:p,tableLayout:m="row",width:c,...f})=>{let h=(0,A.useRef)(null),d=(0,A.useRef)(null),a=(0,A.useRef)(null),b=(0,A.useRef)(null),{columns:C,data:g,dispatchColumnAction:T,setRangeVertical:S,rowCount:M,valueFormatters:H}=Pe({config:t,data:e,dataSource:o,onConfigChange:i}),R=Me(h,s,c),{measurements:O,viewport:P}=Ke({columns:C,headerHeight:n,rootRef:d,rowCount:M,rowHeight:l,size:R}),Ie=(0,A.useCallback)((oe,X)=>{let Je=C[oe];T({type:"moveColumn",column:Je,moveTo:X})},[C,T]),{handleRootScroll:Ue,handleScrollbarScroll:Be}=Ne({onRangeChange:S,rootRef:d,rowHeight:l,scrollContainerRef:a,tableContainerRef:b,viewport:P,viewportHeight:R.pixelHeight-n}),{draggable:je,draggedItemIndex:_e,tableLayout:te,handleHeaderCellDragStart:Xe}=xe({onDrop:Ie,tableContainerRef:b,tableLayout:m});if(j(R)&&!B(R))return(0,v.jsx)("div",{className:`${W}-root`,ref:h,style:{"--table-height":"100%","--table-width":"100%"},...f});let Ye={...p,"--content-height":`${O.scrollContentHeight}px`,"--content-width":`${P.scrollContentWidth}px`,"--filler-height":`${P.fillerHeight}px`,"--pinned-width-left":`${P.pinnedWidthLeft}px`,"--header-height":`${n}px`,"--row-height":`${l}px`,"--scrollbar-size":`${O.scrollbarSize}px`,"--table-pixel-height":`${R.pixelHeight}px`,"--table-pixel-width":`${R.pixelWidth}px`,"--table-height":j(R)?R.height:`${R.pixelHeight}px`,"--table-width":j(R)?R.width:`${R.pixelWidth}px`},qe=O.left===-1&&O.top===-1?Lt:{left:P.pinnedWidthLeft-1,top:n-1},Qe=te==="column"?he:Te;return(0,v.jsxs)("div",{className:W,ref:h,style:Ye,children:[(0,v.jsx)("div",{className:`${W}-scrollContainer`,onScroll:Be,ref:a,style:qe,children:(0,v.jsx)("div",{className:`${W}-scrollContent`})}),(0,v.jsxs)("div",{className:`${W}-content`,onScroll:Ue,ref:d,...f,children:[(0,v.jsx)("div",{className:`${W}-scrollContent`}),(0,v.jsx)("div",{className:`${W}-tableContainer`,ref:b,children:(0,v.jsx)(Qe,{columns:C.filter((oe,X)=>X!==_e),data:g,headerHeight:n,onHeaderCellDragStart:te==="row"?Xe:void 0,rowHeight:l,valueFormatters:H})}),je]}),u?(0,v.jsx)(Ge.Button,{className:`${W}-settings`,"data-icon":"settings",onClick:r,variant:"secondary"}):null]})};
+      `),Error(`KeySet, no key found for rowIndex ${t}`);return n}withKeys(t){for(let n of t)n[1]=this.keyFor(n[0]);return t.sort(nr)}};var ge=require("@vuu-ui/vuu-utils"),L=require("react"),{RENDER_IDX:kn}=ge.metadataKeys,In=(e,t)=>e[kn]-t[kn],or=e=>["aggregate","filter","groupBy","sort"].includes(e.type);function An({dataSource:e,onConfigChange:t,onSizeChange:n,onSubscribed:o,range:r={from:0,to:0}}){let[,s]=(0,L.useState)(null),i=(0,L.useRef)(!0),l=(0,L.useRef)(!1),u=(0,L.useRef)({from:0,to:0}),a=(0,L.useRef)(null),m=(0,L.useRef)([]),c=(0,L.useMemo)(()=>new ft((0,ge.getFullRange)(r)),[]),p=(0,L.useCallback)(d=>{for(let D of d)c.add(D);m.current=c.data.slice().sort(In),l.current=!0},[c]),x=(0,L.useCallback)(d=>{d.type==="subscribed"?o==null||o(d):d.type==="viewport-update"?(typeof d.size=="number"&&(n==null||n(d.size),c.setRowCount(d.size)),d.rows?p(d.rows):typeof d.size=="number"&&(m.current=c.data.slice().sort(In),l.current=!0)):or(d)&&(t==null||t(d))},[c,t,n,o,p]);(0,L.useEffect)(()=>()=>{a.current&&(cancelAnimationFrame(a.current),a.current=null),i.current=!1},[]);let C=(0,L.useCallback)(()=>{i.current&&(l.current&&(s({}),l.current=!1),a.current=requestAnimationFrame(C))},[s]);(0,L.useEffect)(()=>{a.current=requestAnimationFrame(C)},[C]);let b=(0,L.useCallback)((d,D)=>{u.current={from:d,to:D},e==null||e.setRange(d,D),c.setRange(d,D)},[e,c]);return(0,L.useEffect)(()=>(e==null||e.subscribe({range:u.current},x),()=>{e==null||e.unsubscribe()}),[e,x]),{data:m.current,setRange:b,dataSource:e}}var ft=class{constructor({from:t,to:n}){this.rowCount=0;this.setRowCount=t=>{t<this.data.length&&(this.data.length=t),this.rowCount=t};this.range=new ge.WindowRange(t,n),this.data=new Array(n-t),this.rowCount=0}add(t){let[n]=t;if(this.isWithinRange(n)){let o=n-this.range.from;this.data[o]=t}}getAtIndex(t){return this.range.isWithin(t)&&this.data[t-this.range.from]!=null?this.data[t-this.range.from]:void 0}isWithinRange(t){return this.range.isWithin(t)}setRange(t,n){if(t!==this.range.from||n!==this.range.to){let[o,r]=this.range.overlap(t,n),s=new Array(n-t);for(let i=o;i<r;i++){let l=this.getAtIndex(i);if(l){let u=i-t;s[u]=l}}this.data=s,this.range.from=t,this.range.to=n}}};var A=require("react");function rr(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var bt="ArrowUp",gt="ArrowDown",ht="ArrowLeft",Ct="ArrowRight";var Ve="Home",we="End",We="PageUp",Ue="PageDown";var sr=new Set(["Enter","Delete"," "]),ir=new Set(["Tab"]),lr=new Set(["ArrowRight","ArrowLeft"]),Kn=new Set([Ve,we,We,Ue,gt,ht,Ct,bt]),ur=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),yl=rr(sr,Kn,lr,ur,ir);var Fn=({key:e})=>Kn.has(e);var Nn=e=>`thead th:nth-child(${e+1})`,ar=(e,t)=>`tbody > tr[data-idx='${e}'] > td:nth-child(${t+1})`;function cr(e,[t,n],o,r){return e===bt||e===we?t>-1?[t-1,n]:[t,n]:e===gt?t===-1?[0,n]:t===r-1?[t,n]:[t+1,n]:e===Ct?n<o-1?[t,n+1]:[t,n]:e===ht?n>0?[t,n-1]:[t,n]:[t,n]}var zn=({columnCount:e=0,containerRef:t,disableHighlightOnFocus:n,data:o,requestScroll:r,rowCount:s=0})=>{var h;let i=(0,A.useRef)([-1,-1]),l=(0,A.useRef)(),u=(0,A.useRef)([-1,0]),a=(0,A.useCallback)(([f,y])=>{var w;let R=f===-1?Nn(y):ar(f,y);return(w=t.current)==null?void 0:w.querySelector(R)},[t]),m=f=>f==null?void 0:f.closest("th,td"),c=f=>{var y,R;if(f.tagName==="TH")return[-1,parseInt((y=f.dataset.idx)!=null?y:"-1",10)];{let w=f.closest("tr");if(w){let T=parseInt((R=w.dataset.idx)!=null?R:"-1",10),E=Array.from(w.childNodes).indexOf(f);return[T,E]}}return[-1,-1]},p=(0,A.useCallback)(f=>{var y;if(t.current){let R=a(f);R&&(R!==l.current&&((y=l.current)==null||y.setAttribute("tabindex",""),l.current=R,R.setAttribute("tabindex","0")),R.focus())}},[t,a]),x=(0,A.useCallback)((f,y,R=!1)=>{let w=[f,y];u.current=w,p(w),R&&(i.current=w)},[p]),C=(0,A.useCallback)(async(f,y)=>{switch(f){case Ue:r==null||r({type:"scroll-page",direction:"down"});break;case We:r==null||r({type:"scroll-page",direction:"up"});break;case Ve:r==null||r({type:"scroll-end",direction:"home"});break;case we:r==null||r({type:"scroll-end",direction:"end"});break}return y},[r]),b=(0,A.useCallback)(()=>{var f;if(n!==!0&&(f=t.current)!=null&&f.contains(document.activeElement)){let y=m(document.activeElement);y&&(i.current=c(y))}},[n,t]),d=(0,A.useCallback)(async f=>{let[y,R]=f.key===Ue||f.key===We||f.key===we||f.key===Ve?await C(f.key,u.current):cr(f.key,u.current,e,s);(y!==u.current[0]||R!==u.current[1])&&x(y,R,!0)},[e,C,s,x]),D=(0,A.useCallback)(f=>{o.length>0&&Fn(f)&&(f.preventDefault(),f.stopPropagation(),d(f))},[o,d]),v=(0,A.useCallback)(f=>{let y=f.target,R=m(y),[w,T]=c(R);x(w,T)},[x]),g=(0,A.useMemo)(()=>({onClick:v,onFocus:b,onKeyDown:D}),[v,b,D]),M=((h=t.current)==null?void 0:h.firstChild)!=null;return(0,A.useEffect)(()=>{var f;if(M&&l.current===void 0){let y=(f=t.current)==null?void 0:f.querySelector(Nn(0));y&&(y.setAttribute("tabindex","0"),l.current=y)}},[t,M]),g};var he=require("react");var le=require("react");var ie=new Map,On=(e,t,n)=>{switch(n){case"height":return t.height;case"clientHeight":return e.clientHeight;case"clientWidth":return e.clientWidth;case"contentHeight":return t.contentHeight;case"contentWidth":return t.contentWidth;case"scrollHeight":return Math.ceil(e.scrollHeight);case"scrollWidth":return Math.ceil(e.scrollWidth);case"width":return t.width;default:return 0}},$n=new ResizeObserver(e=>{for(let t of e){let{target:n,borderBoxSize:o,contentBoxSize:r}=t,s=ie.get(n);if(s){let[{blockSize:i,inlineSize:l}]=o,[{blockSize:u,inlineSize:a}]=r,{onResize:m,measurements:c}=s,p=!1;for(let[x,C]of Object.entries(c)){let b=On(n,{height:i,width:l,contentHeight:u,contentWidth:a},x);b!==C&&(p=!0,c[x]=b)}p&&m&&m(c)}}});function Bn(e,t,n,o=!1){let r=(0,le.useRef)(t),s=(0,le.useCallback)(i=>{let{width:l,height:u}=i.getBoundingClientRect(),{clientWidth:a,clientHeight:m}=i;return r.current.reduce((c,p)=>(c[p]=On(i,{width:l,height:u,contentHeight:m,contentWidth:a},p),c),{})},[]);(0,le.useEffect)(()=>{let i=e.current;async function l(){ie.set(i,{measurements:{}}),await document.fonts.ready;let u=ie.get(i);if(u){let a=s(i);u.measurements=a,$n.observe(i),o&&n(a)}else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation","font-weight:bold; color:red;")}if(i){if(ie.has(i))throw Error("useResizeObserver attemping to observe same element twice");l()}return()=>{i&&ie.has(i)&&($n.unobserve(i),ie.delete(i))}},[s,e]),(0,le.useEffect)(()=>{let i=e.current,l=ie.get(i);if(l){if(r.current!==t){r.current=t;let u=s(i);l.measurements=u}l.onResize=n}},[t,s,e,n])}var mr=["clientHeight","clientWidth"],Gn=e=>Number.isFinite(e),yt=({defaultHeight:e=0,defaultWidth:t=0,height:n,width:o})=>{let r=(0,he.useRef)(null),[s,i]=(0,he.useState)({outer:{height:n!=null?n:"100%",width:o!=null?o:"100%"}}),l=(0,he.useCallback)(({clientWidth:u,clientHeight:a})=>{i(m=>{let{inner:c,outer:p}=m;return Gn(a)&&Gn(u)&&(u!==(c==null?void 0:c.width)||a!==(c==null?void 0:c.height))?{outer:p,inner:{width:Math.floor(u)||t,height:Math.floor(a)||e}}:m})},[e,t]);return Bn(r,mr,l,!0),{containerRef:r,outerSize:s.outer,innerSize:s.inner}};var Wn=require("@heswell/salt-lab"),U=require("@vuu-ui/vuu-utils"),Un=require("@vuu-ui/vuu-filters"),_n=require("react"),pr=100,dr=U.metadataKeys.count,fr=({serverDataType:e})=>e===void 0,br=(e,t,n)=>{var r;let o=t.indexOf(e.name);return o!==-1&&n[o]?n[o]:(r=e.serverDataType)!=null?r:"string"},gr=["int","long","double"],Xn=e=>e===void 0?void 0:gr.includes(e)?"right":"left",hr=(e,t)=>{switch(t.type){case"init":return Yn(t.config);case"moveColumn":return Cr(e,t);case"resizeColumn":return yr(e,t);case"setTypes":return Mr(e,t);case"updateColumnProp":return Mt(e,t);case"tableConfig":return xr(e,t);default:return console.log(`unhandled action ${t.type}`),e}},qn=e=>{let[t,n]=(0,_n.useReducer)(hr,e,Yn);return{columns:t.columns,dispatchColumnAction:n}};function Yn(e){let t=e.columns.map(Vn);return t.some(U.isPinned)?{columns:(0,U.sortPinnedColumns)(t)}:{columns:e.columns.map(Vn)}}var Vn=(e,t)=>{let{align:n=Xn(e.serverDataType),name:o,label:r=o,width:s=pr,...i}=e;return{...i,align:n,label:r,key:t+dr,name:o,originalIdx:t,width:s}};function Cr(e,{column:t,moveBy:n,moveTo:o}){let{columns:r}=e;if(typeof n=="number"){let s=r.indexOf(t),i=r.slice(),[l]=i.splice(s,1);return i.splice(s+n,0,l),{...e,columns:i}}else if(typeof o=="number"){let s=r.indexOf(t);return{...e,columns:(0,Wn.moveItem)(r,s,o)}}return e}function yr(e,{column:t,phase:n,width:o}){let r="updateColumnProp",s=n!=="end";switch(n){case"begin":case"end":return Mt(e,{type:r,column:t,resizing:s});case"resize":return Mt(e,{type:r,column:t,width:o});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${n}`)}}function Mr(e,{columnNames:t,serverDataTypes:n}){console.log("setTypes, existing columns",{state:e});let{columns:o}=e;if(o.some(fr)){let r=o.map(s=>{var l;let i=br(s,t,n);return{...s,align:(l=s.align)!=null?l:Xn(i),serverDataType:i}});return{...e,columns:r}}else return e}function Mt(e,t){let{columns:n}=e,{align:o,column:r,label:s,pin:i,resizing:l,width:u}=t,a=n.find(m=>m.name===r.name);return a&&((o==="left"||o==="right")&&(n=Te(n,{...a,align:o})),typeof s=="string"&&(n=Te(n,{...a,label:s})),typeof l=="boolean"&&(n=Te(n,{...a,resizing:l})),typeof u=="number"&&(n=Te(n,{...a,width:u})),"pin"in t&&(n=Te(n,{...a,pin:i}),n=(0,U.sortPinnedColumns)(n))),{...e,columns:n}}function xr(e,{filter:t,groupBy:n,sort:o}){let r=n!==void 0,s=typeof(t==null?void 0:t.filter)=="string",i=o&&o.sortDefs.length>0,l=e;return r&&(l={...e,columns:vr(e.columns,n)}),i&&(l={...e,columns:Dr(e.columns,o)}),s&&(l={...e,columns:wr(e.columns,t)}),l}function Te(e,t){return e.map(n=>n.name===t.name?t:n)}var vr=(e,t)=>{var n;if(t.length){let[o,r]=(0,U.extractGroupColumn)(e,t);if(o)return[o].concat(r)}else if((n=e[0])!=null&&n.isGroup)return(0,U.flattenColumnGroup)(e);return e},Dr=(e,t)=>e.map(n=>{let o=Tr(n,t);return o!==void 0?{...n,sorted:o}:n.sorted?{...n,sorted:void 0}:n}),wr=(e,{filterStruct:t})=>e.map(n=>{let o=(0,Un.extractFilterForColumn)(t,n.name);return o!==void 0?{...n,filter:o}:n.filter?{...n,filter:void 0}:n}),Tr=(e,{sortDefs:t})=>{let n=t.find(o=>o.column===e.name);if(n)return t.length>1?(t.indexOf(n)+1)*(n.sortType==="A"?1:-1):n.sortType};var z=require("react"),Qn=e=>{let{scrollLeft:t,scrollTop:n}=e,{clientHeight:o,clientWidth:r,scrollHeight:s,scrollWidth:i}=e,l=t/(i-r),u=n/(s-o);return[l,u,t,n]},Rr=e=>{let{clientHeight:t,clientWidth:n,scrollHeight:o,scrollWidth:r}=e;return[r-n,o-t]},Jn=({onRangeChange:e,rowHeight:t,viewport:n})=>{let o=(0,z.useRef)(null),r=(0,z.useRef)(null),s=(0,z.useRef)(null),i=(0,z.useRef)(!1),l=(0,z.useRef)(-1),{rowCount:u,maxScrollContainerScrollHorizontal:a,maxScrollContainerScrollVertical:m}=n,c=(0,z.useCallback)((d,D)=>{let{current:v}=s;v&&(v.scrollLeft=d,v.scrollTop=D)},[s]),p=(0,z.useCallback)(()=>{let{current:d}=s;if(d){let{scrollTop:D}=d,v=Math.floor(D/t);v!==l.current&&(l.current=v,e(v,v+u))}},[e,t,u]),x=(0,z.useCallback)(()=>{let{current:d}=r,{current:D}=o;if(d&&D){let[v,g,M,h]=Qn(d);i.current=!0,D.scrollLeft=Math.round(v*a),D.scrollTop=Math.round(g*m),c(M,h)}},[a,m,r,o,c]),C=(0,z.useCallback)(()=>{let{current:d}=r,{current:D}=o,{current:v}=i;if(v)i.current=!1;else if(d&&D){let[g,M]=Qn(D),[h,f]=Rr(d),y=Math.round(g*h),R=Math.round(M*f);d.scrollLeft=y,d.scrollTop=R,c(y,R)}},[r,o,c]),b=(0,z.useCallback)(d=>{let{current:D}=o;if(D){if(i.current=!1,d.type==="scroll-page"){let{clientHeight:v,scrollTop:g}=D,{direction:M}=d,h=M==="down"?v:-v;D.scrollTop=Math.min(Math.max(0,g+h),n.maxScrollContainerScrollVertical)}else if(d.type==="scroll-end"){let{direction:v}=d,g=v==="end"?n.maxScrollContainerScrollVertical:0;D.scrollTop=g}}},[n.maxScrollContainerScrollVertical]);return(0,z.useLayoutEffect)(()=>{p()},[p]),{onScrollbarContainerScroll:C,onContentContainerScroll:x,onTableContainerScroll:p,requestScroll:b,contentContainerRef:r,scrollbarContainerRef:o,tableContainerRef:s}};var xt=require("react"),Pr={fillerHeight:0,maxScrollContainerScrollHorizontal:0,maxScrollContainerScrollVertical:0,pinnedWidthLeft:0,rowCount:0,scrollContentHeight:0,scrollbarSize:0,scrollContentWidth:0},Er=e=>{let t=0,n=0;for(let o of e){let{pin:r,width:s}=o;r==="left"?t+=s:n+=s}return{pinnedWidthLeft:t,unpinnedWidth:n}},Zn=({columns:e,headerHeight:t,rowCount:n,rowHeight:o,size:r})=>{let{pinnedWidthLeft:s,unpinnedWidth:i}=(0,xt.useMemo)(()=>Er(e),[e]);return(0,xt.useMemo)(()=>{var u;if(r){let m=n*o,c=s+i,p=m+t-(((u=r==null?void 0:r.height)!=null?u:0)-t-15),x=c-r.width+s,C=(r.height-t)/o,b=Number.isInteger(C)?C+1:Math.ceil(C);return{fillerHeight:(n-b)*o,maxScrollContainerScrollHorizontal:x,maxScrollContainerScrollVertical:p,pinnedWidthLeft:s,rowCount:b,scrollContentHeight:t+m+15,scrollbarSize:15,scrollContentWidth:c}}else return Pr},[t,s,n,o,r,i])};var{KEY:jn,IS_EXPANDED:Sr}=Ce.metadataKeys,Hr={},eo=e=>e==null?"":typeof e=="string"?e:e.toString(),Lr=({align:e="right",type:t})=>{var n;if(t===void 0||typeof t=="string")return eo;{let{alignOnDecimals:o=!1,decimals:r,zeroPad:s=!1}=(n=t.formatting)!=null?n:Hr;return i=>{if(typeof i=="string"&&(i.startsWith("\u03A3")||i.startsWith("[")))return i;let l=typeof i=="number"?i:typeof i=="string"?parseFloat(i):void 0;return(0,Ce.roundDecimal)(l,e,r,s,o)}}},kr=e=>{let{serverDataType:t}=e;return t==="string"||t==="char"?n=>n:t==="double"?Lr(e):eo},to=({config:e,data:t,dataSource:n,headerHeight:o,onConfigChange:r,rowHeight:s,...i})=>{var N,O,j;let l=(0,K.useMemo)(()=>new Ge({from:0,to:0}),[]),[u,a]=(0,K.useState)([]),[m,c]=(0,K.useState)((N=t==null?void 0:t.length)!=null?N:0);if(t===void 0&&n===void 0)throw Error("no data source provided to DataTable");let p=yt(i),x=(0,K.useCallback)(P=>{c(P)},[]),{columns:C,dispatchColumnAction:b}=qn(e),d=Zn({columns:C,headerHeight:o,rowCount:m,rowHeight:s,size:p.innerSize}),D=(0,K.useCallback)(P=>{if(P.tableMeta){let{columns:H,dataTypes:B}=P.tableMeta;b({type:"setTypes",columnNames:H,serverDataTypes:B})}},[b]),v=(0,K.useMemo)(()=>C.reduce((P,H)=>(P[H.name]=kr(H),P),{}),[C]);(0,K.useMemo)(()=>{r==null||r({...e,columns:C})},[C,e,r]),(0,K.useMemo)(()=>{b({type:"init",config:e})},[e,b]);let g=(0,K.useCallback)(P=>{switch(P.type){case"groupBy":return b({type:"tableConfig",groupBy:P.groupBy});case"filter":return b({type:"tableConfig",filter:P.filter});case"sort":return b({type:"tableConfig",sort:P.sort})}},[b]),{data:M,setRange:h}=An({dataSource:n,onConfigChange:g,onSubscribed:D,onSizeChange:x}),f=(0,K.useCallback)((P,H)=>{if(n)h(P,H);else{l.reset({from:P,to:H});let B=t?l.withKeys(t.slice(P,H)):[];a(B)}},[t,n,l,h]),y=(0,K.useCallback)((P,H=!1,B)=>{n&&(n.sort=(0,Ce.applySort)(n.sort,P,H,B))},[n]),R=(0,K.useCallback)((P,H,B)=>{let X=C.find(ee=>ee.name===H);if(X)b({type:"resizeColumn",phase:P,column:X,width:B});else throw Error(`useDataTable.handleColumnResize, column ${H} not found`)},[C,b]),w=(0,K.useCallback)(P=>{n&&(P[Sr]?n.closeTreeNode(P[jn]):n.openTreeNode(P[jn]))},[n]),T=(0,K.useCallback)(P=>{n&&n.groupBy.includes(P.name)&&(n.groupBy=n.groupBy.filter(H=>H!==P.name))},[n]),{requestScroll:E,...k}=Jn({onRangeChange:f,rowHeight:s,viewport:d,viewportHeight:((j=(O=p.innerSize)==null?void 0:O.height)!=null?j:0)-o}),S=zn({columnCount:C.length,containerRef:p.containerRef,data:n?M:u,requestScroll:E,rowCount:n==null?void 0:n.size});return{containerMeasurements:p,containerProps:S,columns:C,data:n?M:u,dispatchColumnAction:b,onColumnResize:R,onRemoveColumnFromGroupBy:T,onSort:y,onToggleGroup:w,scrollProps:k,setRangeVertical:f,rowCount:m,valueFormatters:v,viewportMeasurements:d}};var no=require("@heswell/salt-lab"),Q=require("react"),oo=({onDrop:e,tableContainerRef:t,tableLayout:n})=>{let[o,r]=(0,Q.useState)(n),s=(0,Q.useRef)(),i=(0,Q.useCallback)(()=>{console.log("handleDropSettle"),s.current=void 0,r("row")},[]),{draggable:l,draggedItemIndex:u,onMouseDown:a}=(0,no.useDragDrop)({allowDragDrop:!0,draggableClassName:"table-column",orientation:"horizontal",containerRef:t,itemQuery:".vuuDataTable-table",onDrop:e,onDropSettle:i}),m=(0,Q.useCallback)(c=>{let{clientX:p,clientY:x}=c,b=c.target.closest(".vuuTable-headerCell"),{dataset:{idx:d="-1"}}=b;s.current={clientX:p,clientY:x,idx:d},r("column")},[]);return(0,Q.useLayoutEffect)(()=>{var c;if(o==="column"&&s.current&&!l){let{clientX:p,clientY:x,idx:C}=s.current,b=(c=t.current)==null?void 0:c.querySelector(`.vuuDataTable-table[data-idx="${C}"]`);if(b){let d={persist:()=>{},nativeEvent:{clientX:p,clientY:x,target:b}};a==null||a(d)}}},[l,a,t,o]),{draggable:l,draggedItemIndex:u,tableLayout:o,handleHeaderCellDragStart:m}};var _=require("react/jsx-runtime"),ue="vuuDataTable",Ir=({config:e,data:t,dataSource:n,headerHeight:o=25,height:r,id:s,onConfigChange:i,onShowConfigEditor:l,rowHeight:u=20,allowConfigEditing:a=!1,style:m,tableLayout:c="row",width:p,...x})=>{let C=(0,_e.useIdMemo)(s),{columns:b,dispatchColumnAction:d,containerMeasurements:{containerRef:D,innerSize:v,outerSize:g},containerProps:M,setRangeVertical:h,rowCount:f,scrollProps:y,valueFormatters:R,viewportMeasurements:w,...T}=to({config:e,data:t,dataSource:n,headerHeight:o,height:r,onConfigChange:i,rowHeight:u,width:p}),E=Pn({dataSource:n,dispatchColumnAction:d}),k=(0,ro.useCallback)((X,ee)=>{let Xe=b[X];d({type:"moveColumn",column:Xe,moveTo:ee})},[b,d]),{draggable:S,draggedItemIndex:N,tableLayout:O,handleHeaderCellDragStart:j}=oo({onDrop:k,tableContainerRef:y.tableContainerRef,tableLayout:c}),P={...g,"--content-height":`${w.scrollContentHeight}px`,"--content-width":`${w.scrollContentWidth}px`,"--filler-height":`${w.fillerHeight}px`,"--pinned-width-left":`${w.pinnedWidthLeft}px`,"--header-height":`${o}px`,"--row-height":`${u}px`,"--scrollbar-size":`${w.scrollbarSize}px`,"--table-height":`${v==null?void 0:v.height}px`,"--table-width":`${v==null?void 0:v.width}px`},H={left:w.pinnedWidthLeft-1,top:o-1},B=O==="column"?Dn:Ln;return(0,_.jsx)(Jt,{menuActionHandler:E,menuBuilder:Tn(n),children:(0,_.jsxs)("div",{...M,className:ue,id:C,ref:D,style:P,tabIndex:-1,children:[v?(0,_.jsx)("div",{className:`${ue}-scrollbarContainer`,onScroll:y.onScrollbarContainerScroll,ref:y.scrollbarContainerRef,style:H,children:(0,_.jsx)("div",{className:`${ue}-scrollContent`})}):null,v?(0,_.jsxs)("div",{className:`${ue}-contentContainer`,onScroll:y.onContentContainerScroll,ref:y.contentContainerRef,...x,children:[(0,_.jsx)("div",{className:`${ue}-scrollContent`}),(0,_.jsx)("div",{className:`${ue}-tableContainer`,onScroll:y.onTableContainerScroll,ref:y.tableContainerRef,children:(0,_.jsx)(B,{...T,columns:b.filter((X,ee)=>ee!==N),headerHeight:o,onHeaderCellDragStart:O==="row"?j:void 0,rowHeight:u,valueFormatters:R})}),S]}):null,a&&v?(0,_.jsx)(_e.Button,{className:`${ue}-settings`,"data-icon":"settings",onClick:l,variant:"secondary"}):null]})})};
 //# sourceMappingURL=index.js.map

package/index.css

@@ -1,2 +1,2 @@
-.vuuDataTableRow-even{--row-background: var(--salt-container-secondary-background)}.vuuDataTableRow:not(.vuuDataTableRow-even){--row-background: var(--vuuTableRow-backgroundColor-odd, var(--table-background))}.vuuDataTableRow{background:var(--row-background)}.vuuDataTableRow .vuuPinLeft{background-color:var(--row-background)}.vuuColumnResizer{cursor:col-resize;width:4px}.vuuTable-headerCell{--cell-align: "flex-start";text-align:left;background:var(--table-background);border-right:1px solid var(--salt-separable-tertiary-borderColor);border-bottom:2px solid var(--salt-separable-tertiary-borderColor);color:var(--salt-text-secondary-foreground);cursor:default;padding:0!important;position:sticky;top:0;height:var(--vuuTableHeaderHeight);z-index:1}.vuuTable-headerCell-right{--cell-align: flex-end}.vuuTable-headerCell-inner{align-items:stretch;display:flex;height:100%;padding:0 0 0 3px}.vuuTable-headerCell-label{align-items:center;justify-content:var(--cell-align);display:flex;flex:1 1 auto}.vuuDataTable{background-color:var(--salt-container-primary-background, inherit);height:var(--table-height);position:relative;width:var(--table-width)}.vuuDataTable-content{--table-background: var(--salt-container-primary-background, inherit);--vuuTable-contentHeight: var(--content-height, "auto");--vuuTable-contentWidth: var(--content-width, "auto");--vuuTableHeaderHeight: var(--header-height, 30px);--vuuTable-width: calc(var(--table-height) - var(--scrollbar-size));--vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);--vuuTable-scrollbarSize: var(--scrollbar-size, 15px);--vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));background-color:var(--salt-container-primary-background);height:var(--vuuTable-height);position:relative;overflow:auto;overscroll-behavior:none;width:var(--vuuTable-width)}.vuuDataTable-content::-webkit-scrollbar{display:none}.vuuDataTable-scrollContainer{border-left:solid 1px var(--salt-container-primary-borderColor);border-top:solid 1px var(--salt-container-primary-borderColor);overflow:auto;position:absolute;height:calc(var(--table-pixel-height) - var(--header-height) + 1px);width:calc(var(--table-pixel-width) - var(--pinned-width-left) + 1px)}.vuuDataTable-scrollContainerHeader{background:#777;height:var(--header-height);position:fixed;top:0;right:0;width:var(--vuuTable-scrollbarSize)}.vuuDataTable-scrollContainerFooter{background-color:green;height:var(--vuuTable-scrollbarSize);position:fixed;bottom:0;left:0;width:var(--pinned-width-left)}.vuuDataTable-scrollContent{position:absolute;height:var(--content-height);width:var(--content-width)}.vuuDataTable-tableContainer{background-color:var(--table-background);border-bottom:solid 1px var(--salt-container-primary-borderColor);height:calc(var(--table-pixel-height) - var(--scrollbar-size));left:0px;overflow:hidden;position:sticky;top:0px;width:calc(var(--table-pixel-width) - var(--scrollbar-size));white-space:nowrap}.vuuDataTable-table{--vuuTable-rowHeight: var(--row-height);--vuuTableCell-border-bottomColor: transparent;--vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);position:absolute;top:0;left:0;background-color:#fff;border-collapse:separate;border-spacing:0;border-left:1px solid #ccc;border:none;font-size:var(--vuuDataTable-font-size, 10px);margin:0;table-layout:fixed;width:var(--vuuTable-contentWidth)}.vuuDataTable-columnBased{display:inline-table;height:var(--vuuTable-height);position:static}.vuuDataTable-filler{height:var(--filler-height)}.vuuDataTable-table td{border-right:1px solid var(--vuuTableCell-border-rightColor);border-bottom:1px solid var(--vuuTableCell-border-bottomColor);line-height:calc(var(--vuuTable-rowHeight) - 1px);padding:0 5px}.vuuDataTable-table td{color:var(--salt-text-primary-foreground);cursor:default;height:var(--vuuTable-rowHeight)}.vuuPinLeft{position:sticky;left:0}.vuuAlignRight{text-align:right}th.vuuPinLeft{top:0;z-index:2}table.vuuPinLeft{z-index:10}.vuuDataTable-settings{height:var(--header-height);position:absolute;right:0;top:0}
+.vuuDialog{background:var(--salt-container-primary-background);border:var(--vuuDialog-border, solid 1px #ccc);border-radius:5px;padding:var(--vuuDialog-padding, 0);box-shadow:var(--salt-overlayable-shadow, none);height:var(--vuuDialog-height, fit-content);width:var(--vuuDialog-width, fit-content)}.vuuDialog-header{--saltButton-height: 28px;--saltButton-width: 28px;--saltToolbar-background: transparent;--saltToolbar-height: calc(var(--salt-size-base) + 5px);border-bottom:solid 1px var(--salt-container-primary-borderColor)}.vuuDialog-header>.Responsive-inner{align-items:center}.vuuDialog-header>.Responsive-inner>:last-child{right:2px}.vuuMenuList{--context-menu-color: #161616;--context-menu-padding: var(--hw-list-item-padding, 0 6px);--context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, .175));--focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));--context-menu-highlight-bg: #a4d5f4;--context-menu-blur-focus-bg: #e0e4e9;--menu-item-height: var(--hw-list-item-height, 24px);--menu-item-icon-color: black;--menu-item-twisty-color: black;--menu-item-twisty-content: "";--menu-item-twisty-top: 50%;--menu-item-twisty-left: auto;--menu-item-twisty-right: 0px;--menu-icon-size: 12px;background-clip:padding-box;background-color:#fff;border-radius:4px;border:solid 1px rgba(0,0,0,.15);box-shadow:var(--context-menu-shadow);font-size:var(--salt-text-label-fontSize);font-weight:var(--salt-typography-fontWeight-semiBold);list-style:none;margin:2px 0 0;outline:0;padding:0;position:absolute}.vuuMenuItem{align-items:center;color:var(--context-menu-color);display:flex;gap:6px;height:var(--menu-item-height);padding:var(--context-menu-padding);padding-right:24px;position:relative;white-space:nowrap}.vuuIconContainer{display:inline-block;flex:12px 0 0;height:var(--menu-icon-size);mask-repeat:no-repeat;width:var(--menu-icon-size)}.vuuMenuItem[aria-expanded=true]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem-separator{border-top:solid 1px var(--context-menu-blur-focus-bg)}.vuuMenuItem[aria-haspopup=true]:after{content:var(--menu-item-twisty-content);-webkit-mask:var(--svg-chevron-right) center center/12px 12px;mask:var(--svg-chevron-down) center center/12px 12px;mask-repeat:no-repeat;background-color:var(--menu-item-twisty-color);height:16px;left:var(--menu-item-twisty-left);right:var(--menu-item-twisty-right);margin-top:-8px;position:absolute;top:var(--menu-item-twisty-top);transition:transform .3s;width:16px}.vuuMenuItem[data-highlighted]{background-color:var(--context-menu-highlight-bg)}.vuuMenuItem:hover{background-color:var(--context-menu-highlight-bg);cursor:default}.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted]{background-color:var(--context-menu-blur-focus-bg)}.vuuMenuItem.focusVisible:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0px;border:dotted var(--focus-visible-border-color) 2px}.vuuPopupContainer.top-bottom-right-right .popup-menu{left:auto;right:0}.popup-menu .menu-item.showing>button,.popup-menu .menu-item>button:focus,.popup-menu .menu-item>button:hover{text-decoration:none;color:#000;background-color:#dcdcdc}.vuuMenuItem-button:active,.hwMenuItem-button:hover{outline:0}.popup-menu .menu-item.disabled>button{clear:both;font-weight:400;line-height:1.5;color:#787878;white-space:nowrap;text-decoration:none;cursor:default}.vuuPopup{box-shadow:0 6px 12px #0000002d;position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:1000}.vuuPopup{position:absolute}.vuuDataTable{--cell-outline-width: 2px}.vuuDataTable th:focus,.vuuDataTable td:focus{outline:dotted var(--salt-color-blue-400) var(--cell-outline-width);outline-offset:calc(var(--cell-outline-width) * -1);box-shadow:inset 0 0 0 var(--cell-outline-width) #fff;border-bottom:none}.vuuDataTable th:focus .vuuTable-headerCell-inner{--columnResizer-color: transparent;padding-bottom:var(--cell-outline-width)}.vuuDataTable td:focus{border-right:none;padding-bottom:1px}.vuuTableGroupCell{--spacer-width: 20px;--toggle-icon-transform: var(--row-toggle-icon-transform, none);--vuu-icon-width: 18px;display:flex;align-items:center}.vuuTableGroupCell-spacer{height:100%;position:relative;width:var(--spacer-width)}.vuuTableGroupCell-spacer:after{background:var(--salt-container-primary-borderColor);content:"";position:absolute;top:0;bottom:-1px;left:9px;width:1px}.vuuTableGroupCell-toggle{transition:transform .25s;transform:var(--toggle-icon-transform)}.vuuDataTableRow-even{--row-background: var(--salt-container-secondary-background)}.vuuDataTableRow:not(.vuuDataTableRow-even){--row-background: var(--vuuTableRow-backgroundColor-odd, var(--table-background))}.vuuDataTableRow{background:var(--row-background)}.vuuDataTableRow .vuuPinLeft{background-color:var(--row-background)}.vuuDataTableRow-expanded{--row-toggle-icon-transform: rotate(90deg)}.vuuColumnResizer{cursor:col-resize;width:4px}.vuuColumnResizer:after{content:"";position:absolute;width:var(--columnResizer-width, 1px);top:0;bottom:0;right:0;background-color:var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));height:var(--columnResizer-height, 100%)}.vuuSortIndicator{--menu-icon-size: 18px;--menu-item-icon-color: black;display:flex;flex-direction:column;position:relative;width:18px}.vuuSortPosition{font-size:10px;line-height:10px;text-align:center}.vuuTable-headerCell{--cell-align: "flex-start";text-align:left;background:var(--table-background);border-bottom:2px solid var(--salt-separable-tertiary-borderColor);color:var(--salt-text-secondary-foreground);cursor:default;padding:0!important;position:sticky;top:0;height:var(--vuuTableHeaderHeight);z-index:1}.vuuTable-headerCell-right{--cell-align: flex-end}.vuuTable-headerCell-inner{align-items:stretch;display:flex;height:100%;padding:0 0 0 3px}.vuuTable-headerCell-inner:has(.vuuFilterIndicator){padding-left:0}.vuuTable-headerCell-label{align-items:center;justify-content:var(--cell-align);display:flex;flex:1 1 auto}.vuuTable-headerCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}.vuuFilterIndicator{--menu-icon-size: 12px;--menu-item-icon-color: black;align-items:center;cursor:pointer;display:flex;flex:0 0 18px;flex-direction:column;justify-content:center;position:relative}.vuuFilterIndicator+.vuuTable-headerCell-inner{padding-left:0}.vuuTable-groupHeaderCell{--cell-align: "flex-start";text-align:left;background:var(--table-background);border-right:1px solid var(--salt-separable-tertiary-borderColor);border-bottom:2px solid var(--salt-separable-tertiary-borderColor);color:var(--salt-text-secondary-foreground);cursor:default;padding:0!important;position:sticky;top:0;height:var(--vuuTableHeaderHeight);z-index:1}.vuuTable-groupHeaderCell-inner{display:flex;height:100%}.vuuTable-groupHeaderCell-label{align-items:center;display:flex;flex:0 0 auto}.vuuTable-groupHeaderCell-col{align-items:center;background-color:inherit;display:inline-flex;flex:0 1 auto;height:calc(var(--vuuTableHeaderHeight) - 4px);justify-content:space-between;padding-right:8px;position:relative}.vuuTable-groupHeaderCell-close{--vuu-icon-height: 18px;--vuu-icon-width: 18px;cursor:pointer;left:3px}.vuuTable-groupHeaderCell-col:nth-child(odd){background-color:var(--salt-color-gray-50)}.vuuTable-groupHeaderCell-col:nth-child(even){background-color:var(--salt-color-gray-40)}.vuuTable-groupHeaderCell-col:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);padding-left:3px;z-index:1}.vuuTable-groupHeaderCell-col:not(:first-child){margin-left:-6px;padding-left:12px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}.vuuDataTable{background-color:var(--salt-container-primary-background, inherit);position:relative}.vuuDataTable-contentContainer{--table-background: var(--salt-container-primary-background, inherit);--vuuTable-contentHeight: var(--content-height, "auto");--vuuTable-contentWidth: var(--content-width, "auto");--vuuTableHeaderHeight: var(--header-height, 30px);--vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));--vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);--vuuTable-scrollbarSize: var(--scrollbar-size, 15px);--vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));background-color:var(--salt-container-primary-background);height:var(--vuuTable-height);position:relative;overflow:auto;overscroll-behavior:none;width:var(--vuuTable-width)}.vuuDataTable-contentContainer::-webkit-scrollbar{display:none}.vuuDataTable-scrollbarContainer{--scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));border-left:solid 1px var(--salt-container-primary-borderColor);border-top:solid 1px var(--salt-container-primary-borderColor);overflow:auto;position:absolute;height:calc(var(--table-height) - var(--header-height) + 1px);width:calc(var(--table-width) - var(--pinned-width-left) + 1px)}.vuuDataTable-scrollContainerHeader{background:#777;height:var(--header-height);position:fixed;top:0;right:0;width:var(--vuuTable-scrollbarSize)}.vuuDataTable-scrollContainerFooter{background-color:green;height:var(--vuuTable-scrollbarSize);position:fixed;bottom:0;left:0;width:var(--pinned-width-left)}.vuuDataTable-scrollContent{position:absolute;height:var(--content-height);width:var(--scroll-content-width, var(--content-width))}.vuuDataTable-tableContainer{background-color:var(--table-background);border-bottom:solid 1px var(--salt-container-primary-borderColor);height:calc(var(--table-height) - var(--scrollbar-size));left:0px;overflow:hidden;position:sticky;top:0px;width:calc(var(--table-width) - var(--scrollbar-size));white-space:nowrap}.vuuDataTable-table{--vuuTable-rowHeight: var(--row-height);--vuuTableCell-border-bottomColor: transparent;--vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);position:absolute;top:0;left:0;background-color:#fff;border-collapse:separate;border-spacing:0;border-left:1px solid #ccc;border:none;font-size:var(--vuuDataTable-font-size, 10px);margin:0;table-layout:fixed;width:var(--vuuTable-contentWidth)}.vuuDataTable-columnBased{display:inline-table;height:var(--vuuTable-height);position:static}.vuuDataTable-filler{height:var(--filler-height)}.vuuDataTable-table td{border-right:1px solid var(--vuuTableCell-border-rightColor);border-bottom:1px solid var(--vuuTableCell-border-bottomColor);line-height:calc(var(--vuuTable-rowHeight) - 1px);padding:0 5px}.vuuDataTable-table td{color:var(--salt-text-primary-foreground);cursor:default;height:var(--vuuTable-rowHeight)}.vuuPinLeft{position:sticky}.vuuAlignRight{text-align:right}th.vuuPinLeft{top:0;z-index:2}table.vuuPinLeft{z-index:10}.vuuDataTable-settings{height:var(--header-height);position:absolute;right:0;top:0}.vuuDataTable:has(.vuuTable-headerCell-resizing) *{cursor:col-resize}
 /*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/vuu-datatable/src/TableRow.css", "../../../packages/vuu-datatable/src/ColumnResizer.css", "../../../packages/vuu-datatable/src/TableHeaderCell.css", "../../../packages/vuu-datatable/src/DataTable.css"],
-  "sourcesContent": [".vuuDataTableRow-even {\n    --row-background: var(--salt-container-secondary-background);\n  }\n  \n  .vuuDataTableRow:not(.vuuDataTableRow-even) {\n    --row-background: var(--vuuTableRow-backgroundColor-odd, var(--table-background));\n  }\n\n  .vuuDataTableRow {\n    background: var(--row-background);\n  }\n\n  .vuuDataTableRow .vuuPinLeft {\n    background-color: var(--row-background);\n  }\n  ", ".vuuColumnResizer {\n    cursor: col-resize;\n    width: 4px;\n}", ".vuuTable-headerCell {\n  --cell-align: 'flex-start';\n  text-align: left;\n    background: var(--table-background);\n    border-right: 1px solid var(--salt-separable-tertiary-borderColor);\n    border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n    color: var(--salt-text-secondary-foreground);\n    cursor: default;\n    padding: 0 !important;\n    position: sticky;\n    top: 0;\n    height: var(--vuuTableHeaderHeight);\n    /* ensure header row sits atop everything else when scrolling down */\n    z-index: 1;\n  }\n\n  .vuuTable-headerCell-right {\n    --cell-align: flex-end;\n  }\n \n  .vuuTable-headerCell-inner {\n    align-items: stretch;\n    display: flex;\n    height: 100%;\n    padding: 0 0 0 3px;\n  }\n\n  .vuuTable-headerCell-label {\n    align-items: center;\n    justify-content: var(--cell-align);\n    display: flex;\n    flex: 1 1 auto;\n  }", "\n.vuuDataTable {\n  background-color: var(--salt-container-primary-background, inherit);\n  height: var(--table-height);\n  position: relative;\n  width: var(--table-width);\n}\n.vuuDataTable-content {\n  \n  --table-background: var(--salt-container-primary-background, inherit);\n\n  --vuuTable-contentHeight: var(--content-height, 'auto');\n  --vuuTable-contentWidth: var(--content-width, 'auto');\n  --vuuTableHeaderHeight: var(--header-height, 30px);\n  --vuuTable-width: calc(var(--table-height) - var(--scrollbar-size));\n  --vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);\n  --vuuTable-scrollbarSize: var(--scrollbar-size, 15px);\n  --vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));\n\n  background-color: var(--salt-container-primary-background);\n\n  height: var(--vuuTable-height);\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  width: var(--vuuTable-width);\n}\n\n.vuuDataTable-content::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuDataTable-scrollContainer {\n  border-left: solid 1px var(--salt-container-primary-borderColor);\n  border-top: solid 1px var(--salt-container-primary-borderColor);\n  overflow: auto;\n  position: absolute;\n  height: calc(var(--table-pixel-height) - var(--header-height) + 1px);\n  width: calc(var(--table-pixel-width) - var(--pinned-width-left) + 1px);\n}\n\n.vuuDataTable-scrollContainerHeader {\n  background: #777;\n  height: var(--header-height);\n  position: fixed;\n  top:0;\n  right:0;\n  width: var(--vuuTable-scrollbarSize);\n}\n.vuuDataTable-scrollContainerFooter {\n  background-color: green;\n  height: var(--vuuTable-scrollbarSize);\n  position: fixed;\n  bottom:0;\n  left:0;\n  width: var(--pinned-width-left);\n\n}\n\n.vuuDataTable-scrollContent {\n  position: absolute;\n  height: var(--content-height);\n  width: var(--content-width);\n}\n\n.vuuDataTable-tableContainer {\n  background-color: var(--table-background);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n  height: calc(var(--table-pixel-height) - var(--scrollbar-size));\n  left: 0px;\n  overflow: hidden;\n  position: sticky;\n  top: 0px;\n  width: calc(var(--table-pixel-width) - var(--scrollbar-size));\n  white-space: nowrap;\n\n}\n\n\n.vuuDataTable-table {\n  --vuuTable-rowHeight: var(--row-height);\n  --vuuTableCell-border-bottomColor: transparent;\n  --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);\n\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  background-color: #fff;\n  border-collapse: separate;\n  border-spacing: 0;\n  border-left: 1px solid #ccc;\n  border: none;\n  font-size: var(--vuuDataTable-font-size, 10px);\n  margin: 0;\n  table-layout: fixed;\n  width: var(--vuuTable-contentWidth);\n}\n\n.vuuDataTable-columnBased {\n  display: inline-table;\n  height: var(--vuuTable-height);\n  position: static;\n}\n\n/* .vuuDataTable-columnBased .vuuDataTable-headerCell{\n  background-color: darkmagenta;\n} */\n\n.vuuDataTable-filler {\n  height: var(--filler-height);\n}\n\n\n.vuuDataTable-table td {\n  border-right: 1px solid var(--vuuTableCell-border-rightColor);\n  border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);\n  line-height: calc(var(--vuuTable-rowHeight) - 1px);\n  padding: 0 5px;\n}\n\n.vuuDataTable-table td {\n  color: var(--salt-text-primary-foreground);\n  cursor: default;\n  height: var(--vuuTable-rowHeight);\n}\n\n.vuuPinLeft {\n  position: sticky;\n  left: 0;\n}\n\n.vuuAlignRight {\n  text-align: right;\n}\n\nth.vuuPinLeft {\n  top:0;\n  z-index: 2;\n}\n\ntable.vuuPinLeft {\n  z-index: 10;\n}\n\n/* .vuuDataTable-row {\n  transform: translate3d(0px, 25px, 0px);\n} */\n\n.vuuDataTable-settings {\n  height: var(--header-height);\n  position: absolute;\n  right: 0;\n  top:0;\n}"],
-  "mappings": "AAAA,sBACI,6DAGF,4CACE,kFAGF,iBACE,iCAGF,6BACE,uCCbJ,kBACI,kBACA,UCFJ,qBACE,2BACA,gBACE,mCACA,kEACA,mEACA,4CACA,eAPJ,oBASI,gBACA,MACA,mCAEA,UAGF,2BACE,uBAGF,2BACE,oBACA,aACA,YAvBJ,kBA2BE,2BACE,mBACA,kCACA,aACA,cC9BJ,cACE,mEACA,2BACA,kBACA,yBAEF,sBAEE,sEAEA,wDACA,sDACA,mDACA,oEACA,2DACA,sDACA,mEAEA,0DAEA,8BACA,kBACA,cACA,yBACA,4BAGF,yCACE,aAGF,8BACE,gEACA,+DACA,cACA,kBACA,oEACA,sEAGF,oCACE,gBACA,4BACA,eACA,MACA,QACA,oCAEF,oCACE,uBACA,qCACA,eACA,SACA,OACA,+BAIF,4BACE,kBACA,6BACA,2BAGF,6BACE,yCACA,kEACA,+DACA,SACA,gBACA,gBACA,QACA,6DACA,mBAKF,oBACE,wCACA,+CACA,6EAEA,kBACA,MACA,OAEA,sBACA,yBACA,iBACA,2BACA,YACA,8CA7FF,SA+FE,mBACA,mCAGF,0BACE,qBACA,8BACA,gBAOF,qBACE,4BAIF,uBACE,6DACA,+DACA,kDArHF,cAyHA,uBACE,0CACA,eACA,iCAGF,YACE,gBACA,OAGF,eACE,iBAGF,cACE,MACA,UAGF,iBACE,WAOF,uBACE,4BACA,kBACA,QACA",
+  "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-datatable/src/TableCell.css", "../../../packages/vuu-datatable/src/TableGroupCell.css", "../../../packages/vuu-datatable/src/TableRow.css", "../../../packages/vuu-datatable/src/ColumnResizer.css", "../../../packages/vuu-datatable/src/SortIndicator.css", "../../../packages/vuu-datatable/src/TableHeaderCell.css", "../../../packages/vuu-datatable/src/filter-indicator.css", "../../../packages/vuu-datatable/src/TableGroupHeaderCell.css", "../../../packages/vuu-datatable/src/DataTable.css"],
+  "sourcesContent": [".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  padding: var(--vuuDialog-padding, 0);\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n\n  --saltToolbar-background: transparent;\n  --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n  align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n  right: 2px;\n}\n\n\n", ".vuuMenuList {\n  --context-menu-color: #161616;\n  --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n  --context-menu-highlight-bg: #a4d5f4;\n  --context-menu-blur-focus-bg: #e0e4e9;\n  --menu-item-height: var(--hw-list-item-height, 24px);\n  --menu-item-icon-color: black;\n  --menu-item-twisty-color: black;\n  --menu-item-twisty-content: '';\n  --menu-item-twisty-top: 50%;\n  --menu-item-twisty-left: auto;\n  --menu-item-twisty-right: 0px;\n  --menu-icon-size: 12px;\n\n  background-clip: padding-box;\n  background-color: white;\n  border-radius: 4px;\n  border: solid 1px rgba(0, 0, 0, 0.15);\n  box-shadow: var(--context-menu-shadow);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  list-style: none;\n  margin: 2px 0 0;\n  outline: 0;\n  padding: 0;\n  position: absolute;\n}\n\n.vuuMenuItem {\n  align-items: center;\n  color: var(--context-menu-color);\n  display: flex;\n  gap: 6px;\n  height: var(--menu-item-height);\n  padding: var(--context-menu-padding);\n  padding-right: 24px;\n  position: relative;\n  white-space: nowrap;\n}\n\n.vuuIconContainer {\n  display: inline-block;\n  flex: 12px 0 0;\n  height: var(--menu-icon-size);\n  mask-repeat: no-repeat;\n  width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n  border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n  content: var(--menu-item-twisty-content);\n  -webkit-mask: var(--svg-chevron-right) center center/12px 12px;\n  mask: var(--svg-chevron-down) center center/12px 12px;\n  mask-repeat: no-repeat;\n  background-color: var(--menu-item-twisty-color);\n  height: 16px;\n  left: var(--menu-item-twisty-left);\n  right: var(--menu-item-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--menu-item-twisty-top);\n  transition: transform 0.3s;\n  width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n  background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n  background-color: var(--context-menu-highlight-bg);\n  cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.hwMenuItem-button:hover {\n  outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".vuuPopup {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.vuuPopup {\n  position: absolute;\n}\n", ".vuuDataTable {\n    --cell-outline-width: 2px;\n}\n\n.vuuDataTable th:focus,\n.vuuDataTable td:focus {\n    outline: dotted var(--salt-color-blue-400) var(--cell-outline-width);\n    outline-offset: calc(var(--cell-outline-width) * -1);\n    /** This is to achieve a white background to outline dashes */\n    box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n    border-bottom: none;\n}\n\n.vuuDataTable th:focus .vuuTable-headerCell-inner{\n    --columnResizer-color: transparent;\n    /** This is to achieve a white background to outline dashes */\n    padding-bottom: var(--cell-outline-width);\n}\n\n.vuuDataTable td:focus {\n    /** This is to achieve a white background to outline dashes */\n    border-right: none;\n    padding-bottom: 1px;\n}", ".vuuTableGroupCell {\n    --spacer-width: 20px;\n    --toggle-icon-transform: var(--row-toggle-icon-transform, none);\n    --vuu-icon-width: 18px;\n    display: flex;\n    align-items: center;\n}\n\n.vuuTableGroupCell-spacer {\n    height: 100%;\n    position: relative;\n    width: var(--spacer-width);\n}\n\n.vuuTableGroupCell-spacer:after {\n    background: var(--salt-container-primary-borderColor);\n    content: '';\n    position: absolute;\n    top:0;\n    bottom: -1px;\n    /* left: calc(var(--spacer-width / 2)); */\n    left: 9px;\n    width: 1px;\n}\n\n.vuuTableGroupCell-toggle {\n    transition: transform 0.25s;\n    transform: var(--toggle-icon-transform);\n}\n\n\n/* .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n    --vuu-icon-svg: var(--svg-plus-box);\n}\n\n.vuuDataTableRow-expanded .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n    --vuu-icon-svg: var(--svg-minus-box);\n} */\n", ".vuuDataTableRow-even {\n    --row-background: var(--salt-container-secondary-background);\n  }\n  \n  .vuuDataTableRow:not(.vuuDataTableRow-even) {\n    --row-background: var(--vuuTableRow-backgroundColor-odd, var(--table-background));\n  }\n\n  .vuuDataTableRow {\n    background: var(--row-background);\n  }\n\n  .vuuDataTableRow .vuuPinLeft {\n    background-color: var(--row-background);\n  }\n  \n  .vuuDataTableRow-expanded {\n    --row-toggle-icon-transform: rotate(90deg);\n  }\n  ", ".vuuColumnResizer {\n    cursor: col-resize;\n    width: 4px;\n}\n\n.vuuColumnResizer:after {\n    content: '';\n    position: absolute;\n    width: var(--columnResizer-width, 1px);\n    top:0;\n    bottom:0;\n    right: 0;\n    background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n    height: var(--columnResizer-height, 100%);\n}", ".vuuSortIndicator {\n  --menu-icon-size: 18px;\n  --menu-item-icon-color: black;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 18px;\n}\n\n.vuuSortPosition {\n  font-size: 10px;\n  line-height: 10px;\n  text-align: center;\n}\n\n", ".vuuTable-headerCell {\n  --cell-align: 'flex-start';\n  text-align: left;\n    background: var(--table-background);\n    /* border-right: var(--header-border-rightWidth, 1px) solid var(--header-border-rightColor, var(--salt-separable-tertiary-borderColor)); */\n    border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n    color: var(--salt-text-secondary-foreground);\n    cursor: default;\n    padding: 0 !important;\n    position: sticky;\n    top: 0;\n    height: var(--vuuTableHeaderHeight);\n    /* ensure header row sits atop everything else when scrolling down */\n    z-index: 1;\n  }\n\n  .vuuTable-headerCell-right {\n    --cell-align: flex-end;\n  }\n \n  .vuuTable-headerCell-inner {\n    align-items: stretch;\n    display: flex;\n    height: 100%;\n    padding: 0 0 0 3px;\n  }\n\n  .vuuTable-headerCell-inner:has(.vuuFilterIndicator){\n    padding-left: 0;\n  }\n\n  .vuuTable-headerCell-label {\n    align-items: center;\n    justify-content: var(--cell-align);\n    display: flex;\n    flex: 1 1 auto;\n  }\n\n  .vuuTable-headerCell-resizing {\n    --columnResizer-color: var(--salt-color-blue-500);\n    --columnResizer-height: var(--table-height);\n    --columnResizer-width: 2px;\n  }", ".vuuFilterIndicator {\n  --menu-icon-size: 12px;\n  --menu-item-icon-color: black;\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 18px;\n  flex-direction: column;\n  justify-content: center;\n  position: relative;\n}\n\n.vuuFilterIndicator + .vuuTable-headerCell-inner {\n  padding-left: 0;\n}\n", ".vuuTable-groupHeaderCell {\n  --cell-align: 'flex-start';\n  text-align: left;\n    background: var(--table-background);\n    border-right: 1px solid var(--salt-separable-tertiary-borderColor);\n    border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n    color: var(--salt-text-secondary-foreground);\n    cursor: default;\n    padding: 0 !important;\n    position: sticky;\n    top: 0;\n    height: var(--vuuTableHeaderHeight);\n    /* ensure header row sits atop everything else when scrolling down */\n    z-index: 1;\n  }\n\n\n  .vuuTable-groupHeaderCell-inner {\n    display: flex;\n    height: 100%;\n  }\n\n  .vuuTable-groupHeaderCell-label {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n  }\n\n  .vuuTable-groupHeaderCell-col {\n    align-items: center;\n    background-color: inherit;\n    display: inline-flex;\n    flex: 0 1 auto;\n    height: calc(var(--vuuTableHeaderHeight) - 4px);\n    justify-content: space-between;\n    padding-right: 8px;\n    position: relative;\n  }\n\n  .vuuTable-groupHeaderCell-close {\n    --vuu-icon-height: 18px;\n    --vuu-icon-width: 18px;\n    cursor: pointer;\n    left: 3px;\n  }\n\n  .vuuTable-groupHeaderCell-col:nth-child(odd) {\n    background-color: var(--salt-color-gray-50);\n  }\n  .vuuTable-groupHeaderCell-col:nth-child(even) {\n    background-color: var(--salt-color-gray-40);\n  }\n\n  .vuuTable-groupHeaderCell-col:first-child {\n    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);\n    padding-left: 3px;\n    z-index: 1;\n  }\n  \n  .vuuTable-groupHeaderCell-col:not(:first-child) {\n    margin-left: -6px;\n    padding-left: 12px;\n    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);\n  }\n  \n  ", "\n.vuuDataTable {\n  background-color: var(--salt-container-primary-background, inherit);\n  position: relative;\n}\n.vuuDataTable-contentContainer {\n  \n  --table-background: var(--salt-container-primary-background, inherit);\n\n  --vuuTable-contentHeight: var(--content-height, 'auto');\n  --vuuTable-contentWidth: var(--content-width, 'auto');\n  --vuuTableHeaderHeight: var(--header-height, 30px);\n  --vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));\n  --vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);\n  --vuuTable-scrollbarSize: var(--scrollbar-size, 15px);\n  --vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));\n\n  background-color: var(--salt-container-primary-background);\n\n  height: var(--vuuTable-height);\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  width: var(--vuuTable-width);\n}\n\n.vuuDataTable-contentContainer::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuDataTable-scrollbarContainer {\n  --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));\n  border-left: solid 1px var(--salt-container-primary-borderColor);\n  border-top: solid 1px var(--salt-container-primary-borderColor);\n  overflow: auto;\n  position: absolute;\n  height: calc(var(--table-height) - var(--header-height) + 1px);\n  width: calc(var(--table-width) - var(--pinned-width-left) + 1px);\n}\n\n.vuuDataTable-scrollContainerHeader {\n  background: #777;\n  height: var(--header-height);\n  position: fixed;\n  top:0;\n  right:0;\n  width: var(--vuuTable-scrollbarSize);\n}\n.vuuDataTable-scrollContainerFooter {\n  background-color: green;\n  height: var(--vuuTable-scrollbarSize);\n  position: fixed;\n  bottom:0;\n  left:0;\n  width: var(--pinned-width-left);\n\n}\n\n.vuuDataTable-scrollContent {\n  position: absolute;\n  height: var(--content-height);\n  width: var(--scroll-content-width, var(--content-width));\n}\n\n.vuuDataTable-tableContainer {\n  background-color: var(--table-background);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n  height: calc(var(--table-height) - var(--scrollbar-size));\n  left: 0px;\n  overflow: hidden;\n  position: sticky;\n  top: 0px;\n  width: calc(var(--table-width) - var(--scrollbar-size));\n  white-space: nowrap;\n\n}\n\n\n.vuuDataTable-table {\n  --vuuTable-rowHeight: var(--row-height);\n  --vuuTableCell-border-bottomColor: transparent;\n  --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);\n\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  background-color: #fff;\n  border-collapse: separate;\n  border-spacing: 0;\n  border-left: 1px solid #ccc;\n  border: none;\n  font-size: var(--vuuDataTable-font-size, 10px);\n  margin: 0;\n  table-layout: fixed;\n  width: var(--vuuTable-contentWidth);\n}\n\n.vuuDataTable-columnBased {\n  display: inline-table;\n  height: var(--vuuTable-height);\n  position: static;\n}\n\n/* .vuuDataTable-columnBased .vuuDataTable-headerCell{\n  background-color: darkmagenta;\n} */\n\n.vuuDataTable-filler {\n  height: var(--filler-height);\n}\n\n\n.vuuDataTable-table td {\n  border-right: 1px solid var(--vuuTableCell-border-rightColor);\n  border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);\n  line-height: calc(var(--vuuTable-rowHeight) - 1px);\n  padding: 0 5px;\n}\n\n.vuuDataTable-table td {\n  color: var(--salt-text-primary-foreground);\n  cursor: default;\n  height: var(--vuuTable-rowHeight);\n}\n\n.vuuPinLeft {\n  position: sticky;\n}\n\n.vuuAlignRight {\n  text-align: right;\n}\n\nth.vuuPinLeft {\n  top:0;\n  z-index: 2;\n}\n\ntable.vuuPinLeft {\n  z-index: 10;\n}\n\n/* .vuuDataTable-row {\n  transform: translate3d(0px, 25px, 0px);\n} */\n\n.vuuDataTable-settings {\n  height: var(--header-height);\n  position: absolute;\n  right: 0;\n  top:0;\n}\n\n.vuuDataTable:has(.vuuTable-headerCell-resizing) * {\n  cursor: col-resize;\n}\n\n"],
+  "mappings": "AAAA,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,aACE,8BACA,2DACA,+EACA,uFACA,qCACA,sCACA,qDACA,8BACA,gCACA,+BACA,4BACA,8BACA,8BACA,uBAEA,4BACA,sBAjBF,kBAmBE,iCACA,sCACA,0CACA,uDACA,gBAvBF,eAyBE,UAzBF,UA2BE,kBAGF,aACE,mBACA,gCACA,aACA,QACA,+BACA,oCACA,mBACA,kBACA,mBAGF,kBACE,qBACA,cACA,6BACA,sBACA,4BAGF,iCACE,mDAGF,uBACE,uDAGF,uCACE,wCACA,8DACA,qDACA,sBACA,+CACA,YACA,kCACA,oCACA,gBACA,kBACA,gCACA,yBACA,WAGF,+BACE,kDAGF,mBACE,kDACA,eAGF,4DACE,mDAGF,iCACE,WACA,kBACA,MACA,OACA,QACA,WACA,oDAGF,sDACE,UACA,QAGF,8GAGE,qBACA,WACA,yBAEF,oDAEE,UAGF,uCACE,WACA,gBACA,gBACA,cACA,mBACA,qBACA,eCzHF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE,kBCZF,cACI,0BAGJ,8CAEI,oEACA,oDAEA,sDACA,mBAGJ,kDACI,mCAEA,yCAGJ,uBAEI,kBACA,mBCtBJ,mBACI,qBACA,gEACA,uBACA,aACA,mBAGJ,0BACI,YACA,kBACA,0BAGJ,gCACI,qDACA,WACA,kBACA,MACA,YAEA,SACA,UAGJ,0BACI,0BACA,uCC3BJ,sBACI,6DAGF,4CACE,kFAGF,iBACE,iCAGF,6BACE,uCAGF,0BACE,2CCjBJ,kBACI,kBACA,UAGJ,wBACI,WACA,kBACA,sCACA,MACA,SACA,QACA,wFACA,yCCbJ,kBACE,uBACA,8BACA,aACA,sBACA,kBACA,WAGF,iBACE,eACA,iBACA,kBCZF,qBACE,2BACA,gBACE,mCAEA,mEACA,4CACA,eAPJ,oBASI,gBACA,MACA,mCAEA,UAGF,2BACE,uBAGF,2BACE,oBACA,aACA,YAvBJ,kBA2BE,oDACE,eAGF,2BACE,mBACA,kCACA,aACA,cAGF,8BACE,kDACA,4CACA,2BCzCJ,oBACE,uBACA,8BACA,mBACA,eACA,aACA,cACA,sBACA,uBACA,kBAGF,+CACE,eCbF,0BACE,2BACA,gBACE,mCACA,kEACA,mEACA,4CACA,eAPJ,oBASI,gBACA,MACA,mCAEA,UAIF,gCACE,aACA,YAGF,gCACE,mBACA,aACA,cAGF,8BACE,mBACA,yBACA,oBACA,cACA,+CACA,8BACA,kBACA,kBAGF,gCACE,wBACA,uBACA,eACA,SAGF,6CACE,2CAEF,8CACE,2CAGF,0CACE,gFACA,iBACA,UAGF,gDACE,iBACA,kBACA,wFC7DJ,cACE,mEACA,kBAEF,+BAEE,sEAEA,wDACA,sDACA,mDACA,qEACA,2DACA,sDACA,mEAEA,0DAEA,8BACA,kBACA,cACA,yBACA,4BAGF,kDACE,aAGF,iCACE,8EACA,gEACA,+DACA,cACA,kBACA,8DACA,gEAGF,oCACE,gBACA,4BACA,eACA,MACA,QACA,oCAEF,oCACE,uBACA,qCACA,eACA,SACA,OACA,+BAIF,4BACE,kBACA,6BACA,wDAGF,6BACE,yCACA,kEACA,yDACA,SACA,gBACA,gBACA,QACA,uDACA,mBAKF,oBACE,wCACA,+CACA,6EAEA,kBACA,MACA,OAEA,sBACA,yBACA,iBACA,2BACA,YACA,8CA5FF,SA8FE,mBACA,mCAGF,0BACE,qBACA,8BACA,gBAOF,qBACE,4BAIF,uBACE,6DACA,+DACA,kDApHF,cAwHA,uBACE,0CACA,eACA,iCAGF,YACE,gBAGF,eACE,iBAGF,cACE,MACA,UAGF,iBACE,WAOF,uBACE,4BACA,kBACA,QACA,MAGF,mDACE",
   "names": []
 }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@vuu-ui/vuu-datatable",
-  "version": "0.5.9",
+  "version": "0.5.17",
   "author": "heswell",
   "license": "Apache-2.0",
   "peerDependencies": {
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0",
-    "@vuu-ui/vuu-utils": "0.5.9",
+    "@vuu-ui/vuu-filters": "0.5.17",
+    "@vuu-ui/vuu-utils": "0.5.17",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/types/ColumnResizer.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
 import "./ColumnResizer.css";
-export declare const ColumnResizer: () => JSX.Element;
+export interface TableColumnResizerProps {
+    onDrag: (evt: MouseEvent, moveBy: number) => void;
+    onDragEnd: (evt: MouseEvent) => void;
+    onDragStart: (evt: React.MouseEvent) => void;
+}
+export declare const ColumnResizer: ({ onDrag, onDragEnd, onDragStart, }: TableColumnResizerProps) => JSX.Element;

package/types/DataTable.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TableProps } from "./dataTableTypes";
 import "./DataTable.css";
-export declare const DataTable: ({ config, data: dataProp, dataSource, headerHeight, height, onConfigChange, onShowConfigEditor: onShowSettings, rowHeight, allowConfigEditing: showSettings, style: styleProp, tableLayout: tableLayoutProp, width, ...props }: TableProps) => JSX.Element;
+export declare const DataTable: ({ config, data: dataProp, dataSource, headerHeight, height, id: idProp, onConfigChange, onShowConfigEditor: onShowSettings, rowHeight, allowConfigEditing: showSettings, style: styleProp, tableLayout: tableLayoutProp, width, ...props }: TableProps) => JSX.Element;

package/types/RowBasedTable.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TableImplementationProps } from "./dataTableTypes";
-export declare const RowBasedTable: ({ columns, data, onHeaderCellDragStart, rowHeight, valueFormatters, }: TableImplementationProps) => JSX.Element;
+export declare const RowBasedTable: ({ columns, data, onColumnResize, onHeaderCellDragStart, onRemoveColumnFromGroupBy, onSort, onToggleGroup, rowHeight, valueFormatters, }: TableImplementationProps) => JSX.Element;

package/types/SortIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ColumnSort } from "@vuu-ui/vuu-datagrid-types";
+import "./SortIndicator.css";
+export interface SortIndicatorProps {
+    sorted?: ColumnSort;
+}
+export declare const SortIndicator: ({ sorted }: SortIndicatorProps) => JSX.Element | null;

package/types/TableCell.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
+import { DataSourceRow } from "@vuu-ui/vuu-data";
 import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
-import { DataRow } from "@vuu-ui/vuu-utils";
+import { HTMLAttributes } from "react";
 import { ValueFormatter } from "./dataTableTypes";
-export interface TableCellProps {
+import "./TableCell.css";
+export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
     column: KeyedColumnDescriptor;
-    row: DataRow;
+    row: DataSourceRow;
     valueFormatter?: ValueFormatter;
 }
-export declare const TableCell: ({ column, row, valueFormatter, }: TableCellProps) => JSX.Element;
+export declare const TableCell: ({ className: classNameProp, column, row, valueFormatter, }: TableCellProps) => JSX.Element;

package/types/TableGroupCell.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { TableCellProps } from "./TableCell";
+import "./TableGroupCell.css";
+export declare const getGroupValueAndOffset: (columns: KeyedColumnDescriptor[], row: DataSourceRow) => [unknown, number];
+export declare const TableGroupCell: ({ column, onClick, row, }: TableCellProps) => JSX.Element;

package/types/TableGroupHeaderCell.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+import { TableHeaderCellProps } from "./TableHeaderCell";
+import "./TableGroupHeaderCell.css";
+import { GroupColumnDescriptor, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+export interface ColHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+    column: KeyedColumnDescriptor;
+    onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
+}
+export interface TableGroupHeaderCellProps extends Omit<TableHeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
+    column: GroupColumnDescriptor;
+    onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
+}
+export declare const TableGroupHeaderCell: ({ column, className: classNameProp, onRemoveColumn, onResize, ...props }: TableGroupHeaderCellProps) => JSX.Element;

package/types/TableHeaderCell.d.ts

@@ -1,10 +1,12 @@
 import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
 import { HTMLAttributes, MouseEvent } from "react";
+import { TableColumnResizeHandler } from "./dataTableTypes";
 import "./TableHeaderCell.css";
 export interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
     column: KeyedColumnDescriptor;
     debugString?: string;
     onDragStart?: (evt: MouseEvent) => void;
     onDragEnd?: () => void;
+    onResize?: TableColumnResizeHandler;
 }
-export declare const TableHeaderCell: ({ column, className: classNameProp, onDragEnd, onDragStart, ...props }: TableHeaderCellProps) => JSX.Element;
+export declare const TableHeaderCell: ({ column, className: classNameProp, onClick, onDragEnd, onDragStart, onResize, ...props }: TableHeaderCellProps) => JSX.Element;

package/types/TableRow.d.ts

@@ -1,5 +1,5 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
 import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
-import { DataRow } from "@vuu-ui/vuu-utils";
 import { HTMLAttributes } from "react";
 import { ValueFormatters } from "./dataTableTypes";
 import "./TableRow.css";
@@ -7,7 +7,8 @@ export interface RowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children
     columns: KeyedColumnDescriptor[];
     height: number;
     index: number;
-    row: DataRow;
+    onToggleGroup?: (row: DataSourceRow) => void;
+    row: DataSourceRow;
     valueFormatters?: ValueFormatters;
 }
 export declare const TableRow: import("react").NamedExoticComponent<RowProps>;

package/types/context-menu/buildContextMenuDescriptors.d.ts

@@ -0,0 +1,4 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import { MenuBuilder } from "@vuu-ui/vuu-popups";
+export declare type ContextMenuLocation = "header" | "filter" | "grid";
+export declare const buildContextMenuDescriptors: (dataSource?: DataSource) => MenuBuilder;

package/types/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./buildContextMenuDescriptors";
+export * from "./useContextMenu";

package/types/context-menu/useContextMenu.d.ts

@@ -0,0 +1,16 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { MenuActionHandler } from "@vuu-ui/vuu-popups";
+import { VuuFilter } from "@vuu-ui/vuu-protocol-types";
+import { ColumnActionDispatch } from "../useTableModel";
+export interface ContextMenuOptions {
+    column?: KeyedColumnDescriptor;
+    filter?: Filter;
+    sort?: VuuFilter;
+}
+export interface ContextMenuHookProps {
+    dataSource?: DataSource;
+    dispatchColumnAction: ColumnActionDispatch;
+}
+export declare const useContextMenu: ({ dataSource, dispatchColumnAction, }: ContextMenuHookProps) => MenuActionHandler;

package/types/dataTableTypes.d.ts

@@ -2,12 +2,6 @@ import { DataSource, DataSourceRow } from "@vuu-ui/vuu-data";
 import { KeyedColumnDescriptor, GridConfig } from "@vuu-ui/vuu-datagrid-types";
 import { HTMLAttributes, MouseEvent } from "react";
 export declare type tableLayoutType = "row" | "column";
-export interface Column {
-    name: string;
-    pin?: "left" | "right";
-    pinnedLeftOffset?: number;
-    width?: number;
-}
 export interface TableProps extends HTMLAttributes<HTMLDivElement> {
     config: GridConfig;
     data?: DataSourceRow[];
@@ -25,12 +19,17 @@ export declare type ValueFormatter = (value: unknown) => string;
 export declare type ValueFormatters = {
     [key: string]: ValueFormatter;
 };
+export declare type TableColumnResizeHandler = (phase: "begin" | "resize" | "end", columnName: string, width?: number) => void;
 export interface TableImplementationProps {
     columns: KeyedColumnDescriptor[];
     data: DataSourceRow[];
     headerHeight: number;
+    onColumnResize?: TableColumnResizeHandler;
     onHeaderCellDragEnd?: () => void;
     onHeaderCellDragStart?: (evt: MouseEvent) => void;
+    onRemoveColumnFromGroupBy?: (column: KeyedColumnDescriptor) => void;
+    onSort: (column: KeyedColumnDescriptor, isAdditive: boolean) => void;
+    onToggleGroup?: (row: DataSourceRow) => void;
     rowHeight: number;
     valueFormatters?: ValueFormatters;
 }

package/types/filter-indicator.d.ts

@@ -0,0 +1,13 @@
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { HTMLAttributes } from "react";
+import "./filter-indicator.css";
+export declare const Direction: {
+    ASC: string;
+    DSC: string;
+};
+export interface FilterIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    column: KeyedColumnDescriptor;
+    filter?: Filter;
+}
+export declare const FilterIndicator: ({ column, filter }: FilterIndicatorProps) => JSX.Element | null;

package/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./dataTableTypes";
 export * from "./DataTable";
+export * from "./useMeasuredContainer";

package/types/keyUtils.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export declare const ArrowUp = "ArrowUp";
+export declare const ArrowDown = "ArrowDown";
+export declare const ArrowLeft = "ArrowLeft";
+export declare const ArrowRight = "ArrowRight";
+export declare const Enter = "Enter";
+export declare const Escape = "Escape";
+export declare const Home = "Home";
+export declare const End = "End";
+export declare const PageUp = "PageUp";
+export declare const PageDown = "PageDown";
+export declare const Space = " ";
+export declare const Tab = "Tab";
+export declare const isCharacterKey: (evt: React.KeyboardEvent) => boolean;
+export declare const isNavigationKey: ({ key }: React.KeyboardEvent) => boolean;

package/types/useDataSource.d.ts

@@ -1,4 +1,4 @@
-import { DataSource, DataSourceRow, DataSourceSubscribedMessage } from "@vuu-ui/vuu-data";
+import { DataSource, DataSourceConfigMessage, DataSourceRow, DataSourceSubscribedMessage } from "@vuu-ui/vuu-data";
 import { VuuRange, VuuSortCol } from "@vuu-ui/vuu-protocol-types";
 export declare type SubscriptionDetails = {
     columnNames?: string[];
@@ -10,11 +10,12 @@ export declare type SubscriptionDetails = {
 };
 export interface DataSourceHookProps {
     dataSource?: DataSource;
+    onConfigChange?: (message: DataSourceConfigMessage) => void;
     onSizeChange: (size: number) => void;
     onSubscribed: (subscription: DataSourceSubscribedMessage) => void;
     range?: VuuRange;
 }
-export declare function useDataSource({ dataSource, onSizeChange, onSubscribed, range, }: DataSourceHookProps): {
+export declare function useDataSource({ dataSource, onConfigChange, onSizeChange, onSubscribed, range, }: DataSourceHookProps): {
     data: DataSourceRow[];
     setRange: (from: any, to: any) => void;
     dataSource: DataSource | undefined;

package/types/useDataTable.d.ts

@@ -1,18 +1,50 @@
 /// <reference types="react" />
 import { DataSource, DataSourceRow } from "@vuu-ui/vuu-data";
 import { GridConfig, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
-import { ValueFormatters } from "./dataTableTypes";
-export interface DataTableHookProps {
+import { VuuSortType } from "@vuu-ui/vuu-protocol-types";
+import { TableColumnResizeHandler, ValueFormatters } from "./dataTableTypes";
+import { MeasuredProps } from "./useMeasuredContainer";
+export interface DataTableHookProps extends MeasuredProps {
     config: GridConfig;
     data?: DataSourceRow[];
     dataSource?: DataSource;
+    headerHeight: number;
     onConfigChange?: (config: GridConfig) => void;
+    rowHeight: number;
 }
-export declare const useDataTable: ({ config, data: dataProp, dataSource, onConfigChange, }: DataTableHookProps) => {
-    valueFormatters: ValueFormatters;
+export declare const useDataTable: ({ config, data: dataProp, dataSource, headerHeight, onConfigChange, rowHeight, ...measuredProps }: DataTableHookProps) => {
+    containerMeasurements: import("./useMeasuredContainer").MeasuredContainerHookResult;
+    containerProps: {
+        onClick: (evt: import("react").MouseEvent<Element, MouseEvent>) => void;
+        onFocus: () => void;
+        onKeyDown: (e: import("react").KeyboardEvent<Element>) => void;
+    };
     columns: KeyedColumnDescriptor[];
     data: DataSourceRow[];
-    dispatchColumnAction: import("react").Dispatch<import("./useGridModel").GridModelAction>;
+    dispatchColumnAction: import("react").Dispatch<import("./useTableModel").GridModelAction>;
+    onColumnResize: TableColumnResizeHandler;
+    onRemoveColumnFromGroupBy: (column: KeyedColumnDescriptor) => void;
+    onSort: (column: KeyedColumnDescriptor, extendSort?: any, sortType?: VuuSortType) => void;
+    onToggleGroup: (row: DataSourceRow) => void;
+    scrollProps: {
+        onScrollbarContainerScroll: () => void;
+        onContentContainerScroll: () => void;
+        onTableContainerScroll: () => void;
+        contentContainerRef: import("react").RefObject<HTMLDivElement>;
+        scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
+        tableContainerRef: import("react").RefObject<HTMLDivElement>;
+    };
     setRangeVertical: (from: number, to: number) => void;
     rowCount: number;
+    valueFormatters: ValueFormatters;
+    viewportMeasurements: {
+        fillerHeight: number;
+        maxScrollContainerScrollHorizontal: number;
+        maxScrollContainerScrollVertical: number;
+        pinnedWidthLeft: number;
+        rowCount: number;
+        scrollContentHeight: number;
+        scrollbarSize: number;
+        scrollContentWidth: number;
+    };
 };

package/types/useDraggableColumn.d.ts

@@ -7,6 +7,6 @@ export interface DraggableColumnHookProps {
 export declare const useDraggableColumn: ({ onDrop, tableContainerRef, tableLayout: tableLayoutProp, }: DraggableColumnHookProps) => {
     draggable: JSX.Element | undefined;
     draggedItemIndex: number | undefined;
-    tableLayout: "row" | "column";
+    tableLayout: "column" | "row";
     handleHeaderCellDragStart: (evt: MouseEvent) => void;
 };

package/types/useKeyboardNavigation.d.ts

@@ -0,0 +1,20 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyboardEvent, MouseEvent, RefObject } from "react";
+import { ScrollRequestHandler } from "./useTableScroll";
+export declare type CellPos = [number, number];
+export interface NavigationHookProps {
+    containerRef: RefObject<HTMLElement>;
+    columnCount?: number;
+    data: DataSourceRow[];
+    disableHighlightOnFocus?: boolean;
+    label?: string;
+    requestScroll?: ScrollRequestHandler;
+    restoreLastFocus?: boolean;
+    rowCount?: number;
+    selected?: unknown;
+}
+export declare const useKeyboardNavigation: ({ columnCount, containerRef, disableHighlightOnFocus, data, requestScroll, rowCount, }: NavigationHookProps) => {
+    onClick: (evt: MouseEvent) => void;
+    onFocus: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+};

package/types/useMeasuredContainer.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from "react";
+export interface ClientSize {
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface MeasuredProps {
+    defaultHeight?: number;
+    defaultWidth?: number;
+    height?: number;
+    width?: number;
+}
+export interface Size {
+    height: number | "100%";
+    width: number | "100%";
+}
+export interface MeasuredSize {
+    height: number;
+    width: number;
+}
+export interface MeasuredContainerHookResult {
+    containerRef: RefObject<HTMLDivElement>;
+    outerSize: Size;
+    innerSize?: MeasuredSize;
+}
+export declare const useMeasuredContainer: ({ defaultHeight, defaultWidth, height, width, }: MeasuredProps) => MeasuredContainerHookResult;

package/types/useTableColumnResize.d.ts

@@ -0,0 +1,17 @@
+import { Heading, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { RefObject } from "react";
+export declare type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;
+export interface CellResizeHookProps {
+    column: KeyedColumnDescriptor | Heading;
+    onResize?: (phase: resizePhase, columnName: string, width?: number) => void;
+    rootRef: RefObject<HTMLDivElement>;
+}
+declare type resizePhase = "begin" | "resize" | "end";
+export interface CellResizeHookResult {
+    isResizing: boolean;
+    onDrag: (evt: MouseEvent, moveBy: number) => void;
+    onDragStart: (evt: React.MouseEvent) => void;
+    onDragEnd: (evt: MouseEvent) => void;
+}
+export declare const useTableColumnResize: ({ column, onResize, rootRef, }: CellResizeHookProps) => CellResizeHookResult;
+export {};

package/types/{useGridModel.d.ts → useTableModel.d.ts}

@@ -1,6 +1,7 @@
-import { ColumnDescriptor, GridConfig, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { ColumnDescriptor, GridConfig, KeyedColumnDescriptor, PinLocation } from "@vuu-ui/vuu-datagrid-types";
 import { Reducer } from "react";
-import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
+import { VuuColumnDataType, VuuGroupBy, VuuSort } from "@vuu-ui/vuu-protocol-types";
+import { DataSourceFilter } from "@vuu-ui/vuu-data";
 export interface GridModel extends Omit<GridConfig, "columns"> {
     columns: KeyedColumnDescriptor[];
 }
@@ -14,6 +15,12 @@ export interface ColumnActionMove {
     moveBy?: 1 | -1;
     moveTo?: number;
 }
+export interface ColumnActionResize {
+    type: "resizeColumn";
+    column: KeyedColumnDescriptor;
+    phase: "begin" | "resize" | "end";
+    width?: number;
+}
 export interface ColumnActionSetTypes {
     type: "setTypes";
     columnNames: string[];
@@ -24,19 +31,24 @@ export interface ColumnActionUpdate {
     column: ColumnDescriptor;
 }
 export interface ColumnActionUpdateProp {
-    type: "updateColumnProp";
-    column: KeyedColumnDescriptor;
     align?: ColumnDescriptor["align"];
+    column: KeyedColumnDescriptor;
     label?: ColumnDescriptor["label"];
+    pin?: PinLocation;
+    resizing?: KeyedColumnDescriptor["resizing"];
+    type: "updateColumnProp";
     width?: ColumnDescriptor["width"];
 }
-export interface ColumnActionUpdateGridConfig {
-    type: "updateGridConfig";
-    formatColumnHeaders?: GridConfig["columnFormatHeader"];
+export interface ColumnActionTableConfig {
+    type: "tableConfig";
+    filter?: DataSourceFilter;
+    groupBy?: VuuGroupBy;
+    sort?: VuuSort;
 }
-export declare type GridModelAction = ColumnActionInit | ColumnActionMove | ColumnActionSetTypes | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionUpdateGridConfig;
+export declare type GridModelAction = ColumnActionInit | ColumnActionMove | ColumnActionResize | ColumnActionSetTypes | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionTableConfig;
 export declare type GridModelReducer = Reducer<GridModel, GridModelAction>;
-export declare const useGridModel: (config: GridConfig) => {
+export declare type ColumnActionDispatch = (action: GridModelAction) => void;
+export declare const useTableModel: (config: GridConfig) => {
     columns: KeyedColumnDescriptor[];
     dispatchColumnAction: import("react").Dispatch<GridModelAction>;
 };

package/types/useTableScroll.d.ts

@@ -1,15 +1,31 @@
-import { RefObject } from "react";
+/// <reference types="react" />
 import { Viewport } from "./dataTableTypes";
+export interface ScrollRequestEnd {
+    type: "scroll-end";
+    direction: "home" | "end";
+}
+export interface ScrollRequestPage {
+    type: "scroll-page";
+    direction: "up" | "down";
+}
+export interface ScrollRequestDistance {
+    type: "scroll-distance";
+    distance: number;
+}
+export declare type ScrollRequest = ScrollRequestPage | ScrollRequestDistance | ScrollRequestEnd;
+export declare type ScrollRequestHandler = (request: ScrollRequest) => void;
 export interface TableScrollHookProps {
     onRangeChange: (from: number, to: number) => void;
-    rootRef: RefObject<HTMLDivElement>;
     rowHeight: number;
-    scrollContainerRef: RefObject<HTMLDivElement>;
-    tableContainerRef: RefObject<HTMLDivElement>;
     viewportHeight: number;
     viewport: Viewport;
 }
-export declare const useTableScroll: ({ onRangeChange, rootRef, rowHeight, scrollContainerRef, tableContainerRef, viewport, }: TableScrollHookProps) => {
-    handleScrollbarScroll: () => void;
-    handleRootScroll: () => void;
+export declare const useTableScroll: ({ onRangeChange, rowHeight, viewport, }: TableScrollHookProps) => {
+    onScrollbarContainerScroll: () => void;
+    onContentContainerScroll: () => void;
+    onTableContainerScroll: () => void;
+    requestScroll: ScrollRequestHandler;
+    contentContainerRef: import("react").RefObject<HTMLDivElement>;
+    scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
+    tableContainerRef: import("react").RefObject<HTMLDivElement>;
 };

package/types/useTableViewport.d.ts

@@ -1,22 +1,34 @@
-import { Size } from "./useMeasuredSize";
-import { RefObject } from "react";
-import { Column, TableMeasurements } from "./dataTableTypes";
+/**
+ * This hook measures and calculates the values needed to manage layout
+ * and virtualisation of the table. This includes measurements required
+ * to support pinned columns.
+ */
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { MeasuredSize } from "./useMeasuredContainer";
 export interface TableViewportHookProps {
-    columns: Column[];
+    columns: KeyedColumnDescriptor[];
     headerHeight: number;
-    rootRef: RefObject<HTMLDivElement>;
     rowCount: number;
     rowHeight: number;
-    size: Size;
+    size?: MeasuredSize;
 }
-export declare const useTableViewport: ({ columns, headerHeight, rootRef, rowCount, rowHeight, size, }: TableViewportHookProps) => {
-    measurements: TableMeasurements;
-    viewport: {
-        fillerHeight: number;
-        maxScrollContainerScrollHorizontal: number;
-        maxScrollContainerScrollVertical: number;
-        pinnedWidthLeft: number;
-        rowCount: number;
-        scrollContentWidth: number;
-    };
+export interface ViewportMeasurements {
+    fillerHeight: number;
+    maxScrollContainerScrollHorizontal: number;
+    maxScrollContainerScrollVertical: number;
+    pinnedWidthLeft: number;
+    rowCount: number;
+    scrollContentHeight: number;
+    scrollbarSize: number;
+    scrollContentWidth: number;
+}
+export declare const useTableViewport: ({ columns, headerHeight, rowCount, rowHeight, size, }: TableViewportHookProps) => {
+    fillerHeight: number;
+    maxScrollContainerScrollHorizontal: number;
+    maxScrollContainerScrollVertical: number;
+    pinnedWidthLeft: number;
+    rowCount: number;
+    scrollContentHeight: number;
+    scrollbarSize: number;
+    scrollContentWidth: number;
 };