@vuu-ui/vuu-datatable 0.9.0 → 0.9.2

package/cjs/filter-table/FilterTable.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var filterTableCss = ".vuuFilterTable {\n  /* --vuuFilterBar-flex: 0 0 33px;\n  --vuuMeasuredContainer-flex: 1 1 auto;\n  --vuuMeasuredContainer-height: auto;\n  display: flex;\n  flex-direction: column; */\n\n  .vuuFilterBar {\n    flex: 0 0 auto;\n  }\n}\n";
+var filterTableCss = ".vuuFilterTable {\n  --vuuMeasuredContainer-flex: 1 1 auto;\n  --vuuMeasuredContainer-height: auto;\n  display: flex;\n  flex-direction: column;\n\n  .vuuFilterBar {\n    flex: 0 0 auto;\n  }\n}\n";
 
 module.exports = filterTableCss;
 //# sourceMappingURL=FilterTable.css.js.map

package/cjs/filter-table/FilterTable.js

@@ -10,12 +10,6 @@ var useFilterTable = require('./useFilterTable.js');
 var FilterTable$1 = require('./FilterTable.css.js');
 
 const classBase = "vuuFilterTable";
-const style = {
-  "--vuuMeasuredContainer-flex": "1 1 auto",
-  "--vuuMeasuredContainer-height": "auto",
-  display: "flex",
-  flexDirection: "column"
-};
 const FilterTable = ({
   FilterBarProps: FilterBarProps2,
   TableProps: TableProps2,
@@ -28,6 +22,7 @@ const FilterTable = ({
     css: FilterTable$1,
     window: targetWindow
   });
+  console.log({ TableProps: TableProps2 });
   const { filterBarProps } = useFilterTable.useFilterTable({
     TableProps: TableProps2,
     FilterBarProps: FilterBarProps2
@@ -37,10 +32,10 @@ const FilterTable = ({
     {
       ...htmlAttributes,
       className: cx(classBase),
-      style: { ...styleProps, ...style },
+      style: { ...styleProps },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(vuuFilters.FilterBar, { ...filterBarProps, style: { flex: "0 0 33px" } }),
-        /* @__PURE__ */ jsxRuntime.jsx(vuuTable.Table, { ...TableProps2 })
+        /* @__PURE__ */ jsxRuntime.jsx(vuuFilters.FilterBar, { ...filterBarProps }),
+        /* @__PURE__ */ jsxRuntime.jsx(vuuTable.Table, { ...TableProps2, height: "auto", width: "auto" })
       ]
     }
   );

package/cjs/filter-table/FilterTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterTable.js","sources":["../../src/filter-table/FilterTable.tsx"],"sourcesContent":["import { FilterBar, FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { Table, TableProps } from \"@vuu-ui/vuu-table\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { CSSProperties, HTMLAttributes } from \"react\";\nimport { useFilterTable } from \"./useFilterTable\";\n\nimport filterTableCss from \"./FilterTable.css\";\n\nconst classBase = \"vuuFilterTable\";\n\nexport interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {\n  FilterBarProps?: Partial<FilterBarProps>;\n  TableProps: TableProps;\n}\n\n// Using inline styles here as Salt style injection happens too late for the\n// measurements that we have to take on first render\nconst style = {\n  \"--vuuMeasuredContainer-flex\": \"1 1 auto\",\n  \"--vuuMeasuredContainer-height\": \"auto\",\n  display: \"flex\",\n  flexDirection: \"column\",\n} as CSSProperties;\n\nexport const FilterTable = ({\n  FilterBarProps,\n  TableProps,\n  style: styleProps,\n  ...htmlAttributes\n}: FilterTableProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-table\",\n    css: filterTableCss,\n    window: targetWindow,\n  });\n\n  const { filterBarProps } = useFilterTable({\n    TableProps,\n    FilterBarProps,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase)}\n      style={{ ...styleProps, ...style }}\n    >\n      <FilterBar {...filterBarProps} style={{ flex: \"0 0 33px\" }} />\n      <Table {...TableProps} />\n    </div>\n  );\n};\n"],"names":["FilterBarProps","TableProps","useWindow","useComponentCssInjection","filterTableCss","useFilterTable","jsxs","jsx","FilterBar","Table"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,gBAAA,CAAA;AASlB,MAAM,KAAQ,GAAA;AAAA,EACZ,6BAA+B,EAAA,UAAA;AAAA,EAC/B,+BAAiC,EAAA,MAAA;AAAA,EACjC,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AACjB,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,cAAAA,EAAAA,eAAAA;AAAA,EACA,UAAAC,EAAAA,WAAAA;AAAA,EACA,KAAO,EAAA,UAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,cAAe,EAAA,GAAIC,6BAAe,CAAA;AAAA,IACxC,UAAAJ,EAAAA,WAAAA;AAAA,IACA,cAAAD,EAAAA,eAAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAAM,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,MACvB,KAAO,EAAA,EAAE,GAAG,UAAA,EAAY,GAAG,KAAM,EAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,wBAAW,GAAG,cAAA,EAAgB,OAAO,EAAE,IAAA,EAAM,YAAc,EAAA,CAAA;AAAA,wBAC5DD,cAAA,CAACE,cAAO,EAAA,EAAA,GAAGR,WAAY,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACzB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FilterTable.js","sources":["../../src/filter-table/FilterTable.tsx"],"sourcesContent":["import { FilterBar, FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { Table, TableProps } from \"@vuu-ui/vuu-table\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { useFilterTable } from \"./useFilterTable\";\n\nimport filterTableCss from \"./FilterTable.css\";\n\nconst classBase = \"vuuFilterTable\";\n\nexport interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {\n  FilterBarProps?: Partial<FilterBarProps>;\n  TableProps: Omit<TableProps, \"height\" | \"width\">;\n}\n\nexport const FilterTable = ({\n  FilterBarProps,\n  TableProps,\n  style: styleProps,\n  ...htmlAttributes\n}: FilterTableProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-table\",\n    css: filterTableCss,\n    window: targetWindow,\n  });\n\n  console.log({ TableProps });\n\n  const { filterBarProps } = useFilterTable({\n    TableProps,\n    FilterBarProps,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase)}\n      style={{ ...styleProps }}\n    >\n      <FilterBar {...filterBarProps} />\n      <Table {...TableProps} height=\"auto\" width=\"auto\" />\n    </div>\n  );\n};\n"],"names":["FilterBarProps","TableProps","useWindow","useComponentCssInjection","filterTableCss","useFilterTable","jsxs","jsx","FilterBar","Table"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAOX,MAAM,cAAc,CAAC;AAAA,EAC1B,cAAAA,EAAAA,eAAAA;AAAA,EACA,UAAAC,EAAAA,WAAAA;AAAA,EACA,KAAO,EAAA,UAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,UAAAH,EAAAA,WAAAA,EAAY,CAAA,CAAA;AAE1B,EAAM,MAAA,EAAE,cAAe,EAAA,GAAII,6BAAe,CAAA;AAAA,IACxC,UAAAJ,EAAAA,WAAAA;AAAA,IACA,cAAAD,EAAAA,eAAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAAM,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,MACvB,KAAA,EAAO,EAAE,GAAG,UAAW,EAAA;AAAA,MAEvB,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,oBAAA,EAAA,EAAW,GAAG,cAAgB,EAAA,CAAA;AAAA,uCAC9BC,cAAO,EAAA,EAAA,GAAGR,aAAY,MAAO,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACpD,CAAA;AAEJ;;;;"}

package/cjs/index.js

@@ -3,10 +3,12 @@
 var FilterTable = require('./filter-table/FilterTable.js');
 var usePersistFilterState = require('./filter-table/usePersistFilterState.js');
 var JsonTable = require('./json-table/JsonTable.js');
+var TreeTable = require('./tree-table/TreeTable.js');
 
 
 
 exports.FilterTable = FilterTable.FilterTable;
 exports.usePersistFilterState = usePersistFilterState.usePersistFilterState;
 exports.JsonTable = JsonTable.JsonTable;
+exports.TreeTable = TreeTable.TreeTable;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/cjs/json-table/JsonCell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var arrayCellCss = ".vuuJsonCell {\n  --group-cell-spacer-width: 20px;\n  align-items: center;\n  border-right-style: solid;\n  border-right-width: 1px;\n  cursor: pointer;\n  display: inline-flex;\n  height: var(--row-height);\n  padding-left: 20px;\n  line-height: 16px;\n  position: relative;\n\n  .vuuToggleIconButton {\n    position: absolute;\n  }\n}\n";
+
+module.exports = arrayCellCss;
+//# sourceMappingURL=JsonCell.css.js.map

package/cjs/json-table/JsonCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/json-table/JsonCell.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var JsonCell$1 = require('./JsonCell.css.js');
+
+const { IS_EXPANDED, IS_LEAF } = vuuUtils.metadataKeys;
+const JsonCell = ({ column, columnMap, row }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-array-cell",
+    css: JsonCell$1,
+    window: targetWindow
+  });
+  const { name } = column;
+  const dataIdx = columnMap[name];
+  let { [IS_EXPANDED]: isExpanded, [IS_LEAF]: isLeaf, [dataIdx]: value } = row;
+  const getDisplayValue = () => {
+    if (isLeaf) {
+      return value;
+    } else if (typeof value === "string" && value.endsWith("{")) {
+      value = value.slice(0, -1);
+      if (!isNaN(parseInt(value))) {
+        return `${value}: {...}`;
+      } else {
+        return `value {...}`;
+      }
+    } else if (typeof value === "string" && value.endsWith("[")) {
+      value = value.slice(0, -1);
+      return `${value} [...]`;
+    }
+  };
+  const displayValue = getDisplayValue();
+  const isEmpty = displayValue === "" || displayValue === void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isLeaf || isEmpty ? null : /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.ToggleIconButton, { isExpanded }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayValue })
+  ] });
+};
+
+exports.JsonCell = JsonCell;
+//# sourceMappingURL=JsonCell.js.map

