@vuu-ui/vuu-datatable 0.6.13 → 0.8.14

package/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/vuu-datatable/src/index.ts", "../../../packages/vuu-datatable/src/filter-table/FilterTable.tsx", "../../../packages/vuu-datatable/src/json-table/JsonTable.tsx"],
+  "sourcesContent": ["export * from \"./filter-table\";\nexport * from \"./json-table\";\n", "import { FilterBar, FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { Table, TableProps } from \"@vuu-ui/vuu-table\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"classnames\";\n\nimport \"./FilterTable.css\";\n\nconst classBase = \"vuuFilterTable\";\n\nexport interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {\n  FilterBarProps: FilterBarProps;\n  TableProps: TableProps;\n}\n\nimport \"./FilterTable.css\";\n\nexport const FilterTable = ({\n  TableProps,\n  FilterBarProps,\n  ...htmlAttributes\n}: FilterTableProps) => {\n  return (\n    <div {...htmlAttributes} className={cx(classBase)}>\n      <FilterBar {...FilterBarProps} />\n      <Table {...TableProps} />\n    </div>\n  );\n};\n", "import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { JsonData } from \"@vuu-ui/vuu-utils\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { JsonDataSource } from \"@vuu-ui/vuu-data\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\n\nexport interface JsonTableProps\n  extends Omit<TableProps, \"config\" | \"dataSource\"> {\n  config?: Pick<\n    TableConfig,\n    \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n  >;\n  source: JsonData | undefined;\n}\n\nexport const JsonTable = ({\n  config,\n  source: sourceProp = { \"\": \"\" },\n  ...tableProps\n}: JsonTableProps) => {\n  const sourceRef = useRef(sourceProp);\n  const dataSourceRef = useRef<JsonDataSource>();\n  useMemo(() => {\n    dataSourceRef.current = new JsonDataSource({\n      data: sourceRef.current,\n    });\n  }, []);\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    return {\n      ...config,\n      columns: dataSourceRef.current?.columnDescriptors ?? [],\n    };\n  }, [config]);\n\n  useEffect(() => {\n    if (dataSourceRef.current) {\n      dataSourceRef.current.data = sourceProp;\n    }\n  }, [sourceProp]);\n\n  if (dataSourceRef.current === undefined) {\n    return null;\n  }\n\n  return (\n    <Table\n      {...tableProps}\n      config={tableConfig}\n      dataSource={dataSourceRef.current}\n    />\n  );\n};\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,EAAA,cAAAC,IAAA,eAAAC,EAAAJ,GCAA,IAAAK,EAA0C,+BAC1CC,EAAkC,6BAElCC,EAAe,yBAmBX,IAAAC,EAAA,6BAfEC,EAAY,iBASLC,EAAc,CAAC,CAC1B,WAAAC,EACA,eAAAC,EACA,GAAGC,CACL,OAEI,QAAC,OAAK,GAAGA,EAAgB,aAAW,EAAAC,SAAGL,CAAS,EAC9C,oBAAC,aAAW,GAAGG,EAAgB,KAC/B,OAAC,SAAO,GAAGD,EAAY,GACzB,ECvBJ,IAAAI,EAAsB,6BACtBC,EAA+B,4BAC/BC,EAA2C,iBA2CvCC,EAAA,6BA/BSC,EAAY,CAAC,CACxB,OAAAC,EACA,OAAQC,EAAa,CAAE,GAAI,EAAG,EAC9B,GAAGC,CACL,IAAsB,CACpB,IAAMC,KAAY,UAAOF,CAAU,EAC7BG,KAAgB,UAAuB,KAC7C,WAAQ,IAAM,CACZA,EAAc,QAAU,IAAI,iBAAe,CACzC,KAAMD,EAAU,OAClB,CAAC,CACH,EAAG,CAAC,CAAC,EAEL,IAAME,KAAc,WAAqB,IAAM,CA7BjD,IAAAC,EAAAC,EA8BI,MAAO,CACL,GAAGP,EACH,SAASO,GAAAD,EAAAF,EAAc,UAAd,YAAAE,EAAuB,oBAAvB,KAAAC,EAA4C,CAAC,CACxD,CACF,EAAG,CAACP,CAAM,CAAC,EAQX,SANA,aAAU,IAAM,CACVI,EAAc,UAChBA,EAAc,QAAQ,KAAOH,EAEjC,EAAG,CAACA,CAAU,CAAC,EAEXG,EAAc,UAAY,OACrB,QAIP,OAAC,SACE,GAAGF,EACJ,OAAQG,EACR,WAAYD,EAAc,QAC5B,CAEJ",
+  "names": ["src_exports", "__export", "FilterTable", "JsonTable", "__toCommonJS", "import_vuu_filters", "import_vuu_table", "import_classnames", "import_jsx_runtime", "classBase", "FilterTable", "TableProps", "FilterBarProps", "htmlAttributes", "cx", "import_vuu_table", "import_vuu_data", "import_react", "import_jsx_runtime", "JsonTable", "config", "sourceProp", "tableProps", "sourceRef", "dataSourceRef", "tableConfig", "_a", "_b"]
+}

package/esm/index.js

