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

package/esm/index.js

@@ -1,7 +1,3 @@
-// src/Table.tsx
-import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
-import { Button, useIdMemo } from "@salt-ds/core";
-
 // src/context-menu/buildContextMenuDescriptors.ts
 import { isNumericColumn } from "@vuu-ui/vuu-utils";
 var buildContextMenuDescriptors = (dataSource) => (location, options) => {
@@ -217,7 +213,7 @@ function buildGroupMenuItems(options, { groupBy }) {
   return menuItems;
 }
 
-// src/context-menu/useContextMenu.ts
+// src/context-menu/useTableContextMenu.ts
 import { removeColumnFromFilter } from "@vuu-ui/vuu-filters";
 import {
   addGroupColumn,
@@ -241,7 +237,7 @@ var removeFilterColumn = (dataSourceFilter, column) => {
   }
 };
 var { Average, Count, High, Low, Sum } = AggregationType;
-var useContextMenu = ({
+var useTableContextMenu = ({
   dataSource,
   onPersistentColumnOperation
 }) => {
@@ -296,6 +292,10 @@ var useContextMenu = ({
   return handleContextMenuAction;
 };
 
+// src/Table.tsx
+import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
+import { Button, useIdMemo } from "@salt-ds/core";
+
 // src/RowBasedTable.tsx
 import {
   buildColumnMap,
@@ -322,7 +322,12 @@ import { memo as memo2, useCallback as useCallback3 } from "react";
 import { getColumnStyle, metadataKeys } from "@vuu-ui/vuu-utils";
 import { EditableLabel } from "@heswell/salt-lab";
 import cx from "classnames";
-import { memo, useCallback, useRef, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useRef,
+  useState
+} from "react";
 import { jsx } from "react/jsx-runtime";
 var { KEY } = metadataKeys;
 var TableCell = memo(
@@ -355,9 +360,12 @@ var TableCell = memo(
         setEditing(true);
       }
     };
-    const handleClick = useCallback(() => {
-      onClick == null ? void 0 : onClick(column);
-    }, [column, onClick]);
+    const handleClick = useCallback(
+      (evt) => {
+        onClick == null ? void 0 : onClick(evt, column);
+      },
+      [column, onClick]
+    );
     const handleEnterEditMode = () => {
       setEditing(true);
     };
@@ -443,9 +451,12 @@ var getGroupValueAndOffset = (columns, row) => {
 var TableGroupCell = ({ column, onClick, row }) => {
   const { columns } = column;
   const [value, offset] = getGroupValueAndOffset(columns, row);
-  const handleClick = useCallback2(() => {
-    onClick == null ? void 0 : onClick(column);
-  }, [column, onClick]);
+  const handleClick = useCallback2(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
   const style = getColumnStyle2(column);
   const isLeaf = row[IS_LEAF];
   const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx2("span", { className: "vuuTableGroupCell-spacer" }, i));
@@ -497,8 +508,9 @@ var TableRow = memo2(function Row({
     [onClick, row]
   );
   const handleGroupCellClick = useCallback3(
-    (column) => {
+    (evt, column) => {
       if (isGroupColumn(column) || isJsonGroup(column, row)) {
+        evt.stopPropagation();
         onToggleGroup == null ? void 0 : onToggleGroup(row, column);
       }
     },
@@ -716,15 +728,15 @@ var SortIndicator = ({ sorted }) => {
 };
 
 // src/TableHeaderCell.tsx
-import { useContextMenu as useContextMenu3 } from "@vuu-ui/vuu-popups";
+import { useContextMenu as useContextMenu2 } from "@vuu-ui/vuu-popups";
 
 // src/filter-indicator.tsx
-import { useContextMenu as useContextMenu2 } from "@vuu-ui/vuu-popups";
+import { useContextMenu } from "@vuu-ui/vuu-popups";
 import cx5 from "classnames";
 import { useCallback as useCallback6 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var FilterIndicator = ({ column, filter }) => {
-  const showContextMenu = useContextMenu2();
+  const showContextMenu = useContextMenu();
   const handleClick = useCallback6(
     (evt) => {
       evt.stopPropagation();
@@ -762,7 +774,7 @@ var TableHeaderCell = ({
     onResize,
     rootRef
   });
-  const showContextMenu = useContextMenu3();
+  const showContextMenu = useContextMenu2();
   const dragTimerRef = useRef5(null);
   const handleContextMenu = (e) => {
     showContextMenu(e, "header", { column });
@@ -927,7 +939,7 @@ import {
 import {
   useCallback as useCallback18,
   useEffect as useEffect5,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef15,
   useState as useState5
 } from "react";
@@ -1452,7 +1464,8 @@ var useKeyboardNavigation = ({
 };
 
 // src/useMeasuredContainer.ts
-import { useCallback as useCallback13, useRef as useRef10, useState as useState3 } from "react";
+import { isValidNumber } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback13, useMemo as useMemo4, useRef as useRef10, useState as useState3 } from "react";
 
 // src/useResizeObserver.ts
 import { useCallback as useCallback12, useEffect as useEffect3, useRef as useRef9 } from "react";
@@ -1574,6 +1587,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 (isValidNumber(height) && isValidNumber(width)) {
+    return {
+      height: `${height}px`,
+      width: `${width}px`
+    };
+  } else {
+    return FULL_SIZE;
+  }
+};
+var getInitialInnerSize = (height, width) => {
+  if (isValidNumber(height) && isValidNumber(width)) {
+    return {
+      height,
+      width
+    };
+  }
+};
 var useMeasuredContainer = ({
   defaultHeight = 0,
   defaultWidth = 0,
@@ -1582,17 +1614,38 @@ var useMeasuredContainer = ({
 }) => {
   const containerRef = useRef10(null);
   const [size, setSize] = useState3({
+    css: getInitialCssSize(height, width),
+    inner: getInitialInnerSize(height, width),
     outer: {
       height: height != null ? height : "100%",
       width: width != null ? width : "100%"
     }
   });
+  useMemo4(() => {
+    setSize((currentSize) => {
+      const { inner, outer } = currentSize;
+      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
+        const { height: innerHeight, width: innerWidth } = inner;
+        const { height: outerHeight, width: outerWidth } = outer;
+        if (outerHeight !== height || outerWidth !== width) {
+          const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
+          return {
+            ...currentSize,
+            outer: { height, width },
+            inner: { height: height - heightDiff, width: width - widthDiff }
+          };
+        }
+      }
+      return currentSize;
+    });
+  }, [height, width]);
   const onResize = useCallback13(
     ({ 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,
@@ -1606,6 +1659,7 @@ var useMeasuredContainer = ({
   useResizeObserver(containerRef, ClientWidthHeight, onResize, true);
   return {
     containerRef,
+    cssSize: size.css,
     outerSize: size.outer,
     innerSize: size.inner
   };
@@ -2129,7 +2183,7 @@ var useTableScroll = ({
 };
 
 // src/useTableViewport.ts
-import { useCallback as useCallback16, useMemo as useMemo4, useRef as useRef13 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo5, useRef as useRef13 } from "react";
 import {
   actualRowPositioning,
   virtualRowPositioning
@@ -2181,15 +2235,15 @@ var useTableViewport = ({
   const appliedContentHeight = appliedRowCount * rowHeight;
   const virtualContentHeight = rowCount * rowHeight;
   const virtualisedExtent = virtualContentHeight - appliedContentHeight;
-  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo4(
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo5(
     () => measurePinnedColumns(columns),
     [columns]
   );
-  const [actualRowOffset, actualRowAtPosition] = useMemo4(
+  const [actualRowOffset, actualRowAtPosition] = useMemo5(
     () => actualRowPositioning(rowHeight),
     [rowHeight]
   );
-  const [getRowOffset, getRowAtPosition] = useMemo4(() => {
+  const [getRowOffset, getRowAtPosition] = useMemo5(() => {
     if (virtualisedExtent) {
       return virtualRowPositioning(
         rowHeight,
@@ -2203,7 +2257,7 @@ var useTableViewport = ({
   const setPctScrollTop = useCallback16((scrollPct) => {
     pctScrollTopRef.current = scrollPct;
   }, []);
-  return useMemo4(() => {
+  return useMemo5(() => {
     var _a;
     if (size) {
       const headingsDepth = headings.length;
@@ -2256,7 +2310,7 @@ import {
   getColumnsInViewport,
   itemsChanged
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback17, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef14, useState as useState4 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef14, useState as useState4 } from "react";
 var useVirtualViewport = ({
   columns,
   getRowAtPosition,
@@ -2271,7 +2325,7 @@ var useVirtualViewport = ({
   } = viewportMeasurements;
   const availableWidth = contentWidth - maxScrollContainerScrollHorizontal;
   const scrollLeftRef = useRef14(0);
-  const [visibleColumns, preSpan] = useMemo5(
+  const [visibleColumns, preSpan] = useMemo6(
     () => getColumnsInViewport(
       columns,
       scrollLeftRef.current,
@@ -2335,12 +2389,12 @@ var useTable = ({
   ...measuredProps
 }) => {
   var _a, _b;
-  const [rowCount, setRowCount] = useState5(0);
+  const [rowCount, setRowCount] = useState5(dataSource.size);
   const expectConfigChangeRef = useRef15(false);
   const dataSourceRef = useRef15();
   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 = useCallback18((size) => {
@@ -2350,17 +2404,6 @@ var useTable = ({
     config,
     dataSource.config
   );
-  const handlePersistentColumnOperation = useCallback18(
-    (action) => {
-      expectConfigChangeRef.current = true;
-      dispatchColumnAction(action);
-    },
-    [dispatchColumnAction]
-  );
-  const handleContextMenuAction = useContextMenu({
-    dataSource,
-    onPersistentColumnOperation: handlePersistentColumnOperation
-  });
   const {
     getRowAtPosition,
     getRowOffset,
@@ -2410,6 +2453,17 @@ var useTable = ({
   });
   const dataRef = useRef15();
   dataRef.current = data;
+  const onPersistentColumnOperation = useCallback18(
+    (action) => {
+      expectConfigChangeRef.current = true;
+      dispatchColumnAction(action);
+    },
+    [dispatchColumnAction]
+  );
+  const handleContextMenuAction = useTableContextMenu({
+    dataSource,
+    onPersistentColumnOperation
+  });
   const handleSort = useCallback18(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
@@ -2560,7 +2614,7 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchColumnAction]);
-  useMemo6(() => {
+  useMemo7(() => {
     if (expectConfigChangeRef.current) {
       onConfigChange == null ? void 0 : onConfigChange({
         ...config,
@@ -2597,10 +2651,10 @@ var useTable = ({
     [dataSource == null ? void 0 : dataSource.viewport, getSelectedRows, showContextMenu]
   );
   return {
-    containerMeasurements,
-    containerProps,
     columns,
     columnsWithinViewport,
+    containerMeasurements,
+    containerProps,
     data,
     dispatchColumnAction,
     getRowOffset,
@@ -2644,7 +2698,7 @@ var Table = ({
   style: styleProp,
   width,
   zebraStripes = false,
-  ...props
+  ...htmlAttributes
 }) => {
   const id = useIdMemo(idProp);
   const {
@@ -2698,7 +2752,7 @@ var Table = ({
       children: /* @__PURE__ */ jsxs7(
         "div",
         {
-          ...props,
+          ...htmlAttributes,
           ...containerProps,
           className,
           id,
@@ -2798,6 +2852,10 @@ var JsonCell = ({ column, row }) => {
 registerComponent("json", JsonCell, "cell-renderer", {});
 export {
   Table,
-  useMeasuredContainer
+  buildContextMenuDescriptors,
+  useMeasuredContainer,
+  useTableContextMenu,
+  useTableModel,
+  useTableViewport
 };
 //# sourceMappingURL=index.js.map