package/cjs/json-table/JsonCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonCell.js","sources":["../../src/json-table/JsonCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { metadataKeys } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\n\n// Note the className is actually applied to containing cell\nimport arrayCellCss from \"./JsonCell.css\";\n\nconst { IS_EXPANDED, IS_LEAF } = metadataKeys;\n\nexport const JsonCell = ({ column, columnMap, row }: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-array-cell\",\n    css: arrayCellCss,\n    window: targetWindow,\n  });\n\n  const { name } = column;\n  const dataIdx = columnMap[name];\n  let { [IS_EXPANDED]: isExpanded, [IS_LEAF]: isLeaf, [dataIdx]: value } = row;\n\n  const getDisplayValue = () => {\n    if (isLeaf) {\n      return value;\n    } else if (typeof value === \"string\" && value.endsWith(\"{\")) {\n      value = value.slice(0, -1);\n      if (!isNaN(parseInt(value))) {\n        return `${value}: {...}`;\n      } else {\n        return `value {...}`;\n      }\n    } else if (typeof value === \"string\" && value.endsWith(\"[\")) {\n      value = value.slice(0, -1);\n      return `${value} [...]`;\n    }\n  };\n\n  const displayValue = getDisplayValue();\n  const isEmpty = displayValue === \"\" || displayValue === undefined;\n\n  return (\n    <>\n      {isLeaf || isEmpty ? null : <ToggleIconButton isExpanded={isExpanded} />}\n      <span>{displayValue}</span>\n    </>\n  );\n};\n"],"names":["metadataKeys","useWindow","useComponentCssInjection","arrayCellCss","jsxs","Fragment","jsx","ToggleIconButton"],"mappings":";;;;;;;;;AASA,MAAM,EAAE,WAAa,EAAA,OAAA,EAAY,GAAAA,qBAAA,CAAA;AAE1B,MAAM,WAAW,CAAC,EAAE,MAAQ,EAAA,SAAA,EAAW,KAA0B,KAAA;AACtE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AACjB,EAAM,MAAA,OAAA,GAAU,UAAU,IAAI,CAAA,CAAA;AAC9B,EAAA,IAAI,EAAE,CAAC,WAAW,GAAG,UAAY,EAAA,CAAC,OAAO,GAAG,MAAQ,EAAA,CAAC,OAAO,GAAG,OAAU,GAAA,GAAA,CAAA;AAEzE,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,OAAA,KAAA,CAAA;AAAA,eACE,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA,CAAA;AACzB,MAAA,IAAI,CAAC,KAAA,CAAM,QAAS,CAAA,KAAK,CAAC,CAAG,EAAA;AAC3B,QAAA,OAAO,GAAG,KAAK,CAAA,OAAA,CAAA,CAAA;AAAA,OACV,MAAA;AACL,QAAO,OAAA,CAAA,WAAA,CAAA,CAAA;AAAA,OACT;AAAA,eACS,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA,CAAA;AACzB,MAAA,OAAO,GAAG,KAAK,CAAA,MAAA,CAAA,CAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,eAAe,eAAgB,EAAA,CAAA;AACrC,EAAM,MAAA,OAAA,GAAU,YAAiB,KAAA,EAAA,IAAM,YAAiB,KAAA,KAAA,CAAA,CAAA;AAExD,EAAA,uBAEKC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA,IAAU,OAAU,GAAA,IAAA,mBAAQC,cAAA,CAAAC,8BAAA,EAAA,EAAiB,UAAwB,EAAA,CAAA;AAAA,oBACtED,cAAA,CAAC,UAAM,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,GACtB,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/json-table/JsonTable.js

