trotl-table 1.0.68 → 1.0.69

package/dist/Table.cjs.js

@@ -9672,6 +9672,7 @@ function TableInner({
   enableExternalRowDrop = false,
   onExternalRowDrop = () => {},
   useExternalDndContext = false,
+  enableMouseRightClick = null,
   customColumns = [],
   groupDefaultOpen = false,
   showIcons = true,
@@ -9730,9 +9731,49 @@ function TableInner({
     onCellChangeRef.current = onCellChange;
     cellCallbackRef.current = cellCallback;
   });
+
+  // Context menu right click state
+  const [contextMenu, setContextMenu] = React.useState({
+    visible: false,
+    x: 0,
+    y: 0,
+    row: null
+  });
+  const [contextMenuModal, setContextMenuModal] = React.useState({
+    visible: false,
+    title: '',
+    component: null
+  });
   React.useEffect(() => {
     shareCallbackRef.current = shareCallback;
   }, [shareCallback]);
+  React.useEffect(() => {
+    if (!contextMenu.visible) return;
+    const handleClick = () => setContextMenu({
+      visible: false,
+      x: 0,
+      y: 0,
+      row: null
+    });
+    const handleEscape = event => {
+      if (event.key === 'Escape') {
+        setContextMenu({
+          visible: false,
+          x: 0,
+          y: 0,
+          row: null
+        });
+      }
+    };
+    window.addEventListener('click', handleClick);
+    window.addEventListener('contextmenu', handleClick);
+    window.addEventListener('keydown', handleEscape);
+    return () => {
+      window.removeEventListener('click', handleClick);
+      window.removeEventListener('contextmenu', handleClick);
+      window.removeEventListener('keydown', handleEscape);
+    };
+  }, [contextMenu.visible]);
   React.useEffect(() => {
     duplicateCallbackRef.current = duplicateCallback;
   }, [duplicateCallback]);
@@ -9845,6 +9886,43 @@ function TableInner({
     setSelectedRows(prev => prev.includes(rowId) ? prev.filter(r => r !== rowId) : [...prev, rowId]);
   }, []);
   const clearSelection = React.useCallback(() => setSelectedRows([]), []);
+  const performContextMenuAction = React.useCallback((action, row) => {
+    setContextMenu({
+      visible: false,
+      x: 0,
+      y: 0,
+      row: null
+    });
+    if (!action) return;
+    if (action.onClick && typeof action.onClick === "function") {
+      action.onClick(row, action);
+      return;
+    }
+    if (action.isModal) {
+      setContextMenuModal({
+        visible: true,
+        title: action.label || "",
+        component: action.component || null
+      });
+      return;
+    }
+    if (action.link) {
+      window.open(action.link, action.target || "_blank");
+      return;
+    }
+
+    // fallback: provide simple event for the row itself.
+    if (action.label) {
+      console.log(`context action ${action.label} invoked`, row);
+    }
+  }, []);
+  const closeContextMenuModal = React.useCallback(() => {
+    setContextMenuModal({
+      visible: false,
+      title: '',
+      component: null
+    });
+  }, []);
   const setSort = column => {
     setSorting(prev => {
       if (!prev || prev.column !== column) return {
@@ -10772,7 +10850,18 @@ function TableInner({
     const content = /*#__PURE__*/React.createElement("div", {
       key: key,
       style: style,
-      className: "table-row"
+      className: "table-row",
+      onContextMenu: e => {
+        if (!Array.isArray(enableMouseRightClick) || enableMouseRightClick.length === 0) return;
+        e.preventDefault();
+        e.stopPropagation();
+        setContextMenu({
+          visible: true,
+          x: e.clientX,
+          y: e.clientY,
+          row
+        });
+      }
     }, /*#__PURE__*/React.createElement("div", {
       className: "row-main",
       onDoubleClick: doubleClickEnable ? handleRowDoubleClick : undefined,
@@ -10887,6 +10976,7 @@ function TableInner({
     }
     return content;
   }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare, triggerCellCallback, getAccessorKey, getAccessorValue]);
+  const rightClickActions = Array.isArray(enableMouseRightClick) ? enableMouseRightClick : [];
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
@@ -11015,7 +11105,45 @@ function TableInner({
     showCancel: true,
     showConfirm: true
   }, /*#__PURE__*/React.createElement("p", null, translate("areYouSureYouWantToDelete"), " ", /*#__PURE__*/React.createElement("strong", null, pendingDelete ? pendingDelete[deleteLabelKey] ?? pendingDelete.name ?? pendingDelete.id : ''), "?")));
-  return tableMarkup;
+  const contextMenuMarkup = contextMenu.visible && rightClickActions.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      top: contextMenu.y,
+      left: contextMenu.x,
+      backgroundColor: '#fff',
+      border: '1px solid #ccc',
+      boxShadow: '0 2px 8px rgba(0,0,0,.15)',
+      zIndex: 9999,
+      minWidth: 160,
+      padding: 0,
+      borderRadius: 4
+    },
+    onContextMenu: e => e.preventDefault()
+  }, rightClickActions.map((action, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      padding: '8px 12px',
+      cursor: 'pointer',
+      borderBottom: i < rightClickActions.length - 1 ? '1px solid #eee' : 'none'
+    },
+    onClick: () => performContextMenuAction(action, contextMenu.row)
+  }, action.label || action.text || `Action ${i + 1}`))) : null;
+  const contextMenuModalMarkup = contextMenuModal.visible && contextMenuModal.component ? /*#__PURE__*/React.createElement(Modal.default, {
+    isOpen: true,
+    title: contextMenuModal.title || '',
+    onConfirm: () => setContextMenuModal({
+      visible: false,
+      title: '',
+      component: null
+    }),
+    onCancel: () => closeContextMenuModal(),
+    showConfirm: false,
+    showCancel: true,
+    cancelLabel: translate('cancel')
+  }, typeof contextMenuModal.component === 'function' ? /*#__PURE__*/React.createElement(contextMenuModal.component, {
+    row: contextMenu.row
+  }) : contextMenuModal.component) : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, tableMarkup, contextMenuMarkup, contextMenuModalMarkup);
 }
 function Table(props) {
   const {