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

package/cjs/index.js

@@ -128,7 +128,7 @@ var SortIndicator = ({ column }) => {
 var import_react2 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var NOOP = () => void 0;
-var baseClass = "vuuColumnResizerNext";
+var baseClass = "vuuColumnResizer";
 var ColumnResizer = ({
   onDrag,
   onDragEnd = NOOP,
@@ -355,6 +355,7 @@ var GroupHeaderCell = ({
 };
 
 // src/header-cell/HeaderCell.tsx
+var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
 var import_clsx5 = __toESM(require("clsx"));
 var import_react7 = require("react");
 
@@ -383,9 +384,9 @@ var HeaderCell = ({
   column,
   onClick,
   onResize,
+  showMenu = true,
   ...htmlAttributes
 }) => {
-  var _a;
   const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
   const rootRef = (0, import_react7.useRef)(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
@@ -393,26 +394,66 @@ var HeaderCell = ({
     onResize,
     rootRef
   });
+  const [showContextMenu] = (0, import_vuu_popups2.useContextMenu)();
+  const handleContextMenu = (0, import_react7.useMemo)(() => {
+    if (showMenu) {
+      return void 0;
+    } else {
+      return (e) => showContextMenu(e, "column-menu", { column });
+    }
+  }, [column, showContextMenu, showMenu]);
+  const headerItems = (0, import_react7.useMemo)(() => {
+    var _a;
+    const sortIndicator = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortIndicator, { column });
+    const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      HeaderCellLabelRenderer,
+      {
+        className: `${classBase4}-label`,
+        column
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase4}-label`, children: (_a = column.label) != null ? _a : column.name });
+    const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCellContentRenderer, { column }, "content")] : [];
+    if (showMenu) {
+      const columnMenu = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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 = (0, import_react7.useCallback)(
     (evt) => {
       !isResizing && (onClick == null ? void 0 : onClick(evt));
     },
     [isResizing, onClick]
   );
+  const handleKeyDown = (0, import_react7.useCallback)(
+    (evt) => {
+      if (evt.key === "Enter") {
+        onClick == null ? void 0 : onClick(evt);
+      }
+    },
+    [onClick]
+  );
   const { className, style } = useCell(column, classBase4, true);
-  const columnMenu = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColumnMenu, { column });
-  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCellLabelRenderer, { className: `${classBase4}-label`, column }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase4}-label`, children: (_a = column.label) != null ? _a : column.name });
-  const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCellContentRenderer, { column }, "content")] : [];
-  const sortIndicator = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortIndicator, { column });
-  const headerItems = column.align === "right" ? [sortIndicator, columnLabel].concat(columnContent).concat(columnMenu) : [columnMenu, columnLabel, sortIndicator].concat(columnContent);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ...htmlAttributes,
       className: (0, import_clsx5.default)(className, classNameProp, {
-        [`${classBase4}-resizing`]: isResizing
+        [`${classBase4}-resizing`]: isResizing,
+        [`${classBase4}-noMenu`]: showMenu === false
       }),
       onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      onKeyDown: handleKeyDown,
       ref: rootRef,
       role: "columnheader",
       style,
@@ -425,7 +466,7 @@ var HeaderCell = ({
 };
 
 // src/Table.tsx
-var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
+var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
 var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
@@ -684,10 +725,7 @@ var useTableHeader = ({
   const handleColumnHeaderClick = (0, import_react11.useCallback)(
     (evt) => {
       var _a;
-      const targetElement = evt.target;
-      const headerCell = targetElement.closest(
-        ".vuuTableHeaderCell"
-      );
+      const headerCell = (0, import_vuu_utils6.queryClosest)(evt.target, ".vuuTableHeaderCell");
       const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
       const column = (0, import_vuu_utils6.visibleColumnAtIndex)(columns, colIdx);
       const isAdditive = evt.shiftKey;
@@ -729,6 +767,7 @@ var TableHeader = (0, import_react12.memo)(
     onRemoveGroupColumn,
     onResizeColumn,
     onSortColumn,
+    showColumnHeaderMenus,
     tableConfig,
     tableId,
     virtualColSpan = 0
@@ -780,7 +819,8 @@ var TableHeader = (0, import_react12.memo)(
               id: `${tableId}-col-${i}`,
               onClick,
               onMouseDown,
-              onResize: onResizeColumn
+              onResize: onResizeColumn,
+              showMenu: showColumnHeaderMenus
             },
             col.name
           )
@@ -1768,7 +1808,7 @@ var useSelection = ({
 };
 
 // src/useTableContextMenu.ts
-var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
+var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
 var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
 var import_react18 = require("react");
 var NO_ROWS = [];
@@ -1778,7 +1818,7 @@ var useTableContextMenu = ({
   dataSource,
   getSelectedRows
 }) => {
-  const [showContextMenu] = (0, import_vuu_popups2.useContextMenu)();
+  const [showContextMenu] = (0, import_vuu_popups3.useContextMenu)();
   const onContextMenu = (0, import_react18.useCallback)(
     (evt) => {
       const target = evt.target;
@@ -2077,6 +2117,11 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
       ...state,
       columns: (0, import_vuu_utils17.applySortToColumns)(result.columns, sort)
     };
+  } else if ((0, import_vuu_utils17.existingSort)(result.columns)) {
+    result = {
+      ...state,
+      columns: (0, import_vuu_utils17.removeSort)(result.columns)
+    };
   }
   if (hasFilter) {
     result = {
@@ -3000,7 +3045,7 @@ var useTable = ({
   const handleSort = (0, import_react24.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
-        dataSource.sort = (0, import_vuu_utils22.applySort)(
+        dataSource.sort = (0, import_vuu_utils22.toggleOrApplySort)(
           dataSource.sort,
           column,
           extendSort,
@@ -3359,6 +3404,7 @@ var TableCore = ({
   scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
+  showColumnHeaderMenus = true,
   headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,
   size
 }) => {
@@ -3431,7 +3477,7 @@ var TableCore = ({
     "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
   };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_vuu_popups3.ContextMenuProvider,
+    import_vuu_popups4.ContextMenuProvider,
     {
       menuActionHandler: handleContextMenuAction,
       menuBuilder,
@@ -3469,6 +3515,7 @@ var TableCore = ({
                       onRemoveGroupColumn,
                       onResizeColumn,
                       onSortColumn,
+                      showColumnHeaderMenus,
                       tableConfig,
                       tableId: id,
                       virtualColSpan: scrollProps.virtualColSpan
@@ -3527,6 +3574,7 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
   scrollingApiRef,
   selectionModel,
   showColumnHeaders,
+  showColumnHeaderMenus,
   headerHeight,
   style: styleProp,
   ...htmlAttributes
@@ -3542,7 +3590,6 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
   if (dataSource === void 0) {
     throw Error("vuu Table requires dataSource prop");
   }
-  console.log({ rowHeight });
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     import_vuu_ui_controls5.MeasuredContainer,
     {
@@ -3581,6 +3628,7 @@ var Table = (0, import_react26.forwardRef)(function TableNext({
             scrollingApiRef,
             selectionModel,
             showColumnHeaders,
+            showColumnHeaderMenus,
             size
           }
         ) : null