@@ -1,13 +1,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
 var vuuTable = require('@vuu-ui/vuu-table');
 var vuuDataLocal = require('@vuu-ui/vuu-data-local');
 var react = require('react');
+var JsonCell = require('./JsonCell.js');
 
+vuuUtils.registerComponent("json", JsonCell.JsonCell, "cell-renderer");
 const JsonTable = ({
   config,
-  source: sourceProp = { "": "" },
+  source: sourceProp,
   ...tableProps
 }) => {
   const sourceRef = react.useRef(sourceProp);
@@ -20,7 +23,9 @@ const JsonTable = ({
   const tableConfig = react.useMemo(() => {
     return {
       ...config,
-      columns: dataSourceRef.current?.columnDescriptors ?? []
+      columns: dataSourceRef.current?.columnDescriptors ?? [],
+      columnSeparators: true,
+      rowSeparators: true
     };
   }, [config]);
   react.useEffect(() => {
@@ -36,7 +41,9 @@ const JsonTable = ({
     {
       ...tableProps,
       config: tableConfig,
-      dataSource: dataSourceRef.current
+      dataSource: dataSourceRef.current,
+      showColumnHeaderMenus: false,
+      selectionModel: "none"
     }
   );
 };

package/cjs/json-table/JsonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonTable.js","sources":["../../src/json-table/JsonTable.tsx"],"sourcesContent":["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-local\";\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"],"names":["useRef","useMemo","JsonDataSource","useEffect","jsx","Table"],"mappings":";;;;;;;AAgBO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA,GAAa,EAAE,EAAA,EAAI,EAAG,EAAA;AAAA,EAC9B,GAAG,UAAA;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAYA,aAAO,UAAU,CAAA,CAAA;AACnC,EAAA,MAAM,gBAAgBA,YAAuB,EAAA,CAAA;AAC7C,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAc,aAAA,CAAA,OAAA,GAAU,IAAIC,2BAAe,CAAA;AAAA,MACzC,MAAM,SAAU,CAAA,OAAA;AAAA,KACjB,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAcD,cAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,KACxD,CAAA;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,aAAA,CAAc,QAAQ,IAAO,GAAA,UAAA,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,KAAA;AAAA,GAC5B,CAAA;AAEJ;;;;"}
+{"version":3,"file":"JsonTable.js","sources":["../../src/json-table/JsonTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { JsonData, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { JsonDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { JsonCell } from \"./JsonCell\";\n\nregisterComponent(\"json\", JsonCell, \"cell-renderer\");\n\nexport interface JsonTableProps\n  extends Omit<TableProps, \"config\" | \"dataSource\"> {\n  config?: Pick<\n    TableConfig,\n    \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n  >;\n  source: JsonData;\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      columnSeparators: true,\n      rowSeparators: true,\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      showColumnHeaderMenus={false}\n      selectionModel=\"none\"\n    />\n  );\n};\n"],"names":["registerComponent","JsonCell","useRef","useMemo","JsonDataSource","useEffect","jsx","Table"],"mappings":";;;;;;;;;AAQAA,0BAAkB,CAAA,MAAA,EAAQC,mBAAU,eAAe,CAAA,CAAA;AAW5C,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,GAAG,UAAA;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAYC,aAAO,UAAU,CAAA,CAAA;AACnC,EAAA,MAAM,gBAAgBA,YAAuB,EAAA,CAAA;AAC7C,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAc,aAAA,CAAA,OAAA,GAAU,IAAIC,2BAAe,CAAA;AAAA,MACzC,MAAM,SAAU,CAAA,OAAA;AAAA,KACjB,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAcD,cAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,MACtD,gBAAkB,EAAA,IAAA;AAAA,MAClB,aAAe,EAAA,IAAA;AAAA,KACjB,CAAA;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,aAAA,CAAc,QAAQ,IAAO,GAAA,UAAA,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,MAC1B,qBAAuB,EAAA,KAAA;AAAA,MACvB,cAAe,EAAA,MAAA;AAAA,KAAA;AAAA,GACjB,CAAA;AAEJ;;;;"}

package/cjs/tree-table/TreeTable.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuTable = require('@vuu-ui/vuu-table');
+var vuuDataLocal = require('@vuu-ui/vuu-data-local');
+var react = require('react');
+
+const TreeTable = ({
+  config,
+  source: sourceProp,
+  ...tableProps
+}) => {
+  const sourceRef = react.useRef(sourceProp);
+  const dataSourceRef = react.useRef();
+  react.useMemo(() => {
+    dataSourceRef.current = new vuuDataLocal.TreeDataSource({
+      data: sourceRef.current
+    });
+  }, []);
+  const tableConfig = react.useMemo(() => {
+    return {
+      ...config,
+      columns: dataSourceRef.current?.columnDescriptors ?? [],
+      columnSeparators: false,
+      rowSeparators: false
+    };
+  }, [config]);
+  react.useEffect(() => {
+    if (dataSourceRef.current) {
+      dataSourceRef.current.data = sourceProp;
+    }
+  }, [sourceProp]);
+  if (dataSourceRef.current === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vuuTable.Table,
+    {
+      ...tableProps,
+      config: tableConfig,
+      dataSource: dataSourceRef.current,
+      groupToggleTarget: "toggle-icon",
+      navigationStyle: "tree",
+      showColumnHeaderMenus: false,
+      selectionModel: "single",
+      selectionBookendWidth: 0
+    }
+  );
+};
+
+exports.TreeTable = TreeTable;
+//# sourceMappingURL=TreeTable.js.map

package/cjs/tree-table/TreeTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeTable.js","sources":["../../src/tree-table/TreeTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { TreeDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { TreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\nexport interface TreeTableProps\n  extends Omit<TableProps, \"config\" | \"dataSource\"> {\n  config?: Pick<\n    TableConfig,\n    \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n  >;\n  source: TreeSourceNode[];\n}\n\nexport const TreeTable = ({\n  config,\n  source: sourceProp,\n  ...tableProps\n}: TreeTableProps) => {\n  const sourceRef = useRef(sourceProp);\n  const dataSourceRef = useRef<TreeDataSource>();\n  useMemo(() => {\n    dataSourceRef.current = new TreeDataSource({\n      data: sourceRef.current,\n    });\n  }, []);\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    return {\n      ...config,\n      columns: dataSourceRef.current?.columnDescriptors ?? [],\n      columnSeparators: false,\n      rowSeparators: false,\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      groupToggleTarget=\"toggle-icon\"\n      navigationStyle=\"tree\"\n      showColumnHeaderMenus={false}\n      selectionModel=\"single\"\n      selectionBookendWidth={0}\n    />\n  );\n};\n"],"names":["useRef","useMemo","TreeDataSource","useEffect","jsx","Table"],"mappings":";;;;;;;AAgBO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,GAAG,UAAA;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAYA,aAAO,UAAU,CAAA,CAAA;AACnC,EAAA,MAAM,gBAAgBA,YAAuB,EAAA,CAAA;AAC7C,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAc,aAAA,CAAA,OAAA,GAAU,IAAIC,2BAAe,CAAA;AAAA,MACzC,MAAM,SAAU,CAAA,OAAA;AAAA,KACjB,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAcD,cAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,MACtD,gBAAkB,EAAA,KAAA;AAAA,MAClB,aAAe,EAAA,KAAA;AAAA,KACjB,CAAA;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,aAAA,CAAc,QAAQ,IAAO,GAAA,UAAA,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,MAC1B,iBAAkB,EAAA,aAAA;AAAA,MAClB,eAAgB,EAAA,MAAA;AAAA,MAChB,qBAAuB,EAAA,KAAA;AAAA,MACvB,cAAe,EAAA,QAAA;AAAA,MACf,qBAAuB,EAAA,CAAA;AAAA,KAAA;AAAA,GACzB,CAAA;AAEJ;;;;"}

package/esm/filter-table/FilterTable.css.js

@@ -1,4 +1,4 @@
-var filterTableCss = ".vuuFilterTable {\n  /* --vuuFilterBar-flex: 0 0 33px;\n  --vuuMeasuredContainer-flex: 1 1 auto;\n  --vuuMeasuredContainer-height: auto;\n  display: flex;\n  flex-direction: column; */\n\n  .vuuFilterBar {\n    flex: 0 0 auto;\n  }\n}\n";
+var filterTableCss = ".vuuFilterTable {\n  --vuuMeasuredContainer-flex: 1 1 auto;\n  --vuuMeasuredContainer-height: auto;\n  display: flex;\n  flex-direction: column;\n\n  .vuuFilterBar {\n    flex: 0 0 auto;\n  }\n}\n";
 
 export { filterTableCss as default };
 //# sourceMappingURL=FilterTable.css.js.map

package/esm/filter-table/FilterTable.js

@@ -8,12 +8,6 @@ import { useFilterTable } from './useFilterTable.js';
 import filterTableCss from './FilterTable.css.js';
 
 const classBase = "vuuFilterTable";
-const style = {
-  "--vuuMeasuredContainer-flex": "1 1 auto",
-  "--vuuMeasuredContainer-height": "auto",
-  display: "flex",
-  flexDirection: "column"
-};
 const FilterTable = ({
   FilterBarProps: FilterBarProps2,
   TableProps: TableProps2,
@@ -26,6 +20,7 @@ const FilterTable = ({
     css: filterTableCss,
     window: targetWindow
   });
+  console.log({ TableProps: TableProps2 });
   const { filterBarProps } = useFilterTable({
     TableProps: TableProps2,
     FilterBarProps: FilterBarProps2
@@ -35,10 +30,10 @@ const FilterTable = ({
     {
       ...htmlAttributes,
       className: cx(classBase),
-      style: { ...styleProps, ...style },
+      style: { ...styleProps },
       children: [
-        /* @__PURE__ */ jsx(FilterBar, { ...filterBarProps, style: { flex: "0 0 33px" } }),
-        /* @__PURE__ */ jsx(Table, { ...TableProps2 })
+        /* @__PURE__ */ jsx(FilterBar, { ...filterBarProps }),
+        /* @__PURE__ */ jsx(Table, { ...TableProps2, height: "auto", width: "auto" })
       ]
     }
   );

package/esm/filter-table/FilterTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterTable.js","sources":["../../src/filter-table/FilterTable.tsx"],"sourcesContent":["import { FilterBar, FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { Table, TableProps } from \"@vuu-ui/vuu-table\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { CSSProperties, HTMLAttributes } from \"react\";\nimport { useFilterTable } from \"./useFilterTable\";\n\nimport filterTableCss from \"./FilterTable.css\";\n\nconst classBase = \"vuuFilterTable\";\n\nexport interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {\n  FilterBarProps?: Partial<FilterBarProps>;\n  TableProps: TableProps;\n}\n\n// Using inline styles here as Salt style injection happens too late for the\n// measurements that we have to take on first render\nconst style = {\n  \"--vuuMeasuredContainer-flex\": \"1 1 auto\",\n  \"--vuuMeasuredContainer-height\": \"auto\",\n  display: \"flex\",\n  flexDirection: \"column\",\n} as CSSProperties;\n\nexport const FilterTable = ({\n  FilterBarProps,\n  TableProps,\n  style: styleProps,\n  ...htmlAttributes\n}: FilterTableProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-table\",\n    css: filterTableCss,\n    window: targetWindow,\n  });\n\n  const { filterBarProps } = useFilterTable({\n    TableProps,\n    FilterBarProps,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase)}\n      style={{ ...styleProps, ...style }}\n    >\n      <FilterBar {...filterBarProps} style={{ flex: \"0 0 33px\" }} />\n      <Table {...TableProps} />\n    </div>\n  );\n};\n"],"names":["FilterBarProps","TableProps"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,gBAAA,CAAA;AASlB,MAAM,KAAQ,GAAA;AAAA,EACZ,6BAA+B,EAAA,UAAA;AAAA,EAC/B,+BAAiC,EAAA,MAAA;AAAA,EACjC,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA,QAAA;AACjB,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,cAAAA,EAAAA,eAAAA;AAAA,EACA,UAAAC,EAAAA,WAAAA;AAAA,EACA,KAAO,EAAA,UAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,cAAe,EAAA,GAAI,cAAe,CAAA;AAAA,IACxC,UAAAA,EAAAA,WAAAA;AAAA,IACA,cAAAD,EAAAA,eAAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,MACvB,KAAO,EAAA,EAAE,GAAG,UAAA,EAAY,GAAG,KAAM,EAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,aAAW,GAAG,cAAA,EAAgB,OAAO,EAAE,IAAA,EAAM,YAAc,EAAA,CAAA;AAAA,wBAC5D,GAAA,CAAC,KAAO,EAAA,EAAA,GAAGC,WAAY,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACzB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FilterTable.js","sources":["../../src/filter-table/FilterTable.tsx"],"sourcesContent":["import { FilterBar, FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { Table, TableProps } from \"@vuu-ui/vuu-table\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { useFilterTable } from \"./useFilterTable\";\n\nimport filterTableCss from \"./FilterTable.css\";\n\nconst classBase = \"vuuFilterTable\";\n\nexport interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {\n  FilterBarProps?: Partial<FilterBarProps>;\n  TableProps: Omit<TableProps, \"height\" | \"width\">;\n}\n\nexport const FilterTable = ({\n  FilterBarProps,\n  TableProps,\n  style: styleProps,\n  ...htmlAttributes\n}: FilterTableProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-table\",\n    css: filterTableCss,\n    window: targetWindow,\n  });\n\n  console.log({ TableProps });\n\n  const { filterBarProps } = useFilterTable({\n    TableProps,\n    FilterBarProps,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase)}\n      style={{ ...styleProps }}\n    >\n      <FilterBar {...filterBarProps} />\n      <Table {...TableProps} height=\"auto\" width=\"auto\" />\n    </div>\n  );\n};\n"],"names":["FilterBarProps","TableProps"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAOX,MAAM,cAAc,CAAC;AAAA,EAC1B,cAAAA,EAAAA,eAAAA;AAAA,EACA,UAAAC,EAAAA,WAAAA;AAAA,EACA,KAAO,EAAA,UAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,UAAAA,EAAAA,WAAAA,EAAY,CAAA,CAAA;AAE1B,EAAM,MAAA,EAAE,cAAe,EAAA,GAAI,cAAe,CAAA;AAAA,IACxC,UAAAA,EAAAA,WAAAA;AAAA,IACA,cAAAD,EAAAA,eAAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,MACvB,KAAA,EAAO,EAAE,GAAG,UAAW,EAAA;AAAA,MAEvB,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,SAAA,EAAA,EAAW,GAAG,cAAgB,EAAA,CAAA;AAAA,4BAC9B,KAAO,EAAA,EAAA,GAAGC,aAAY,MAAO,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACpD,CAAA;AAEJ;;;;"}

package/esm/index.js

@@ -1,4 +1,5 @@
 export { FilterTable } from './filter-table/FilterTable.js';
 export { usePersistFilterState } from './filter-table/usePersistFilterState.js';
 export { JsonTable } from './json-table/JsonTable.js';
+export { TreeTable } from './tree-table/TreeTable.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/esm/json-table/JsonCell.css.js

@@ -0,0 +1,4 @@
+var arrayCellCss = ".vuuJsonCell {\n  --group-cell-spacer-width: 20px;\n  align-items: center;\n  border-right-style: solid;\n  border-right-width: 1px;\n  cursor: pointer;\n  display: inline-flex;\n  height: var(--row-height);\n  padding-left: 20px;\n  line-height: 16px;\n  position: relative;\n\n  .vuuToggleIconButton {\n    position: absolute;\n  }\n}\n";
+
+export { arrayCellCss as default };
+//# sourceMappingURL=JsonCell.css.js.map

package/esm/json-table/JsonCell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/json-table/JsonCell.js

@@ -0,0 +1,43 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { metadataKeys } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { ToggleIconButton } from '@vuu-ui/vuu-ui-controls';
+import arrayCellCss from './JsonCell.css.js';
+
+const { IS_EXPANDED, IS_LEAF } = metadataKeys;
+const JsonCell = ({ column, columnMap, row }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-array-cell",
+    css: arrayCellCss,
+    window: targetWindow
+  });
+  const { name } = column;
+  const dataIdx = columnMap[name];
+  let { [IS_EXPANDED]: isExpanded, [IS_LEAF]: isLeaf, [dataIdx]: value } = row;
+  const getDisplayValue = () => {
+    if (isLeaf) {
+      return value;
+    } else if (typeof value === "string" && value.endsWith("{")) {
+      value = value.slice(0, -1);
+      if (!isNaN(parseInt(value))) {
+        return `${value}: {...}`;
+      } else {
+        return `value {...}`;
+      }
+    } else if (typeof value === "string" && value.endsWith("[")) {
+      value = value.slice(0, -1);
+      return `${value} [...]`;
+    }
+  };
+  const displayValue = getDisplayValue();
+  const isEmpty = displayValue === "" || displayValue === void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLeaf || isEmpty ? null : /* @__PURE__ */ jsx(ToggleIconButton, { isExpanded }),
+    /* @__PURE__ */ jsx("span", { children: displayValue })
+  ] });
+};
+
+export { JsonCell };
+//# sourceMappingURL=JsonCell.js.map

package/esm/json-table/JsonCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonCell.js","sources":["../../src/json-table/JsonCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { metadataKeys } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\n\n// Note the className is actually applied to containing cell\nimport arrayCellCss from \"./JsonCell.css\";\n\nconst { IS_EXPANDED, IS_LEAF } = metadataKeys;\n\nexport const JsonCell = ({ column, columnMap, row }: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-array-cell\",\n    css: arrayCellCss,\n    window: targetWindow,\n  });\n\n  const { name } = column;\n  const dataIdx = columnMap[name];\n  let { [IS_EXPANDED]: isExpanded, [IS_LEAF]: isLeaf, [dataIdx]: value } = row;\n\n  const getDisplayValue = () => {\n    if (isLeaf) {\n      return value;\n    } else if (typeof value === \"string\" && value.endsWith(\"{\")) {\n      value = value.slice(0, -1);\n      if (!isNaN(parseInt(value))) {\n        return `${value}: {...}`;\n      } else {\n        return `value {...}`;\n      }\n    } else if (typeof value === \"string\" && value.endsWith(\"[\")) {\n      value = value.slice(0, -1);\n      return `${value} [...]`;\n    }\n  };\n\n  const displayValue = getDisplayValue();\n  const isEmpty = displayValue === \"\" || displayValue === undefined;\n\n  return (\n    <>\n      {isLeaf || isEmpty ? null : <ToggleIconButton isExpanded={isExpanded} />}\n      <span>{displayValue}</span>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,EAAE,WAAa,EAAA,OAAA,EAAY,GAAA,YAAA,CAAA;AAE1B,MAAM,WAAW,CAAC,EAAE,MAAQ,EAAA,SAAA,EAAW,KAA0B,KAAA;AACtE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AACjB,EAAM,MAAA,OAAA,GAAU,UAAU,IAAI,CAAA,CAAA;AAC9B,EAAA,IAAI,EAAE,CAAC,WAAW,GAAG,UAAY,EAAA,CAAC,OAAO,GAAG,MAAQ,EAAA,CAAC,OAAO,GAAG,OAAU,GAAA,GAAA,CAAA;AAEzE,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,OAAA,KAAA,CAAA;AAAA,eACE,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA,CAAA;AACzB,MAAA,IAAI,CAAC,KAAA,CAAM,QAAS,CAAA,KAAK,CAAC,CAAG,EAAA;AAC3B,QAAA,OAAO,GAAG,KAAK,CAAA,OAAA,CAAA,CAAA;AAAA,OACV,MAAA;AACL,QAAO,OAAA,CAAA,WAAA,CAAA,CAAA;AAAA,OACT;AAAA,eACS,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA,CAAA;AACzB,MAAA,OAAO,GAAG,KAAK,CAAA,MAAA,CAAA,CAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,eAAe,eAAgB,EAAA,CAAA;AACrC,EAAM,MAAA,OAAA,GAAU,YAAiB,KAAA,EAAA,IAAM,YAAiB,KAAA,KAAA,CAAA,CAAA;AAExD,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA,IAAU,OAAU,GAAA,IAAA,mBAAQ,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAwB,EAAA,CAAA;AAAA,oBACtE,GAAA,CAAC,UAAM,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,GACtB,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/json-table/JsonTable.js

@@ -1,11 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
+import { registerComponent } from '@vuu-ui/vuu-utils';
 import { Table } from '@vuu-ui/vuu-table';
 import { JsonDataSource } from '@vuu-ui/vuu-data-local';
 import { useRef, useMemo, useEffect } from 'react';
+import { JsonCell } from './JsonCell.js';
 
+registerComponent("json", JsonCell, "cell-renderer");
 const JsonTable = ({
   config,
-  source: sourceProp = { "": "" },
+  source: sourceProp,
   ...tableProps
 }) => {
   const sourceRef = useRef(sourceProp);
@@ -18,7 +21,9 @@ const JsonTable = ({
   const tableConfig = useMemo(() => {
     return {
       ...config,
-      columns: dataSourceRef.current?.columnDescriptors ?? []
+      columns: dataSourceRef.current?.columnDescriptors ?? [],
+      columnSeparators: true,
+      rowSeparators: true
     };
   }, [config]);
   useEffect(() => {
@@ -34,7 +39,9 @@ const JsonTable = ({
     {
       ...tableProps,
       config: tableConfig,
-      dataSource: dataSourceRef.current
+      dataSource: dataSourceRef.current,
+      showColumnHeaderMenus: false,
+      selectionModel: "none"
     }
   );
 };

package/esm/json-table/JsonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonTable.js","sources":["../../src/json-table/JsonTable.tsx"],"sourcesContent":["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-local\";\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"],"names":[],"mappings":";;;;;AAgBO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA,GAAa,EAAE,EAAA,EAAI,EAAG,EAAA;AAAA,EAC9B,GAAG,UAAA;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,EAAA,MAAM,gBAAgB,MAAuB,EAAA,CAAA;AAC7C,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAc,aAAA,CAAA,OAAA,GAAU,IAAI,cAAe,CAAA;AAAA,MACzC,MAAM,SAAU,CAAA,OAAA;AAAA,KACjB,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,QAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,KACxD,CAAA;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,aAAA,CAAc,QAAQ,IAAO,GAAA,UAAA,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,KAAA;AAAA,GAC5B,CAAA;AAEJ;;;;"}
+{"version":3,"file":"JsonTable.js","sources":["../../src/json-table/JsonTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { JsonData, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { JsonDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { JsonCell } from \"./JsonCell\";\n\nregisterComponent(\"json\", JsonCell, \"cell-renderer\");\n\nexport interface JsonTableProps\n  extends Omit<TableProps, \"config\" | \"dataSource\"> {\n  config?: Pick<\n    TableConfig,\n    \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n  >;\n  source: JsonData;\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      columnSeparators: true,\n      rowSeparators: true,\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      showColumnHeaderMenus={false}\n      selectionModel=\"none\"\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAQA,iBAAkB,CAAA,MAAA,EAAQ,UAAU,eAAe,CAAA,CAAA;AAW5C,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,GAAG,UAAA;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,EAAA,MAAM,gBAAgB,MAAuB,EAAA,CAAA;AAC7C,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAc,aAAA,CAAA,OAAA,GAAU,IAAI,cAAe,CAAA;AAAA,MACzC,MAAM,SAAU,CAAA,OAAA;AAAA,KACjB,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,QAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,MACtD,gBAAkB,EAAA,IAAA;AAAA,MAClB,aAAe,EAAA,IAAA;AAAA,KACjB,CAAA;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,aAAA,CAAc,QAAQ,IAAO,GAAA,UAAA,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,MAC1B,qBAAuB,EAAA,KAAA;AAAA,MACvB,cAAe,EAAA,MAAA;AAAA,KAAA;AAAA,GACjB,CAAA;AAEJ;;;;"}

package/esm/tree-table/TreeTable.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { Table } from '@vuu-ui/vuu-table';
+import { TreeDataSource } from '@vuu-ui/vuu-data-local';
+import { useRef, useMemo, useEffect } from 'react';
+
+const TreeTable = ({
+  config,
+  source: sourceProp,
+  ...tableProps
+}) => {
+  const sourceRef = useRef(sourceProp);
+  const dataSourceRef = useRef();
+  useMemo(() => {
+    dataSourceRef.current = new TreeDataSource({
+      data: sourceRef.current
+    });
+  }, []);
+  const tableConfig = useMemo(() => {
+    return {
+      ...config,
+      columns: dataSourceRef.current?.columnDescriptors ?? [],
+      columnSeparators: false,
+      rowSeparators: false
+    };
+  }, [config]);
+  useEffect(() => {
+    if (dataSourceRef.current) {
+      dataSourceRef.current.data = sourceProp;
+    }
+  }, [sourceProp]);
+  if (dataSourceRef.current === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      ...tableProps,
+      config: tableConfig,
+      dataSource: dataSourceRef.current,
+      groupToggleTarget: "toggle-icon",
+      navigationStyle: "tree",
+      showColumnHeaderMenus: false,
+      selectionModel: "single",
+      selectionBookendWidth: 0
+    }
+  );
+};
+
+export { TreeTable };
+//# sourceMappingURL=TreeTable.js.map

package/esm/tree-table/TreeTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeTable.js","sources":["../../src/tree-table/TreeTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { TreeDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { TreeSourceNode } from \"@vuu-ui/vuu-utils\";\n\nexport interface TreeTableProps\n  extends Omit<TableProps, \"config\" | \"dataSource\"> {\n  config?: Pick<\n    TableConfig,\n    \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n  >;\n  source: TreeSourceNode[];\n}\n\nexport const TreeTable = ({\n  config,\n  source: sourceProp,\n  ...tableProps\n}: TreeTableProps) => {\n  const sourceRef = useRef(sourceProp);\n  const dataSourceRef = useRef<TreeDataSource>();\n  useMemo(() => {\n    dataSourceRef.current = new TreeDataSource({\n      data: sourceRef.current,\n    });\n  }, []);\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    return {\n      ...config,\n      columns: dataSourceRef.current?.columnDescriptors ?? [],\n      columnSeparators: false,\n      rowSeparators: false,\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      groupToggleTarget=\"toggle-icon\"\n      navigationStyle=\"tree\"\n      showColumnHeaderMenus={false}\n      selectionModel=\"single\"\n      selectionBookendWidth={0}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,GAAG,UAAA;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,EAAA,MAAM,gBAAgB,MAAuB,EAAA,CAAA;AAC7C,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAc,aAAA,CAAA,OAAA,GAAU,IAAI,cAAe,CAAA;AAAA,MACzC,MAAM,SAAU,CAAA,OAAA;AAAA,KACjB,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,QAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,MACtD,gBAAkB,EAAA,KAAA;AAAA,MAClB,aAAe,EAAA,KAAA;AAAA,KACjB,CAAA;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,aAAA,CAAc,QAAQ,IAAO,GAAA,UAAA,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,MAC1B,iBAAkB,EAAA,aAAA;AAAA,MAClB,eAAgB,EAAA,MAAA;AAAA,MAChB,qBAAuB,EAAA,KAAA;AAAA,MACvB,cAAe,EAAA,QAAA;AAAA,MACf,qBAAuB,EAAA,CAAA;AAAA,KAAA;AAAA,GACzB,CAAA;AAEJ;;;;"}

package/package.json

@@ -1,20 +1,20 @@
 {
-  "version": "0.9.0",
+  "version": "0.9.2",
   "author": "heswell",
   "license": "Apache-2.0",
   "dependencies": {
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-local": "0.9.0",
-    "@vuu-ui/vuu-table-types": "0.9.0",
-    "@vuu-ui/vuu-filters": "0.9.0",
-    "@vuu-ui/vuu-layout": "0.9.0",
-    "@vuu-ui/vuu-popups": "0.9.0",
-    "@vuu-ui/vuu-shell": "0.9.0",
-    "@vuu-ui/vuu-table": "0.9.0",
-    "@vuu-ui/vuu-table-extras": "0.9.0",
-    "@vuu-ui/vuu-ui-controls": "0.9.0",
-    "@vuu-ui/vuu-utils": "0.9.0"
+    "@vuu-ui/vuu-data-local": "0.9.2",
+    "@vuu-ui/vuu-table-types": "0.9.2",
+    "@vuu-ui/vuu-filters": "0.9.2",
+    "@vuu-ui/vuu-layout": "0.9.2",
+    "@vuu-ui/vuu-popups": "0.9.2",
+    "@vuu-ui/vuu-shell": "0.9.2",
+    "@vuu-ui/vuu-table": "0.9.2",
+    "@vuu-ui/vuu-table-extras": "0.9.2",
+    "@vuu-ui/vuu-ui-controls": "0.9.2",
+    "@vuu-ui/vuu-utils": "0.9.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

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

@@ -3,6 +3,6 @@ import { TableProps } from "@vuu-ui/vuu-table";
 import { HTMLAttributes } from "react";
 export interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {
     FilterBarProps?: Partial<FilterBarProps>;
-    TableProps: TableProps;
+    TableProps: Omit<TableProps, "height" | "width">;
 }
 export declare const FilterTable: ({ FilterBarProps, TableProps, style: styleProps, ...htmlAttributes }: FilterTableProps) => JSX.Element;

package/types/index.d.ts

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableCellProps } from "@vuu-ui/vuu-table-types";
+export declare const JsonCell: ({ column, columnMap, row }: TableCellProps) => JSX.Element;

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

@@ -4,6 +4,6 @@ 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;
+    source: JsonData;
 }
 export declare const JsonTable: ({ config, source: sourceProp, ...tableProps }: JsonTableProps) => JSX.Element | null;

package/types/tree-table/TreeTable.d.ts

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

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

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