@@ -0,0 +1,2 @@
+import{FilterBar as m}from"@vuu-ui/vuu-filters";import{Table as c}from"@vuu-ui/vuu-table";import u from"classnames";import{jsx as s,jsxs as T}from"react/jsx-runtime";var b="vuuFilterTable",L=({TableProps:o,FilterBarProps:e,...t})=>T("div",{...t,className:u(b),children:[s(m,{...e}),s(c,{...o})]});import{Table as d}from"@vuu-ui/vuu-table";import{JsonDataSource as P}from"@vuu-ui/vuu-data";import{useEffect as x,useMemo as i,useRef as l}from"react";import{jsx as F}from"react/jsx-runtime";var O=({config:o,source:e={"":""},...t})=>{let p=l(e),r=l();i(()=>{r.current=new P({data:p.current})},[]);let f=i(()=>{var a,n;return{...o,columns:(n=(a=r.current)==null?void 0:a.columnDescriptors)!=null?n:[]}},[o]);return x(()=>{r.current&&(r.current.data=e)},[e]),r.current===void 0?null:F(d,{...t,config:f,dataSource:r.current})};export{L as FilterTable,O as JsonTable};
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/vuu-datatable/src/filter-table/FilterTable.tsx", "../../../packages/vuu-datatable/src/json-table/JsonTable.tsx"],
+  "sourcesContent": ["import { FilterBar, FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { Table, TableProps } from \"@vuu-ui/vuu-table\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"classnames\";\n\nimport \"./FilterTable.css\";\n\nconst classBase = \"vuuFilterTable\";\n\nexport interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {\n  FilterBarProps: FilterBarProps;\n  TableProps: TableProps;\n}\n\nimport \"./FilterTable.css\";\n\nexport const FilterTable = ({\n  TableProps,\n  FilterBarProps,\n  ...htmlAttributes\n}: FilterTableProps) => {\n  return (\n    <div {...htmlAttributes} className={cx(classBase)}>\n      <FilterBar {...FilterBarProps} />\n      <Table {...TableProps} />\n    </div>\n  );\n};\n", "import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { JsonData } from \"@vuu-ui/vuu-utils\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { JsonDataSource } from \"@vuu-ui/vuu-data\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\n\nexport interface JsonTableProps\n  extends Omit<TableProps, \"config\" | \"dataSource\"> {\n  config?: Pick<\n    TableConfig,\n    \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n  >;\n  source: JsonData | undefined;\n}\n\nexport const JsonTable = ({\n  config,\n  source: sourceProp = { \"\": \"\" },\n  ...tableProps\n}: JsonTableProps) => {\n  const sourceRef = useRef(sourceProp);\n  const dataSourceRef = useRef<JsonDataSource>();\n  useMemo(() => {\n    dataSourceRef.current = new JsonDataSource({\n      data: sourceRef.current,\n    });\n  }, []);\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    return {\n      ...config,\n      columns: dataSourceRef.current?.columnDescriptors ?? [],\n    };\n  }, [config]);\n\n  useEffect(() => {\n    if (dataSourceRef.current) {\n      dataSourceRef.current.data = sourceProp;\n    }\n  }, [sourceProp]);\n\n  if (dataSourceRef.current === undefined) {\n    return null;\n  }\n\n  return (\n    <Table\n      {...tableProps}\n      config={tableConfig}\n      dataSource={dataSourceRef.current}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,OAAS,aAAAA,MAAiC,sBAC1C,OAAS,SAAAC,MAAyB,oBAElC,OAAOC,MAAQ,aAmBX,OACE,OAAAC,EADF,QAAAC,MAAA,oBAfJ,IAAMC,EAAY,iBASLC,EAAc,CAAC,CAC1B,WAAAC,EACA,eAAAC,EACA,GAAGC,CACL,IAEIL,EAAC,OAAK,GAAGK,EAAgB,UAAWC,EAAGL,CAAS,EAC9C,UAAAF,EAACQ,EAAA,CAAW,GAAGH,EAAgB,EAC/BL,EAACS,EAAA,CAAO,GAAGL,EAAY,GACzB,ECvBJ,OAAS,SAAAM,MAAa,oBACtB,OAAS,kBAAAC,MAAsB,mBAC/B,OAAS,aAAAC,EAAW,WAAAC,EAAS,UAAAC,MAAc,QA2CvC,cAAAC,MAAA,oBA/BG,IAAMC,EAAY,CAAC,CACxB,OAAAC,EACA,OAAQC,EAAa,CAAE,GAAI,EAAG,EAC9B,GAAGC,CACL,IAAsB,CACpB,IAAMC,EAAYN,EAAOI,CAAU,EAC7BG,EAAgBP,EAAuB,EAC7CD,EAAQ,IAAM,CACZQ,EAAc,QAAU,IAAIV,EAAe,CACzC,KAAMS,EAAU,OAClB,CAAC,CACH,EAAG,CAAC,CAAC,EAEL,IAAME,EAAcT,EAAqB,IAAM,CA7BjD,IAAAU,EAAAC,EA8BI,MAAO,CACL,GAAGP,EACH,SAASO,GAAAD,EAAAF,EAAc,UAAd,YAAAE,EAAuB,oBAAvB,KAAAC,EAA4C,CAAC,CACxD,CACF,EAAG,CAACP,CAAM,CAAC,EAQX,OANAL,EAAU,IAAM,CACVS,EAAc,UAChBA,EAAc,QAAQ,KAAOH,EAEjC,EAAG,CAACA,CAAU,CAAC,EAEXG,EAAc,UAAY,OACrB,KAIPN,EAACL,EAAA,CACE,GAAGS,EACJ,OAAQG,EACR,WAAYD,EAAc,QAC5B,CAEJ",
+  "names": ["FilterBar", "Table", "cx", "jsx", "jsxs", "classBase", "FilterTable", "TableProps", "FilterBarProps", "htmlAttributes", "cx", "FilterBar", "Table", "Table", "JsonDataSource", "useEffect", "useMemo", "useRef", "jsx", "JsonTable", "config", "sourceProp", "tableProps", "sourceRef", "dataSourceRef", "tableConfig", "_a", "_b"]
+}

