@vuu-ui/vuu-table 0.8.26-debug → 0.8.27-debug

package/esm/index.js

@@ -76,7 +76,7 @@ var SortIndicator = ({ column }) => {
 import { useCallback as useCallback2, useRef } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var NOOP = () => void 0;
-var baseClass = "vuuColumnResizerNext";
+var baseClass = "vuuColumnResizer";
 var ColumnResizer = ({
   onDrag,
   onDragEnd = NOOP,
@@ -303,8 +303,13 @@ var GroupHeaderCell = ({
 };
 
 // src/header-cell/HeaderCell.tsx
+import { useContextMenu } from "@vuu-ui/vuu-popups";
 import cx5 from "clsx";
-import { useCallback as useCallback5, useRef as useRef4 } from "react";
+import {
+  useCallback as useCallback5,
+  useMemo as useMemo2,
+  useRef as useRef4
+} from "react";
 
 // src/column-menu/ColumnMenu.tsx
 import { PopupMenu } from "@vuu-ui/vuu-popups";
@@ -331,9 +336,9 @@ var HeaderCell = ({
   column,
   onClick,
   onResize,
+  showMenu = true,
   ...htmlAttributes
 }) => {
-  var _a;
   const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
   const rootRef = useRef4(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
@@ -341,26 +346,66 @@ var HeaderCell = ({
     onResize,
     rootRef
   });
+  const [showContextMenu] = useContextMenu();
+  const handleContextMenu = useMemo2(() => {
+    if (showMenu) {
+      return void 0;
+    } else {
+      return (e) => showContextMenu(e, "column-menu", { column });
+    }
+  }, [column, showContextMenu, showMenu]);
+  const headerItems = useMemo2(() => {
+    var _a;
+    const sortIndicator = /* @__PURE__ */ jsx7(SortIndicator, { column });
+    const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ jsx7(
+      HeaderCellLabelRenderer,
+      {
+        className: `${classBase4}-label`,
+        column
+      }
+    ) : /* @__PURE__ */ jsx7("div", { className: `${classBase4}-label`, children: (_a = column.label) != null ? _a : column.name });
+    const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ jsx7(HeaderCellContentRenderer, { column }, "content")] : [];
+    if (showMenu) {
+      const columnMenu = /* @__PURE__ */ jsx7(ColumnMenu, { column });
+      if (column.align === "right") {
+        return [sortIndicator, columnLabel, columnContent, columnMenu];
+      } else {
+        return [columnMenu, columnLabel, sortIndicator, columnContent];
+      }
+    } else {
+      if (column.align === "right") {
+        return [sortIndicator, columnLabel, columnContent];
+      } else {
+        return [columnLabel, sortIndicator, columnContent];
+      }
+    }
+  }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);
   const handleClick = useCallback5(
     (evt) => {
       !isResizing && (onClick == null ? void 0 : onClick(evt));
     },
     [isResizing, onClick]
   );
+  const handleKeyDown = useCallback5(
+    (evt) => {
+      if (evt.key === "Enter") {
+        onClick == null ? void 0 : onClick(evt);
+      }
+    },
+    [onClick]
+  );
   const { className, style } = useCell(column, classBase4, true);
-  const columnMenu = /* @__PURE__ */ jsx7(ColumnMenu, { column });
-  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ jsx7(HeaderCellLabelRenderer, { className: `${classBase4}-label`, column }) : /* @__PURE__ */ jsx7("div", { className: `${classBase4}-label`, children: (_a = column.label) != null ? _a : column.name });
-  const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ jsx7(HeaderCellContentRenderer, { column }, "content")] : [];
-  const sortIndicator = /* @__PURE__ */ jsx7(SortIndicator, { column });
-  const headerItems = column.align === "right" ? [sortIndicator, columnLabel].concat(columnContent).concat(columnMenu) : [columnMenu, columnLabel, sortIndicator].concat(columnContent);
   return /* @__PURE__ */ jsxs5(
     "div",
     {
       ...htmlAttributes,
       className: cx5(className, classNameProp, {
-        [`${classBase4}-resizing`]: isResizing
+        [`${classBase4}-resizing`]: isResizing,
+        [`${classBase4}-noMenu`]: showMenu === false
       }),
       onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      onKeyDown: handleKeyDown,
       ref: rootRef,
       role: "columnheader",
       style,
@@ -614,7 +659,11 @@ import { memo as memo2 } from "react";
 import {
   useDragDrop
 } from "@vuu-ui/vuu-ui-controls";
-import { moveColumnTo, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
+import {
+  moveColumnTo,
+  queryClosest,
+  visibleColumnAtIndex
+} from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback9, useRef as useRef5 } from "react";
 var useTableHeader = ({
   columns,
@@ -651,10 +700,7 @@ var useTableHeader = ({
   const handleColumnHeaderClick = useCallback9(
     (evt) => {
       var _a;
-      const targetElement = evt.target;
-      const headerCell = targetElement.closest(
-        ".vuuTableHeaderCell"
-      );
+      const headerCell = queryClosest(evt.target, ".vuuTableHeaderCell");
       const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
       const column = visibleColumnAtIndex(columns, colIdx);
       const isAdditive = evt.shiftKey;
@@ -696,6 +742,7 @@ var TableHeader = memo2(
     onRemoveGroupColumn,
     onResizeColumn,
     onSortColumn,
+    showColumnHeaderMenus,
     tableConfig,
     tableId,
     virtualColSpan = 0
@@ -747,7 +794,8 @@ var TableHeader = memo2(
               id: `${tableId}-col-${i}`,
               onClick,
               onMouseDown,
-              onResize: onResizeColumn
+              onResize: onResizeColumn,
+              showMenu: showColumnHeaderMenus
             },
             col.name
           )
@@ -764,7 +812,7 @@ import {
   useDragDrop as useDragDrop2
 } from "@vuu-ui/vuu-ui-controls";
 import {
-  applySort,
+  toggleOrApplySort,
   asDataSourceRowObject,
   buildColumnMap as buildColumnMap2,
   getIndexFromRowElement as getIndexFromRowElement3,
@@ -778,7 +826,7 @@ import {
 import {
   useCallback as useCallback18,
   useEffect as useEffect4,
-  useMemo as useMemo7,
+  useMemo as useMemo8,
   useRef as useRef13,
   useState as useState6
 } from "react";
@@ -1231,7 +1279,7 @@ var useCellEditing = ({ navigate }) => {
 
 // src/useDataSource.ts
 import { getFullRange, NULL_RANGE, rangesAreSame } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback11, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState3 } from "react";
+import { useCallback as useCallback11, useEffect, useMemo as useMemo3, useRef as useRef6, useState as useState3 } from "react";
 
 // src/moving-window.ts
 import {
@@ -1309,7 +1357,7 @@ var useDataSource = ({
   const isMounted = useRef6(true);
   const hasUpdated = useRef6(false);
   const rangeRef = useRef6(range);
-  const dataWindow = useMemo2(
+  const dataWindow = useMemo3(
     () => new MovingWindow(getFullRange(range, renderBufferSize)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -1395,10 +1443,10 @@ var useDataSource = ({
 };
 
 // src/useInitialValue.ts
-import { useMemo as useMemo3, useRef as useRef7 } from "react";
+import { useMemo as useMemo4, useRef as useRef7 } from "react";
 var useInitialValue = (value) => {
   const ref = useRef7(value);
-  return useMemo3(() => ref.current, []);
+  return useMemo4(() => ref.current, []);
 };
 
 // src/useKeyboardNavigation.ts
@@ -1822,6 +1870,7 @@ import {
   applyFilterToColumns,
   applyGroupByToColumns,
   applySortToColumns,
+  existingSort,
   getCellRenderer,
   getColumnHeaderContentRenderer,
   getColumnHeaderLabelRenderer,
@@ -1833,6 +1882,7 @@ import {
   isGroupColumn as isGroupColumn3,
   isPinned,
   logger,
+  removeSort,
   replaceColumn,
   sortPinnedColumns,
   stripFilterFromColumns,
@@ -2108,6 +2158,11 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
       ...state,
       columns: applySortToColumns(result.columns, sort)
     };
+  } else if (existingSort(result.columns)) {
+    result = {
+      ...state,
+      columns: removeSort(result.columns)
+    };
   }
   if (hasFilter) {
     result = {
@@ -2133,7 +2188,7 @@ import {
   useCallback as useCallback15,
   useEffect as useEffect3,
   useImperativeHandle,
-  useMemo as useMemo4,
+  useMemo as useMemo5,
   useRef as useRef10,
   useState as useState4
 } from "react";
@@ -2239,7 +2294,7 @@ var useTableScroll = ({
   const columnsWithinViewportRef = useRef10([]);
   const [, forceRefresh] = useState4({});
   const preSpanRef = useRef10(0);
-  useMemo4(() => {
+  useMemo5(() => {
     const [visibleColumns, offset] = getColumnsInViewport(
       columns,
       contentContainerPosRef.current.scrollLeft,
@@ -2471,7 +2526,7 @@ var useTableScroll = ({
       viewportRowCount
     ]
   );
-  const scrollHandles = useMemo4(
+  const scrollHandles = useMemo5(
     // TODO not complete yet
     () => ({
       scrollToIndex: (rowIndex) => {
@@ -2530,7 +2585,7 @@ import {
   measurePinnedColumns,
   virtualRowPositioning
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback16, useMemo as useMemo5, useRef as useRef11 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo6, useRef as useRef11 } from "react";
 var MAX_PIXEL_HEIGHT = 1e7;
 var UNMEASURED_VIEWPORT = {
   appliedPageSize: 0,
@@ -2564,15 +2619,15 @@ var useTableViewport = ({
   const pixelContentHeight = Math.min(rowHeight * rowCount, MAX_PIXEL_HEIGHT);
   const virtualContentHeight = rowCount * rowHeight;
   const virtualisedExtent = virtualContentHeight - pixelContentHeight;
-  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo5(
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo6(
     () => measurePinnedColumns(columns, selectionEndSize),
     [columns, selectionEndSize]
   );
   const totalHeaderHeightRef = useRef11(headerHeight);
-  useMemo5(() => {
+  useMemo6(() => {
     totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
   }, [headerHeight, headings.length]);
-  const [getRowOffset, getRowAtPosition, isVirtualScroll] = useMemo5(() => {
+  const [getRowOffset, getRowAtPosition, isVirtualScroll] = useMemo6(() => {
     if (virtualisedExtent) {
       const [_getRowOffset, getRowAtPosition2, _isVirtual] = virtualRowPositioning(rowHeight, virtualisedExtent, pctScrollTopRef);
       const getOffset = (row) => {
@@ -2596,7 +2651,7 @@ var useTableViewport = ({
       );
     }
   }, []);
-  return useMemo5(() => {
+  return useMemo6(() => {
     if (size) {
       const { current: totalHeaderHeight } = totalHeaderHeightRef;
       const scrollbarSize = 15;
@@ -2776,7 +2831,7 @@ var useTableAndColumnSettings = ({
 import {
   getRowClassNameGenerator
 } from "@vuu-ui/vuu-utils";
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 var createClassNameGenerator = (ids) => {
   const functions = [];
   ids == null ? void 0 : ids.forEach((id) => {
@@ -2799,7 +2854,7 @@ var createClassNameGenerator = (ids) => {
 var useRowClassNameGenerators = ({
   rowClassNameGenerators
 }) => {
-  return useMemo6(() => {
+  return useMemo7(() => {
     return createClassNameGenerator(rowClassNameGenerators);
   }, [rowClassNameGenerators]);
 };
@@ -2850,7 +2905,7 @@ var useTable = ({
   }
   const rowClassNameGenerator = useRowClassNameGenerators(config);
   const useRowDragDrop = allowDragDrop ? useDragDrop2 : useNullDragDrop;
-  const menuBuilder = useMemo7(
+  const menuBuilder = useMemo8(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
@@ -2882,7 +2937,7 @@ var useTable = ({
     },
     [dataSource, dispatchTableModelAction, onConfigChange]
   );
-  const columnMap = useMemo7(
+  const columnMap = useMemo8(
     () => buildColumnMap2(dataSource.columns),
     [dataSource.columns]
   );
@@ -3048,7 +3103,7 @@ var useTable = ({
   const handleSort = useCallback18(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
-        dataSource.sort = applySort(
+        dataSource.sort = toggleOrApplySort(
           dataSource.sort,
           column,
           extendSort,
@@ -3341,13 +3396,13 @@ var useTable = ({
 
 // src/useRowHeight.ts
 import { isValidNumber as isValidNumber2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback19, useMemo as useMemo8, useRef as useRef14, useState as useState7 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo9, useRef as useRef14, useState as useState7 } from "react";
 var useRowHeight = ({
   rowHeight: rowHeightProp = 0
 }) => {
   const [rowHeight, setRowHeight] = useState7(rowHeightProp);
   const heightRef = useRef14(rowHeight);
-  const resizeObserver = useMemo8(() => {
+  const resizeObserver = useMemo9(() => {
     return new ResizeObserver((entries) => {
       for (const entry of entries) {
         const [{ blockSize: measuredSize }] = entry.borderBoxSize;
@@ -3407,6 +3462,7 @@ var TableCore = ({
   scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
+  showColumnHeaderMenus = true,
   headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,
   size
 }) => {
@@ -3517,6 +3573,7 @@ var TableCore = ({
                       onRemoveGroupColumn,
                       onResizeColumn,
                       onSortColumn,
+                      showColumnHeaderMenus,
                       tableConfig,
                       tableId: id,
                       virtualColSpan: scrollProps.virtualColSpan
@@ -3575,6 +3632,7 @@ var Table = forwardRef2(function TableNext({
   scrollingApiRef,
   selectionModel,
   showColumnHeaders,
+  showColumnHeaderMenus,
   headerHeight,
   style: styleProp,
   ...htmlAttributes
@@ -3590,7 +3648,6 @@ var Table = forwardRef2(function TableNext({
   if (dataSource === void 0) {
     throw Error("vuu Table requires dataSource prop");
   }
-  console.log({ rowHeight });
   return /* @__PURE__ */ jsxs9(
     MeasuredContainer,
     {
@@ -3629,6 +3686,7 @@ var Table = forwardRef2(function TableNext({
             scrollingApiRef,
             selectionModel,
             showColumnHeaders,
+            showColumnHeaderMenus,
             size
           }
         ) : null