@vuu-ui/vuu-table 0.7.0-debug → 0.7.1-debug

package/cjs/index.js

@@ -31,14 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Table: () => Table,
-  useMeasuredContainer: () => useMeasuredContainer
+  buildContextMenuDescriptors: () => buildContextMenuDescriptors,
+  useMeasuredContainer: () => useMeasuredContainer,
+  useTableContextMenu: () => useTableContextMenu,
+  useTableModel: () => useTableModel,
+  useTableViewport: () => useTableViewport
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/Table.tsx
-var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
-var import_core = require("@salt-ds/core");
-
 // src/context-menu/buildContextMenuDescriptors.ts
 var import_vuu_utils = require("@vuu-ui/vuu-utils");
 var buildContextMenuDescriptors = (dataSource) => (location, options) => {
@@ -254,7 +254,7 @@ function buildGroupMenuItems(options, { groupBy }) {
   return menuItems;
 }
 
-// src/context-menu/useContextMenu.ts
+// src/context-menu/useTableContextMenu.ts
 var import_vuu_filters = require("@vuu-ui/vuu-filters");
 var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
 var removeFilterColumn = (dataSourceFilter, column) => {
@@ -272,7 +272,7 @@ var removeFilterColumn = (dataSourceFilter, column) => {
   }
 };
 var { Average, Count, High, Low, Sum } = import_vuu_utils2.AggregationType;
-var useContextMenu = ({
+var useTableContextMenu = ({
   dataSource,
   onPersistentColumnOperation
 }) => {
@@ -327,6 +327,10 @@ var useContextMenu = ({
   return handleContextMenuAction;
 };
 
+// src/Table.tsx
+var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
+var import_core = require("@salt-ds/core");
+
 // src/RowBasedTable.tsx
 var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
 var import_react9 = require("react");
@@ -373,9 +377,12 @@ var TableCell = (0, import_react.memo)(
         setEditing(true);
       }
     };
-    const handleClick = (0, import_react.useCallback)(() => {
-      onClick == null ? void 0 : onClick(column);
-    }, [column, onClick]);
+    const handleClick = (0, import_react.useCallback)(
+      (evt) => {
+        onClick == null ? void 0 : onClick(evt, column);
+      },
+      [column, onClick]
+    );
     const handleEnterEditMode = () => {
       setEditing(true);
     };
@@ -461,9 +468,12 @@ var getGroupValueAndOffset = (columns, row) => {
 var TableGroupCell = ({ column, onClick, row }) => {
   const { columns } = column;
   const [value, offset] = getGroupValueAndOffset(columns, row);
-  const handleClick = (0, import_react2.useCallback)(() => {
-    onClick == null ? void 0 : onClick(column);
-  }, [column, onClick]);
+  const handleClick = (0, import_react2.useCallback)(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
   const style = (0, import_vuu_utils4.getColumnStyle)(column);
   const isLeaf = row[IS_LEAF];
   const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-spacer" }, i));
@@ -515,8 +525,9 @@ var TableRow = (0, import_react3.memo)(function Row({
     [onClick, row]
   );
   const handleGroupCellClick = (0, import_react3.useCallback)(
-    (column) => {
+    (evt, column) => {
       if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row)) {
+        evt.stopPropagation();
         onToggleGroup == null ? void 0 : onToggleGroup(row, column);
       }
     },
@@ -935,7 +946,7 @@ var RowBasedTable = ({
 
 // src/useTable.ts
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 var import_react20 = require("react");
 
 // src/useDataSource.ts
@@ -1449,6 +1460,7 @@ var useKeyboardNavigation = ({
 };
 
 // src/useMeasuredContainer.ts
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
 var import_react14 = require("react");
 
 // src/useResizeObserver.ts
@@ -1571,6 +1583,25 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
 // src/useMeasuredContainer.ts
 var ClientWidthHeight = ["clientHeight", "clientWidth"];
 var isNumber = (val) => Number.isFinite(val);
+var FULL_SIZE = { height: "100%", width: "100%" };
+var getInitialCssSize = (height, width) => {
+  if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width)) {
+    return {
+      height: `${height}px`,
+      width: `${width}px`
+    };
+  } else {
+    return FULL_SIZE;
+  }
+};
+var getInitialInnerSize = (height, width) => {
+  if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width)) {
+    return {
+      height,
+      width
+    };
+  }
+};
 var useMeasuredContainer = ({
   defaultHeight = 0,
   defaultWidth = 0,
@@ -1579,17 +1610,38 @@ var useMeasuredContainer = ({
 }) => {
   const containerRef = (0, import_react14.useRef)(null);
   const [size, setSize] = (0, import_react14.useState)({
+    css: getInitialCssSize(height, width),
+    inner: getInitialInnerSize(height, width),
     outer: {
       height: height != null ? height : "100%",
       width: width != null ? width : "100%"
     }
   });
+  (0, import_react14.useMemo)(() => {
+    setSize((currentSize) => {
+      const { inner, outer } = currentSize;
+      if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width) && inner && outer) {
+        const { height: innerHeight, width: innerWidth } = inner;
+        const { height: outerHeight, width: outerWidth } = outer;
+        if (outerHeight !== height || outerWidth !== width) {
+          const heightDiff = (0, import_vuu_utils9.isValidNumber)(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = (0, import_vuu_utils9.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
+          return {
+            ...currentSize,
+            outer: { height, width },
+            inner: { height: height - heightDiff, width: width - widthDiff }
+          };
+        }
+      }
+      return currentSize;
+    });
+  }, [height, width]);
   const onResize = (0, import_react14.useCallback)(
     ({ clientWidth, clientHeight }) => {
-      console.log(`Resize ${clientHeight}`);
       setSize((currentSize) => {
-        const { inner, outer } = currentSize;
+        const { css, inner, outer } = currentSize;
         return isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== (inner == null ? void 0 : inner.width) || clientHeight !== (inner == null ? void 0 : inner.height)) ? {
+          css,
           outer,
           inner: {
             width: Math.floor(clientWidth) || defaultWidth,
@@ -1603,15 +1655,16 @@ var useMeasuredContainer = ({
   useResizeObserver(containerRef, ClientWidthHeight, onResize, true);
   return {
     containerRef,
+    cssSize: size.css,
     outerSize: size.outer,
     innerSize: size.inner
   };
 };
 
 // src/useSelection.ts
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
 var import_react15 = require("react");
-var { IDX: IDX2, SELECTED: SELECTED3 } = import_vuu_utils9.metadataKeys;
+var { IDX: IDX2, SELECTED: SELECTED3 } = import_vuu_utils10.metadataKeys;
 var NO_SELECTION = [];
 var useSelection = ({
   selectionModel,
@@ -1625,7 +1678,7 @@ var useSelection = ({
       const { [IDX2]: idx, [SELECTED3]: isSelected } = row;
       const { current: active } = lastActiveRef;
       const { current: selected } = selectedRef;
-      const selectOperation = isSelected ? import_vuu_utils9.deselectItem : import_vuu_utils9.selectItem;
+      const selectOperation = isSelected ? import_vuu_utils10.deselectItem : import_vuu_utils10.selectItem;
       const newSelected = selectOperation(
         selectionModel,
         selected,
@@ -1647,16 +1700,16 @@ var useSelection = ({
 
 // src/useTableModel.ts
 var import_salt_lab3 = require("@heswell/salt-lab");
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
 var import_react16 = require("react");
-var { info } = (0, import_vuu_utils10.logger)("useTableModel");
+var { info } = (0, import_vuu_utils11.logger)("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = import_vuu_utils10.metadataKeys.count;
+var KEY_OFFSET = import_vuu_utils11.metadataKeys.count;
 var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
 var getCellRendererForColumn = (column) => {
   var _a;
-  if ((0, import_vuu_utils10.isTypeDescriptor)(column.type)) {
-    return (0, import_vuu_utils10.getCellRenderer)((_a = column.type) == null ? void 0 : _a.renderer);
+  if ((0, import_vuu_utils11.isTypeDescriptor)(column.type)) {
+    return (0, import_vuu_utils11.getCellRenderer)((_a = column.type) == null ? void 0 : _a.renderer);
   }
 };
 var getDataType = (column, columnNames, dataTypes) => {
@@ -1708,10 +1761,10 @@ function init({ dataSourceConfig, tableConfig }) {
   const columns = tableConfig.columns.map(
     toKeyedColumWithDefaults(tableConfig)
   );
-  const maybePinnedColumns = columns.some(import_vuu_utils10.isPinned) ? (0, import_vuu_utils10.sortPinnedColumns)(columns) : columns;
+  const maybePinnedColumns = columns.some(import_vuu_utils11.isPinned) ? (0, import_vuu_utils11.sortPinnedColumns)(columns) : columns;
   const state = {
     columns: maybePinnedColumns,
-    headings: (0, import_vuu_utils10.getTableHeadings)(maybePinnedColumns)
+    headings: (0, import_vuu_utils11.getTableHeadings)(maybePinnedColumns)
   };
   if (dataSourceConfig) {
     const { columns: columns2, ...rest } = dataSourceConfig;
@@ -1749,10 +1802,10 @@ var toKeyedColumWithDefaults = (options) => (column, index) => {
     key: key != null ? key : index + KEY_OFFSET,
     name,
     originalIdx: index,
-    valueFormatter: (0, import_vuu_utils10.getValueFormatter)(column),
+    valueFormatter: (0, import_vuu_utils11.getValueFormatter)(column),
     width
   };
-  if ((0, import_vuu_utils10.isGroupColumn)(keyedColumnWithDefaults)) {
+  if ((0, import_vuu_utils11.isGroupColumn)(keyedColumnWithDefaults)) {
     keyedColumnWithDefaults.columns = keyedColumnWithDefaults.columns.map(
       (col) => toKeyedColumWithDefaults(options)(col, col.key)
     );
@@ -1852,7 +1905,7 @@ function pinColumn2(state, action) {
   const targetColumn = columns.find((col) => col.name === column.name);
   if (targetColumn) {
     columns = replaceColumn(columns, { ...targetColumn, pin });
-    columns = (0, import_vuu_utils10.sortPinnedColumns)(columns);
+    columns = (0, import_vuu_utils11.sortPinnedColumns)(columns);
     return {
       ...state,
       columns
@@ -1897,9 +1950,9 @@ function updateTableConfig(state, { columns, confirmed, filter, groupBy, sort })
     result = {
       ...state,
       columns: columns.map((colName, index) => {
-        const columnName = (0, import_vuu_utils10.getColumnName)(colName);
+        const columnName = (0, import_vuu_utils11.getColumnName)(colName);
         const key = index + KEY_OFFSET;
-        const col = (0, import_vuu_utils10.findColumn)(result.columns, columnName);
+        const col = (0, import_vuu_utils11.findColumn)(result.columns, columnName);
         if (col) {
           if (col.key === key) {
             return col;
@@ -1917,24 +1970,24 @@ function updateTableConfig(state, { columns, confirmed, filter, groupBy, sort })
   if (hasGroupBy) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils10.applyGroupByToColumns)(result.columns, groupBy, confirmed)
+      columns: (0, import_vuu_utils11.applyGroupByToColumns)(result.columns, groupBy, confirmed)
     };
   }
   if (hasSort) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils10.applySortToColumns)(result.columns, sort)
+      columns: (0, import_vuu_utils11.applySortToColumns)(result.columns, sort)
     };
   }
   if (hasFilter) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils10.applyFilterToColumns)(result.columns, filter)
+      columns: (0, import_vuu_utils11.applyFilterToColumns)(result.columns, filter)
     };
-  } else if (result.columns.some(import_vuu_utils10.isFilteredColumn)) {
+  } else if (result.columns.some(import_vuu_utils11.isFilteredColumn)) {
     result = {
       ...state,
-      columns: (0, import_vuu_utils10.stripFilterFromColumns)(result.columns)
+      columns: (0, import_vuu_utils11.stripFilterFromColumns)(result.columns)
     };
   }
   return result;
@@ -2110,7 +2163,7 @@ var useTableScroll = ({
 
 // src/useTableViewport.ts
 var import_react18 = require("react");
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
 var MAX_RAW_ROWS = 15e5;
 var UNMEASURED_VIEWPORT = {
   contentHeight: 0,
@@ -2163,12 +2216,12 @@ var useTableViewport = ({
     [columns]
   );
   const [actualRowOffset, actualRowAtPosition] = (0, import_react18.useMemo)(
-    () => (0, import_vuu_utils11.actualRowPositioning)(rowHeight),
+    () => (0, import_vuu_utils12.actualRowPositioning)(rowHeight),
     [rowHeight]
   );
   const [getRowOffset, getRowAtPosition] = (0, import_react18.useMemo)(() => {
     if (virtualisedExtent) {
-      return (0, import_vuu_utils11.virtualRowPositioning)(
+      return (0, import_vuu_utils12.virtualRowPositioning)(
         rowHeight,
         virtualisedExtent,
         pctScrollTopRef
@@ -2229,7 +2282,7 @@ var useTableViewport = ({
 };
 
 // src/useVirtualViewport.ts
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
 var import_react19 = require("react");
 var useVirtualViewport = ({
   columns,
@@ -2246,7 +2299,7 @@ var useVirtualViewport = ({
   const availableWidth = contentWidth - maxScrollContainerScrollHorizontal;
   const scrollLeftRef = (0, import_react19.useRef)(0);
   const [visibleColumns, preSpan] = (0, import_react19.useMemo)(
-    () => (0, import_vuu_utils12.getColumnsInViewport)(
+    () => (0, import_vuu_utils13.getColumnsInViewport)(
       columns,
       scrollLeftRef.current,
       scrollLeftRef.current + availableWidth
@@ -2261,12 +2314,12 @@ var useVirtualViewport = ({
   const handleHorizontalScroll = (0, import_react19.useCallback)(
     (scrollLeft) => {
       scrollLeftRef.current = scrollLeft;
-      const [visibleColumns2, pre] = (0, import_vuu_utils12.getColumnsInViewport)(
+      const [visibleColumns2, pre] = (0, import_vuu_utils13.getColumnsInViewport)(
         columns,
         scrollLeft,
         scrollLeft + availableWidth
       );
-      if ((0, import_vuu_utils12.itemsChanged)(columnsWithinViewport, visibleColumns2)) {
+      if ((0, import_vuu_utils13.itemsChanged)(columnsWithinViewport, visibleColumns2)) {
         preSpanRef.current = pre;
         setColumnsWithinViewport(visibleColumns2);
       }
@@ -2294,7 +2347,7 @@ var useVirtualViewport = ({
 
 // src/useTable.ts
 var NO_ROWS = [];
-var { KEY: KEY2, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils13.metadataKeys;
+var { KEY: KEY2, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils14.metadataKeys;
 var useTable = ({
   config,
   dataSource,
@@ -2309,12 +2362,12 @@ var useTable = ({
   ...measuredProps
 }) => {
   var _a, _b;
-  const [rowCount, setRowCount] = (0, import_react20.useState)(0);
+  const [rowCount, setRowCount] = (0, import_react20.useState)(dataSource.size);
   const expectConfigChangeRef = (0, import_react20.useRef)(false);
   const dataSourceRef = (0, import_react20.useRef)();
   dataSourceRef.current = dataSource;
   if (dataSource === void 0) {
-    throw Error("no data source provided to DataTable");
+    throw Error("no data source provided to Vuu Table");
   }
   const containerMeasurements = useMeasuredContainer(measuredProps);
   const onDataRowcountChange = (0, import_react20.useCallback)((size) => {
@@ -2324,17 +2377,6 @@ var useTable = ({
     config,
     dataSource.config
   );
-  const handlePersistentColumnOperation = (0, import_react20.useCallback)(
-    (action) => {
-      expectConfigChangeRef.current = true;
-      dispatchColumnAction(action);
-    },
-    [dispatchColumnAction]
-  );
-  const handleContextMenuAction = useContextMenu({
-    dataSource,
-    onPersistentColumnOperation: handlePersistentColumnOperation
-  });
   const {
     getRowAtPosition,
     getRowOffset,
@@ -2384,10 +2426,21 @@ var useTable = ({
   });
   const dataRef = (0, import_react20.useRef)();
   dataRef.current = data;
+  const onPersistentColumnOperation = (0, import_react20.useCallback)(
+    (action) => {
+      expectConfigChangeRef.current = true;
+      dispatchColumnAction(action);
+    },
+    [dispatchColumnAction]
+  );
+  const handleContextMenuAction = useTableContextMenu({
+    dataSource,
+    onPersistentColumnOperation
+  });
   const handleSort = (0, import_react20.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
-        dataSource.sort = (0, import_vuu_utils13.applySort)(
+        dataSource.sort = (0, import_vuu_utils14.applySort)(
           dataSource.sort,
           column,
           extendSort,
@@ -2420,7 +2473,7 @@ var useTable = ({
   );
   const handleToggleGroup = (0, import_react20.useCallback)(
     (row, column) => {
-      const isJson = (0, import_vuu_utils13.isJsonGroup)(column, row);
+      const isJson = (0, import_vuu_utils14.isJsonGroup)(column, row);
       const key = row[KEY2];
       if (row[IS_EXPANDED2]) {
         dataSource.closeTreeNode(key, true);
@@ -2503,7 +2556,7 @@ var useTable = ({
   const handleDropColumn = (0, import_react20.useCallback)(
     (fromIndex, toIndex) => {
       const column = dataSource.columns[fromIndex];
-      const columns2 = (0, import_vuu_utils13.moveItem)(dataSource.columns, column, toIndex);
+      const columns2 = (0, import_vuu_utils14.moveItem)(dataSource.columns, column, toIndex);
       if (columns2 !== dataSource.columns) {
         dataSource.columns = columns2;
         dispatchColumnAction({ type: "tableConfig", columns: columns2 });
@@ -2554,7 +2607,7 @@ var useTable = ({
       const rowEl = target == null ? void 0 : target.closest(".vuuTableRow");
       if (cellEl && rowEl && currentData && currentDataSource) {
         const { columns: columns2, selectedRowsCount } = currentDataSource;
-        const columnMap = (0, import_vuu_utils13.buildColumnMap)(columns2);
+        const columnMap = (0, import_vuu_utils14.buildColumnMap)(columns2);
         const rowIndex = parseInt((_a2 = rowEl.ariaRowIndex) != null ? _a2 : "-1");
         const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
         const row = currentData.find(([idx]) => idx === rowIndex);
@@ -2571,10 +2624,10 @@ var useTable = ({
     [dataSource == null ? void 0 : dataSource.viewport, getSelectedRows, showContextMenu]
   );
   return {
-    containerMeasurements,
-    containerProps,
     columns,
     columnsWithinViewport,
+    containerMeasurements,
+    containerProps,
     data,
     dispatchColumnAction,
     getRowOffset,
@@ -2596,7 +2649,7 @@ var useTable = ({
 
 // src/Table.tsx
 var import_classnames7 = __toESM(require("classnames"));
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var classBase6 = "vuuTable";
 var Table = ({
@@ -2618,7 +2671,7 @@ var Table = ({
   style: styleProp,
   width,
   zebraStripes = false,
-  ...props
+  ...htmlAttributes
 }) => {
   const id = (0, import_core.useIdMemo)(idProp);
   const {
@@ -2662,7 +2715,7 @@ var Table = ({
   };
   const className = (0, import_classnames7.default)(classBase6, classNameProp, {
     [`${classBase6}-zebra`]: zebraStripes,
-    [`${classBase6}-loading`]: (0, import_vuu_utils14.isDataLoading)(tableProps.columns)
+    [`${classBase6}-loading`]: (0, import_vuu_utils15.isDataLoading)(tableProps.columns)
   });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_vuu_popups4.ContextMenuProvider,
@@ -2672,7 +2725,7 @@ var Table = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "div",
         {
-          ...props,
+          ...htmlAttributes,
           ...containerProps,
           className,
           id,
@@ -2724,10 +2777,10 @@ var Table = ({
 
 // src/cell-renderers/json-cell/JsonCell.tsx
 var import_classnames8 = __toESM(require("classnames"));
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var classBase7 = "vuuJsonCell";
-var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = import_vuu_utils15.metadataKeys;
+var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = import_vuu_utils16.metadataKeys;
 var localKey = (key) => {
   const pos = key.lastIndexOf("|");
   if (pos === -1) {
@@ -2743,7 +2796,7 @@ var JsonCell = ({ column, row }) => {
   } = column;
   let value = row[columnKey];
   let isToggle = false;
-  if ((0, import_vuu_utils15.isJsonAttribute)(value)) {
+  if ((0, import_vuu_utils16.isJsonAttribute)(value)) {
     value = value.slice(0, -1);
     isToggle = true;
   }
@@ -2765,5 +2818,5 @@ var JsonCell = ({ column, row }) => {
     return null;
   }
 };
-(0, import_vuu_utils15.registerComponent)("json", JsonCell, "cell-renderer", {});
+(0, import_vuu_utils16.registerComponent)("json", JsonCell, "cell-renderer", {});
 //# sourceMappingURL=index.js.map