package/index.css

@@ -1,2 +1,2 @@
-.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;user-select:none}.vuuDataTable-table td{--saltEditableLabel-height: 17px;--saltInput-height: 17px;--saltInput-minHeight: 17px;border-right:1px solid var(--vuuTableCell-border-rightColor);border-bottom:1px solid var(--vuuTableCell-border-bottomColor);color:var(--salt-text-primary-foreground);cursor:default;height:var(--vuuTable-rowHeight);line-height:calc(var(--vuuTable-rowHeight) - 1px);overflow:hidden;padding:0 5px}.vuuDataTable th:focus,.vuuDataTable td:focus{outline:var(--vuuTableCell-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{padding-bottom:var(--cell-outline-width)}.vuuDataTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{--columnResizer-color: transparent}.vuuDataTable td:focus{border-right:none;padding-bottom:1px}td[data-editable=true]{--salt-text-fontSize: 10px;--vuu-icon-size: 5px;position:relative}td[data-editable=true]:after{top:0;content:"";background-color:var(--salt-text-secondary-foreground, black);left:0;height:var(--vuu-icon-height, var(--vuu-icon-size, 12px));-webkit-mask:var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask:var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;transform:rotate(180deg);width:var(--vuu-icon-width, var(--vuu-icon-size, 12px))}td:focus[data-editable],td:focus-within[data-editable],td:has(.saltEditableLabel-editing){outline:solid var(--salt-color-blue-400) 1px;background-color:#fff;outline-offset:-1px}td:focus[data-editable=true]:after,td:has(.saltEditableLabel):after{background-color:var(--salt-color-blue-400);left:1px;top: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 :is(.vuuPinFloating,.vuuPinLeft,.vuuPinRight){background-color:var(--row-background)}.vuuDataTableRow-expanded{--row-toggle-icon-transform: rotate(90deg)}.vuuDataTableRow[aria-selected]{background-color:var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));--vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected)}.vuuDataTableRow-preSelected{--vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected)}.vuuColumnResizer{cursor:col-resize;margin-left:auto;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-heading:nth-child(2){--heading-top: calc(var(--header-height))}.vuuTable-heading:nth-child(3){--heading-top: calc(var(--header-height) * 2)}.vuuTable-heading:nth-child(3){--heading-top: calc(var(--header-height) * 3)}.vuuTable-headingCell{background:var(--table-background);border-color:var(--salt-separable-tertiary-borderColor);border-style:solid solid solid none;border-width:1px;color:var(--salt-text-secondary-foreground);height:var(--vuuTableHeaderHeight);padding:0!important;position:sticky;top:var(--heading-top, 0);z-index:1}.vuuTable-heading:has(+ .vuuTable-heading)>.vuuTable-headingCell{border-bottom-color:transparent}.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:calc(var(--total-header-height) - var(--header-height));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}.vuuTable-headerCell.vuuPinLeft.vuuEndPin:after{box-shadow:2px 0 5px #0006;content:"";position:absolute;width:1px;background-color:transparent;height:var(--table-height);top:0;right:0px}.vuuTable-headerCell.vuuPinRight.vuuEndPin:after{box-shadow:-2px 0 5px #0000004d;content:"";position:absolute;width:1px;background-color:transparent;height:var(--table-height);top:0;left:0px}.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}.salt-theme{--vuuFilterEditor-lineHeight: 28px}.salt-density-high{--vuuFilterEditor-buttonWidth: 20px;--vuuFilterEditor-height: 22px;--vuuFilterEditor-lineHeight: 20px}.vuuFilterInput{--vuuFilterEditor-background: var(--salt-container-primary-background);--vuuFilterEditor-color: var(--salt-text-primary-foreground);--vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);--vuuFilterEditor-fontSize: var(--salt-text-fontSize);--vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);--vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);--vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);--vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);--vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);--vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);--vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);--vuuFilterEditor-suggestion-height: 24px;--vuuFilterEditor-variableColor: blue;align-items:center;border-color:var(--salt-container-secondary-borderColor);border-style:solid none;border-width:1px;box-sizing:border-box;display:flex;height:var(--vuuFilterEditor-height, 30px)}.vuuFilterInput-Editor{flex:1 1 auto;height:100%}.vuuFilterInput-FilterButton,.vuuFilterInput-ClearButton{--vuu-icon-size: 12px;--saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px)}.vuuIllustration{--vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);background:var(--salt-container-secondary-background);color:var(--salt-text-secondary-foreground)}.vuuFilterDropdown,.vuuFilterSwitch{--saltToolbarField-marginTop: 0;height:100%}.vuuFilterDropdown.saltFormField-focused:before{top:2px!important;bottom:2px!important}.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%)}.vuuTable-groupHeaderCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}.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(--total-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:repeating-linear-gradient(to bottom,var(--salt-container-secondary-background),var(--salt-container-secondary-background) 20px,var(--table-background) 20px,var(--table-background) 40px);border-collapse:separate;border-spacing:0;border-left:1px solid #ccc;border:none;font-size:var(--vuuDataTable-font-size, 10px);margin:0;min-height:100%;table-layout:fixed;width:var(--vuuTable-contentWidth)}.vuuDataTable-columnBased{display:inline-table;height:var(--vuuTable-height);position:static}.vuuDataTable-filler{height:var(--filler-height)}:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){position:sticky}.vuuAlignRight{text-align:right}th:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){top:0;z-index:20}table:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){z-index:10}.vuuDataTable-settings{height:var(--header-height);position:absolute;right:0;top:0;width:15px}.vuuDataTable:has(.vuuTable-headerCell-resizing) *{cursor:col-resize}.saltDraggable-table-column{background-color:var(--salt-container-primary-background);overflow:hidden}
+.vuuFilterTable{--vuuFilterBar-flex: 0 0 33px;display:flex;flex-direction:column}
 /*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "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-filters/src/filter-input/FilterInput.css", "../../../packages/vuu-filters/src/filter-toolbar/FilterToolbar.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    user-select: none;\n}\n\n.vuuDataTable-table td {\n    --saltEditableLabel-height: 17px;\n    --saltInput-height: 17px;\n    --saltInput-minHeight: 17px;\n\n    border-right: 1px solid var(--vuuTableCell-border-rightColor);\n    border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);\n    color: var(--salt-text-primary-foreground);\n    cursor: default;\n    height: var(--vuuTable-rowHeight);\n    line-height: calc(var(--vuuTable-rowHeight) - 1px);\n    overflow: hidden;\n    padding: 0 5px;\n}\n\n\n.vuuDataTable th:focus,\n.vuuDataTable td:focus {\n    outline: var(--vuuTableCell-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    /** This is to achieve a white background to outline dashes */\n    padding-bottom: var(--cell-outline-width);\n}\n\n.vuuDataTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{\n    --columnResizer-color: transparent;\n}\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}\n\n\ntd[data-editable=\"true\"] {\n    --salt-text-fontSize: 10px;\n    --vuu-icon-size: 5px;\n    position: relative;\n}\n\ntd[data-editable=\"true\"]:after {\n    top: 0;\n    content: \"\";\n    background-color: var(--salt-text-secondary-foreground, black);\n    left: 0;\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    transform: rotate(180deg);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n  }\n  \ntd:focus[data-editable],\ntd:focus-within[data-editable],\ntd:has(.saltEditableLabel-editing) {\n    outline: solid var(--salt-color-blue-400) 1px;\n    background-color: white;\n    outline-offset: -1px;\n}\n\ntd:focus[data-editable=\"true\"]:after,\ntd:has(.saltEditableLabel):after {\n        /* background-color: black; */\n    background-color: var(--salt-color-blue-400);\n    left: 1px;\n    top: 1px;\n}\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 :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {\n    background-color: var(--row-background);\n  }\n  \n  .vuuDataTableRow-expanded {\n    --row-toggle-icon-transform: rotate(90deg);\n  }\n  \n  .vuuDataTableRow[aria-selected] {\n    background-color: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));\n    --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n  }\n\n  /* .vuuDataTableRow:not([aria-selected]):has(+ [aria-selected]) {\n    --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n  } */\n\n  .vuuDataTableRow-preSelected {\n    --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n  }", ".vuuColumnResizer {\n    cursor: col-resize;\n    margin-left: auto;\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", "/* We support multi level headings up to a  maximum of 4 heading levels */\n.vuuTable-heading:nth-child(2) {\n  --heading-top: calc(var(--header-height));\n}\n.vuuTable-heading:nth-child(3) {\n  --heading-top: calc(var(--header-height) * 2);\n}\n.vuuTable-heading:nth-child(3) {\n  --heading-top: calc(var(--header-height) * 3);\n}\n\n.vuuTable-headingCell {\n  background: var(--table-background);\n  border-color: var(--salt-separable-tertiary-borderColor);\n  border-style: solid solid solid none;\n  border-width: 1px;\n  color: var(--salt-text-secondary-foreground);\n  height: var(--vuuTableHeaderHeight);\n  padding: 0 !important;\n  position: sticky;\n  top: var(--heading-top, 0);\n  z-index: 1;\n}\n\n.vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {\n  border-bottom-color: transparent;\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: calc(var(--total-header-height) - var(--header-height));\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  }\n\n  .vuuTable-headerCell.vuuPinLeft.vuuEndPin:after {\n    box-shadow: 2px 0px 5px rgba(0,0,0,0.4);\n    content: \"\";\n    position: absolute;\n    width: 1px;\n    background-color: transparent;\n    height: var(--table-height);\n    top:0;\n    right: 0px;\n  }\n\n  .vuuTable-headerCell.vuuPinRight.vuuEndPin:after {\n    box-shadow: -2px 0px 5px rgba(0,0,0,0.3);\n    content: \"\";\n    position: absolute;\n    width: 1px;\n    background-color: transparent;\n    height: var(--table-height);\n    top:0;\n    left: 0px;\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", "\n.salt-theme {\n    --vuuFilterEditor-lineHeight: 28px;\n}\n\n.salt-density-high {\n    --vuuFilterEditor-buttonWidth: 20px;\n    --vuuFilterEditor-height: 22px;\n    --vuuFilterEditor-lineHeight: 20px;\n}\n\n.vuuFilterInput {\n    --vuuFilterEditor-background: var(--salt-container-primary-background);\n    --vuuFilterEditor-color: var(--salt-text-primary-foreground);\n    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n    --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);\n    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n    --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n    --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n    --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n    --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);\n    --vuuFilterEditor-suggestion-height: 24px;\n    --vuuFilterEditor-variableColor: blue;\n\n    align-items: center;\n    border-color: var(--salt-container-secondary-borderColor);\n    border-style: solid none;\n    border-width: 1px;\n    box-sizing: border-box;\n    display: flex;\n    height: var(--vuuFilterEditor-height, 30px);\n}\n\n.vuuFilterInput-Editor {\n    flex: 1 1 auto;\n    height: 100%;\n}\n\n.vuuFilterInput-FilterButton,\n.vuuFilterInput-ClearButton {\n    --vuu-icon-size: 12px;\n    --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);\n}\n\n.vuuIllustration {\n    --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);\n    background: var(--salt-container-secondary-background);\n    color: var(--salt-text-secondary-foreground);\n}\n\n\n", ".vuuFilterDropdown,\n.vuuFilterSwitch {\n    --saltToolbarField-marginTop: 0;\n\n    height: 100%;\n}\n\n.vuuFilterDropdown.saltFormField-focused:before {\n    top: 2px !important;\n    bottom: 2px !important;\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    .vuuTable-groupHeaderCell-resizing {\n    --columnResizer-color: var(--salt-color-blue-500);\n    --columnResizer-height: var(--table-height);\n    --columnResizer-width: 2px;\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(--total-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: repeating-linear-gradient(\n    to bottom, \n    var(--salt-container-secondary-background), \n    var(--salt-container-secondary-background) 20px, \n    var(--table-background) 20px, \n    var(--table-background) 40px);\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  min-height: 100%;\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:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n  position: sticky;\n}\n\n.vuuAlignRight {\n  text-align: right;\n}\n\nth:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n  top:0;\n  z-index: 20;\n}\n\ntable:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\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  width: 15px;\n}\n\n.vuuDataTable:has(.vuuTable-headerCell-resizing) * {\n  cursor: col-resize;\n}\n\n.saltDraggable-table-column {\n  background-color: var(--salt-container-primary-background);\n  overflow: hidden;\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,0BACA,iBAGJ,uBACI,iCACA,yBACA,4BAEA,6DACA,+DACA,0CACA,eACA,iCACA,kDACA,gBAhBJ,cAqBA,8CAEI,iGACA,oDAEA,sDACA,mBAGJ,kDAEI,yCAGJ,qFACI,mCAIJ,uBAEI,kBACA,mBAIJ,uBACI,2BACA,qBACA,kBAGJ,6BACI,MACA,WACA,8DACA,OACA,0DACA,gGACA,wFACA,sBACA,8BACA,kBACA,yBACA,wDAGJ,0FAGI,6CACA,sBACA,oBAGJ,oEAGI,4CACA,SACA,QCjFJ,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,+DACE,uCAGF,0BACE,2CAGF,gCACE,oGACA,+EAOF,6BACE,+EC9BJ,kBACI,kBACA,iBACA,UAGJ,wBACI,WACA,kBACA,sCACA,MACA,SACA,QACA,wFACA,yCCdJ,kBACE,uBACA,8BACA,aACA,sBACA,kBACA,WAGF,iBACE,eACA,iBACA,kBCXF,+BACE,0CAEF,+BACE,8CAEF,+BACE,8CAGF,sBACE,mCACA,wDACA,oCACA,iBACA,4CACA,mCAjBF,oBAmBE,gBACA,0BACA,UAGF,iEACE,gCAGF,qBACE,2BACA,gBACE,mCAEA,mEACA,4CACA,eAnCJ,oBAqCI,gBACA,4DACA,mCAEA,UAGF,2BACE,uBAGF,2BACE,oBACA,aACA,YAnDJ,kBAuDE,oDACE,eAGF,2BACE,mBACA,kCACA,aACA,cAGF,8BACE,kDACA,4CACA,2BAGF,gDACE,2BACA,WACA,kBACA,UACA,6BACA,2BACA,MACA,UAGF,iDACE,gCACA,WACA,kBACA,UACA,6BACA,2BACA,MACA,SC3FJ,oBACE,uBACA,8BACA,mBACA,eACA,aACA,cACA,sBACA,uBACA,kBAGF,+CACE,eCZF,YACI,mCAGJ,mBACI,oCACA,+BACA,mCAGJ,gBACI,uEACA,6DACA,gEACA,sDACA,qEACA,4EACA,8EACA,uIACA,0EACA,4FACA,yEACA,0CACA,sCAEA,mBACA,yDACA,wBACA,iBACA,sBACA,aACA,2CAGJ,uBACI,cACA,YAGJ,yDAEI,sBACA,6DAGJ,iBACI,2FACA,sDACA,4CCjDJ,oCAEI,gCAEA,YAGJ,gDACI,kBACA,qBCTJ,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,wFAGA,mCACA,kDACA,4CACA,2BCnEJ,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,oEACA,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,qMAMA,yBACA,iBACA,2BACA,YACA,8CAjGF,SAmGE,gBACA,mBACA,mCAGF,0BACE,qBACA,8BACA,gBAOF,qBACE,4BAGF,8CACE,gBAGF,eACE,iBAGF,gDACE,MACA,WAGF,mDACE,WAOF,uBACE,4BACA,kBACA,QACA,MACA,WAGF,mDACE,kBAGF,4BACE,0DACA",
+  "sources": ["../../../packages/vuu-datatable/src/filter-table/FilterTable.css"],
+  "sourcesContent": [".vuuFilterTable {\n    --vuuFilterBar-flex: 0 0 33px;\n    display: flex;\n    flex-direction: column;\n}"],
+  "mappings": "AAAA,gBACI,8BACA,aACA",
   "names": []
 }

package/package.json

@@ -1,23 +1,29 @@
 {
   "name": "@vuu-ui/vuu-datatable",
-  "version": "0.6.13",
+  "version": "0.8.14",
   "author": "heswell",
   "license": "Apache-2.0",
+  "dependencies": {
+    "@vuu-ui/vuu-data": "0.8.14",
+    "@vuu-ui/vuu-table-types": "0.8.14",
+    "@vuu-ui/vuu-filters": "0.8.14",
+    "@vuu-ui/vuu-layout": "0.8.14",
+    "@vuu-ui/vuu-popups": "0.8.14",
+    "@vuu-ui/vuu-table": "0.8.14",
+    "@vuu-ui/vuu-table-extras": "0.8.14",
+    "@vuu-ui/vuu-ui-controls": "0.8.14",
+    "@vuu-ui/vuu-utils": "0.8.14"
+  },
   "peerDependencies": {
-    "@salt-ds/core": "1.0.0",
-    "@salt-ds/icons": "1.0.0",
-    "@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
-    "@vuu-ui/vuu-utils": "0.6.13",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "files": [
-    "index.js",
+    "cjs",
+    "esm",
     "index.css",
-    "index.js.map",
     "index.css.map",
-    "/src",
     "/types"
   ],
   "module": "esm/index.js",

package/types/filter-table/FilterTable.d.ts

@@ -0,0 +1,10 @@
+import { FilterBarProps } from "@vuu-ui/vuu-filters";
+import { TableProps } from "@vuu-ui/vuu-table";
+import { HTMLAttributes } from "react";
+import "./FilterTable.css";
+export interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {
+    FilterBarProps: FilterBarProps;
+    TableProps: TableProps;
+}
+import "./FilterTable.css";
+export declare const FilterTable: ({ TableProps, FilterBarProps, ...htmlAttributes }: FilterTableProps) => JSX.Element;

package/types/filter-table/index.d.ts

@@ -0,0 +1 @@
+export * from "./FilterTable";

package/types/index.d.ts

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

package/types/json-table/JsonTable.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TableProps } from "@vuu-ui/vuu-table";
+import { JsonData } from "@vuu-ui/vuu-utils";
+import { TableConfig } from "@vuu-ui/vuu-table-types";
+export interface JsonTableProps extends Omit<TableProps, "config" | "dataSource"> {
+    config?: Pick<TableConfig, "columnSeparators" | "rowSeparators" | "zebraStripes">;
+    source: JsonData | undefined;
+}
+export declare const JsonTable: ({ config, source: sourceProp, ...tableProps }: JsonTableProps) => JSX.Element | null;

package/types/json-table/index.d.ts

@@ -0,0 +1 @@
+export * from "./JsonTable";

package/types/ColumnBasedTable.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { TableImplementationProps } from "./dataTableTypes";
-export declare const ColumnBasedTable: ({ columns, data, headerHeight, onHeaderCellDragEnd, rowHeight, }: TableImplementationProps) => JSX.Element;

package/types/ColumnResizer.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import "./ColumnResizer.css";
-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 +0,0 @@
-/// <reference types="react" />
-import { TableProps } from "./dataTableTypes";
-import "./DataTable.css";
-export declare const DataTable: ({ allowConfigEditing: showSettings, className, config, dataSource, headerHeight, height, id: idProp, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, onShowConfigEditor: onShowSettings, renderBufferSize, rowHeight, selectionModel, style: styleProp, tableLayout: tableLayoutProp, width, ...props }: TableProps) => JSX.Element;

package/types/DragVisualizer.d.ts

@@ -1,8 +0,0 @@
-import React, { ReactNode } from "react";
-import "./DragVisualizer.css";
-export declare const useListViz: () => unknown;
-export interface DragVisualizerProps {
-    children: ReactNode;
-    orientation?: "vertical" | "horizontal";
-}
-export declare const DragVisualizer: React.FC<DragVisualizerProps>;

package/types/KeySet.d.ts

@@ -1,12 +0,0 @@
-import { DataSourceRow } from "@vuu-ui/vuu-data";
-import { VuuRange } from "@vuu-ui/vuu-protocol-types";
-export declare class KeySet {
-    private keys;
-    private free;
-    private nextKeyValue;
-    constructor(range: VuuRange);
-    next(): number;
-    reset({ from, to }: VuuRange): void;
-    keyFor(rowIndex: number): number;
-    withKeys(data: DataSourceRow[]): DataSourceRow[];
-}

package/types/RowBasedTable.d.ts

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

package/types/SortIndicator.d.ts

@@ -1,7 +0,0 @@
-/// <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,9 +0,0 @@
-import { DataSourceRow } from "@vuu-ui/vuu-data";
-import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
-import { HTMLAttributes } from "react";
-import "./TableCell.css";
-export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
-    column: KeyedColumnDescriptor;
-    row: DataSourceRow;
-}
-export declare const TableCell: import("react").MemoExoticComponent<({ className: classNameProp, column, row }: TableCellProps) => JSX.Element>;

package/types/TableGroupCell.d.ts

@@ -1,7 +0,0 @@
-/// <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

@@ -1,13 +0,0 @@
-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,11 +0,0 @@
-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;
-    onResize?: TableColumnResizeHandler;
-}
-export declare const TableHeaderCell: ({ column, className: classNameProp, onClick, onDragStart, onResize, ...props }: TableHeaderCellProps) => JSX.Element;

