@lensui/lens-table 0.1.44 → 0.1.46

package/dist/index.cjs

@@ -3847,6 +3847,7 @@ function TableInner({
     const rowTop = (fixedHeader ? 0 : -scrollPosition.top) + (headerRowOffsets[level] ?? 0);
     const rowHeight2 = headerRowHeights[level] ?? baseHeaderHeight;
     let anchorX = cellLeft + cellWidth / 2;
+    let anchorY = rowTop + rowHeight2 / 2;
     let anchorLeft = cellLeft;
     let label = column.title;
     if (action === "title") {
@@ -3870,8 +3871,10 @@ function TableInner({
         anchorX = anchorLeft + textWidth;
       }
     } else if (action === "drag") {
-      anchorX = cellLeft + cellWidth;
+      const right = cellLeft + cellWidth - headerActionSlotWidth;
+      anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
+      anchorY = rowTop + headerLeafTop + (column.renderHeader ? 8 + Math.max(0, (16 - headerActionSize) / 2) : (headerLeafHeight - headerActionSize) / 2) + headerActionSize / 2;
       label = labels.dragColumn;
     } else if (action === "sort") {
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
@@ -3880,6 +3883,7 @@ function TableInner({
       const right = cellLeft + cellWidth - (visibleActions.drag ? headerActionSlotWidth : 2);
       anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
+      anchorY = rowTop + headerLeafTop + (column.renderHeader ? 8 + Math.max(0, (16 - headerActionSize) / 2) : (headerLeafHeight - headerActionSize) / 2) + headerActionSize / 2;
     } else if (action === "filter") {
       const value = filterValues[column.key];
       label = value ? labels.filterWithValue(value) : labels.filter;
@@ -3888,18 +3892,21 @@ function TableInner({
       if (visibleActions.sort) right -= headerActionSlotWidth;
       anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
+      anchorY = rowTop + headerLeafTop + (column.renderHeader ? 8 + Math.max(0, (16 - headerActionSize) / 2) : (headerLeafHeight - headerActionSize) / 2) + headerActionSize / 2 + 1;
     }
-    const placement = anchorX + 328 > viewport.width ? "left" : "right";
+    const isActionTooltip = action === "drag" || action === "sort" || action === "filter";
+    const horizontalPlacement = anchorX + 328 > viewport.width ? "left" : "right";
+    const placement = isActionTooltip ? "above" : horizontalPlacement;
     return {
       key: `${action}:${cell ? `cell:${cell.key}:${cell.level}` : `column:${column.key}`}:${Math.round(anchorX)}:${Math.round(rowTop)}`,
       columnIndex,
       action,
-      left: placement === "right" ? anchorX + 8 : Math.max(8, anchorLeft - 8),
-      top: rowTop + rowHeight2 / 2,
+      left: placement === "above" ? anchorX : placement === "right" ? anchorX + 8 : Math.max(8, anchorLeft - 8),
+      top: placement === "above" ? anchorY - 8 : anchorY,
       label,
       placement
     };
-  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
+  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSize, headerActionSlotWidth, headerDepth, headerLeafHeight, headerLeafTop, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
   const isPointerOnHeaderTitle = (0, import_react5.useCallback)((clientX, clientY, cell) => {
     const canvas = canvasRef.current;
     if (!canvas) return false;

package/dist/index.css

@@ -954,6 +954,18 @@
   right: -4px;
   border-left: 5px solid var(--rvg-color-tooltip-bg);
 }
+.rvg-header-tooltip.is-above {
+  transform: translate(-50%, -100%);
+}
+.rvg-header-tooltip.is-above::after {
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--rvg-color-tooltip-bg);
+  border-bottom: 0;
+  border-left: 5px solid transparent;
+}
 .rvg-header-tooltip.is-below,
 .rvg-cell-tooltip.is-below {
   transform: none;

package/dist/index.js

@@ -3817,6 +3817,7 @@ function TableInner({
     const rowTop = (fixedHeader ? 0 : -scrollPosition.top) + (headerRowOffsets[level] ?? 0);
     const rowHeight2 = headerRowHeights[level] ?? baseHeaderHeight;
     let anchorX = cellLeft + cellWidth / 2;
+    let anchorY = rowTop + rowHeight2 / 2;
     let anchorLeft = cellLeft;
     let label = column.title;
     if (action === "title") {
@@ -3840,8 +3841,10 @@ function TableInner({
         anchorX = anchorLeft + textWidth;
       }
     } else if (action === "drag") {
-      anchorX = cellLeft + cellWidth;
+      const right = cellLeft + cellWidth - headerActionSlotWidth;
+      anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
+      anchorY = rowTop + headerLeafTop + (column.renderHeader ? 8 + Math.max(0, (16 - headerActionSize) / 2) : (headerLeafHeight - headerActionSize) / 2) + headerActionSize / 2;
       label = labels.dragColumn;
     } else if (action === "sort") {
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
@@ -3850,6 +3853,7 @@ function TableInner({
       const right = cellLeft + cellWidth - (visibleActions.drag ? headerActionSlotWidth : 2);
       anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
+      anchorY = rowTop + headerLeafTop + (column.renderHeader ? 8 + Math.max(0, (16 - headerActionSize) / 2) : (headerLeafHeight - headerActionSize) / 2) + headerActionSize / 2;
     } else if (action === "filter") {
       const value = filterValues[column.key];
       label = value ? labels.filterWithValue(value) : labels.filter;
@@ -3858,18 +3862,21 @@ function TableInner({
       if (visibleActions.sort) right -= headerActionSlotWidth;
       anchorX = right - headerActionSlotWidth / 2;
       anchorLeft = anchorX;
+      anchorY = rowTop + headerLeafTop + (column.renderHeader ? 8 + Math.max(0, (16 - headerActionSize) / 2) : (headerLeafHeight - headerActionSize) / 2) + headerActionSize / 2 + 1;
     }
-    const placement = anchorX + 328 > viewport.width ? "left" : "right";
+    const isActionTooltip = action === "drag" || action === "sort" || action === "filter";
+    const horizontalPlacement = anchorX + 328 > viewport.width ? "left" : "right";
+    const placement = isActionTooltip ? "above" : horizontalPlacement;
     return {
       key: `${action}:${cell ? `cell:${cell.key}:${cell.level}` : `column:${column.key}`}:${Math.round(anchorX)}:${Math.round(rowTop)}`,
       columnIndex,
       action,
-      left: placement === "right" ? anchorX + 8 : Math.max(8, anchorLeft - 8),
-      top: rowTop + rowHeight2 / 2,
+      left: placement === "above" ? anchorX : placement === "right" ? anchorX + 8 : Math.max(8, anchorLeft - 8),
+      top: placement === "above" ? anchorY - 8 : anchorY,
       label,
       placement
     };
-  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerDepth, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
+  }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSize, headerActionSlotWidth, headerDepth, headerLeafHeight, headerLeafTop, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
   const isPointerOnHeaderTitle = useCallback2((clientX, clientY, cell) => {
     const canvas = canvasRef.current;
     if (!canvas) return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",