package/types/TableRow.d.ts

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

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

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

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

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

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

@@ -1,16 +0,0 @@
-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 { PersistentColumnAction } from "../useTableModel";
-export interface ContextMenuOptions {
-    column?: KeyedColumnDescriptor;
-    filter?: Filter;
-    sort?: VuuFilter;
-}
-export interface ContextMenuHookProps {
-    dataSource?: DataSource;
-    onPersistentColumnOperation: (action: PersistentColumnAction) => void;
-}
-export declare const useContextMenu: ({ dataSource, onPersistentColumnOperation, }: ContextMenuHookProps) => MenuActionHandler;

package/types/dataTableTypes.d.ts

@@ -1,67 +0,0 @@
-import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
-import { KeyedColumnDescriptor, GridConfig, TableHeadings, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
-import { HTMLAttributes, MouseEvent } from "react";
-export type tableLayoutType = "row" | "column";
-export interface TableProps extends HTMLAttributes<HTMLDivElement> {
-    allowConfigEditing?: boolean;
-    config: Omit<GridConfig, "headings">;
-    dataSource: DataSource;
-    headerHeight?: number;
-    height?: number;
-    onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
-    /**
-     * Features like context menu actions and visual links are enabled by the Vuu server.
-     * This callback allows us to receive a notification when such a feature is available.
-     * The options provided must then be used to configure appropriate UI affordances.
-     */
-    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
-    /**
-     * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server
-     * response must be handled. This callback provides that response.
-     */
-    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
-    onShowConfigEditor?: () => void;
-    onSelectionChange?: SelectionChangeHandler;
-    renderBufferSize?: number;
-    rowHeight?: number;
-    selectionModel?: TableSelectionModel;
-    tableLayout?: tableLayoutType;
-    width?: number;
-}
-export type TableColumnResizeHandler = (phase: "begin" | "resize" | "end", columnName: string, width?: number) => void;
-export interface TableImplementationProps {
-    columns: KeyedColumnDescriptor[];
-    data: DataSourceRow[];
-    headerHeight: number;
-    headings: TableHeadings;
-    onColumnResize?: TableColumnResizeHandler;
-    onHeaderCellDragEnd?: () => void;
-    onHeaderCellDragStart?: (evt: MouseEvent) => void;
-    onContextMenu?: (evt: MouseEvent<HTMLElement>) => void;
-    onRemoveColumnFromGroupBy?: (column: KeyedColumnDescriptor) => void;
-    onRowClick?: RowClickHandler;
-    onSort: (column: KeyedColumnDescriptor, isAdditive: boolean) => void;
-    onToggleGroup?: (row: DataSourceRow) => void;
-    rowCount: number;
-    rowHeight: number;
-}
-type MeasureStatus = "unmeasured" | "measured";
-export interface TableMeasurements {
-    contentHeight: number;
-    left: number;
-    right: number;
-    scrollbarSize: number;
-    scrollContentHeight: number;
-    status: MeasureStatus;
-    top: number;
-}
-export interface Viewport {
-    fillerHeight: number;
-    maxScrollContainerScrollHorizontal: number;
-    maxScrollContainerScrollVertical: number;
-    pinnedWidthLeft: number;
-    rowCount: number;
-    scrollContentWidth: number;
-}
-export type RowClickHandler = (row: DataSourceRow, rangeSelect: boolean, keepExistingSelection: boolean) => void;
-export {};

package/types/filter-indicator.d.ts

@@ -1,13 +0,0 @@
-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/keyUtils.d.ts

@@ -1,19 +0,0 @@
-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 type ArrowKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
-export type PageKey = "Home" | "End" | "PageUp" | "PageDown";
-export type NavigationKey = PageKey | ArrowKey;
-export declare const isPagingKey: (key: string) => key is PageKey;
-export declare const isNavigationKey: (key: string) => key is NavigationKey;

package/types/useDataSource.d.ts

@@ -1,40 +0,0 @@
-import { DataSource, DataSourceConfigMessage, DataSourceRow, DataSourceSubscribedMessage, VuuFeatureMessage, VuuFeatureInvocationMessage } from "@vuu-ui/vuu-data";
-import { VuuRange, VuuSortCol } from "@vuu-ui/vuu-protocol-types";
-export type SubscriptionDetails = {
-    columnNames?: string[];
-    range: {
-        from: number;
-        to: number;
-    };
-    sort?: VuuSortCol[];
-};
-export interface DataSourceHookProps {
-    dataSource: DataSource;
-    onConfigChange?: (message: DataSourceConfigMessage) => void;
-    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
-    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
-    onSizeChange: (size: number) => void;
-    onSubscribed: (subscription: DataSourceSubscribedMessage) => void;
-    range?: VuuRange;
-    renderBufferSize?: number;
-    viewportRowCount: number;
-}
-export declare function useDataSource({ dataSource, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSizeChange, onSubscribed, range, renderBufferSize, viewportRowCount, }: DataSourceHookProps): {
-    data: DataSourceRow[];
-    getSelectedRows: () => DataSourceRow[];
-    range: VuuRange;
-    setRange: (range: VuuRange) => void;
-    dataSource: DataSource;
-};
-export declare class MovingWindow {
-    data: DataSourceRow[];
-    rowCount: number;
-    private range;
-    constructor({ from, to }: VuuRange);
-    setRowCount: (rowCount: number) => void;
-    add(data: DataSourceRow): void;
-    getAtIndex(index: number): DataSourceRow | undefined;
-    isWithinRange(index: number): boolean;
-    setRange({ from, to }: VuuRange): void;
-    getSelectedRows(): DataSourceRow[];
-}

package/types/useDataTable.d.ts

@@ -1,63 +0,0 @@
-import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
-import { GridConfig, KeyedColumnDescriptor, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
-import { VuuSortType } from "@vuu-ui/vuu-protocol-types";
-import { MouseEvent } from "react";
-import { TableColumnResizeHandler, tableLayoutType } from "./dataTableTypes";
-import { MeasuredProps } from "./useMeasuredContainer";
-export interface DataTableHookProps extends MeasuredProps {
-    config: Omit<GridConfig, "headings">;
-    dataSource: DataSource;
-    headerHeight: number;
-    onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
-    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
-    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
-    renderBufferSize?: number;
-    rowHeight: number;
-    onSelectionChange?: SelectionChangeHandler;
-    selectionModel: TableSelectionModel;
-    tableLayout: tableLayoutType;
-}
-export declare const useDataTable: ({ config, dataSource, headerHeight, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, renderBufferSize, rowHeight, selectionModel, tableLayout, ...measuredProps }: DataTableHookProps) => {
-    draggable: JSX.Element | undefined;
-    draggedItemIndex: number | undefined;
-    tableLayout: "row" | "column";
-    onHeaderCellDragStart: ((evt: MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
-    containerMeasurements: import("./useMeasuredContainer").MeasuredContainerHookResult;
-    containerProps: {
-        onClick: (evt: MouseEvent<Element, globalThis.MouseEvent>) => void;
-        onFocus: () => void;
-        onKeyDown: (e: import("react").KeyboardEvent<Element>) => void;
-    };
-    columns: KeyedColumnDescriptor[];
-    data: DataSourceRow[];
-    dispatchColumnAction: import("react").Dispatch<import("./useTableModel").GridModelAction>;
-    handleContextMenuAction: import("@vuu-ui/vuu-popups").MenuActionHandler;
-    headings: import("@vuu-ui/vuu-datagrid-types").TableHeadings;
-    onColumnResize: TableColumnResizeHandler;
-    onContextMenu: (evt: MouseEvent<HTMLElement>) => void;
-    onRemoveColumnFromGroupBy: (column: KeyedColumnDescriptor) => void;
-    onRowClick: import("./dataTableTypes").RowClickHandler;
-    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>;
-    };
-    rowCount: number;
-    viewportMeasurements: {
-        fillerHeight: number;
-        maxScrollContainerScrollHorizontal: number;
-        maxScrollContainerScrollVertical: number;
-        pinnedWidthLeft: number;
-        pinnedWidthRight: number;
-        rowCount: number;
-        scrollContentHeight: number;
-        scrollbarSize: number;
-        scrollContentWidth: number;
-        totalHeaderHeight: number;
-    };
-};

package/types/useDraggableColumn.d.ts

@@ -1,12 +0,0 @@
-import { MouseEvent, RefObject } from "react";
-export interface DraggableColumnHookProps {
-    onDrop: (fromIndex: number, toIndex: number) => void;
-    tableContainerRef: RefObject<HTMLDivElement>;
-    tableLayout: "column" | "row";
-}
-export declare const useDraggableColumn: ({ onDrop, tableContainerRef, tableLayout: tableLayoutProp, }: DraggableColumnHookProps) => {
-    draggable: JSX.Element | undefined;
-    draggedItemIndex: number | undefined;
-    tableLayout: "row" | "column";
-    onHeaderCellDragStart: ((evt: MouseEvent) => void) | undefined;
-};

package/types/useKeyboardNavigation.d.ts

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