@lensui/lens-table 0.1.19 → 0.1.20

package/dist/index.cjs

@@ -1911,6 +1911,7 @@ function TableInner({
   const [toast, setToast] = (0, import_react5.useState)(null);
   const [resizeGuideX, setResizeGuideX] = (0, import_react5.useState)(null);
   const [resizeGuideTop, setResizeGuideTop] = (0, import_react5.useState)(0);
+  const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] = (0, import_react5.useState)(null);
   const [hoveredHeaderAction, setHoveredHeaderAction] = (0, import_react5.useState)(null);
   const [visibleHeaderTooltip, setVisibleHeaderTooltip] = (0, import_react5.useState)(null);
   const [hoveredCellTooltip, setHoveredCellTooltip] = (0, import_react5.useState)(null);
@@ -2816,7 +2817,7 @@ function TableInner({
           const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
           const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
           const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-          const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
+          const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -3824,6 +3825,7 @@ function TableInner({
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
     const isAxisSelected = selectedColumnKeySet.has(column.key);
     const selectedClassName = isAxisSelected ? " is-axis-selected" : "";
+    const hoveredColumnClassName = hoveredHeaderColumnIndex === columnIndex ? " is-header-hovered" : "";
     const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
     let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
@@ -3831,21 +3833,21 @@ function TableInner({
     if (visibleActions.drag) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
       );
     }
     if (visibleActions.sort) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hoveredColumnClassName}${direction ? " is-active" : ""}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
       );
       right -= headerActionSlotWidth;
     }
     if (visibleActions.filter) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
       icons.push(
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
       );
     }
     return icons;
@@ -4383,7 +4385,7 @@ function TableInner({
     const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
     const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
     const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-    const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
+    const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
     return {
       left,
       top,
@@ -4635,6 +4637,8 @@ function TableInner({
             const columnIndex = locateColumn(event.clientX);
             const inHeader = localY >= headerY && localY < headerY + headerHeight;
             const inLeafHeader = inHeader && localY >= headerY + headerLeafTop;
+            const nextHoveredHeaderColumnIndex = inLeafHeader && columnIndex >= 0 ? columnIndex : null;
+            setHoveredHeaderColumnIndex((current) => current === nextHoveredHeaderColumnIndex ? current : nextHoveredHeaderColumnIndex);
             const hoveredHeaderCell = inHeader ? locateHeaderCell(event.clientX, event.clientY) : null;
             const hoveredAction = inLeafHeader ? locateHeaderAction(event.clientX, columnIndex) : null;
             const hoveredDragHandle = Boolean(hoveredHeaderCell && locateHeaderCellDragHandle(event.clientX, hoveredHeaderCell));
@@ -4720,6 +4724,7 @@ function TableInner({
           },
           onMouseLeave: (event) => {
             event.currentTarget.style.cursor = "default";
+            setHoveredHeaderColumnIndex(null);
             showCellTooltip(null);
             showHeaderTooltipAfterDelay(null);
             if (hoveredHeaderActionRef.current) {

package/dist/index.css

@@ -853,7 +853,12 @@
   width: var(--rvg-header-action-size, 14px);
   height: var(--rvg-header-action-size, 14px);
   overflow: visible;
+  opacity: 0;
   color: var(--rvg-color-icon);
+  transition: opacity 120ms ease, color 120ms ease;
+}
+.rvg-header-icon.is-header-hovered {
+  opacity: 1;
 }
 .rvg-header-icon.is-hovered {
   color: var(--rvg-color-muted);
@@ -864,6 +869,7 @@
   color: var(--rvg-color-axis-selection-text);
 }
 .rvg-root.is-initial-loading .rvg-header-icon {
+  opacity: 1;
   color: #d6dbe0;
   animation: rvg-loading-icon-pulse 1.15s ease-in-out infinite alternate;
 }

package/dist/index.js

@@ -1881,6 +1881,7 @@ function TableInner({
   const [toast, setToast] = useState4(null);
   const [resizeGuideX, setResizeGuideX] = useState4(null);
   const [resizeGuideTop, setResizeGuideTop] = useState4(0);
+  const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] = useState4(null);
   const [hoveredHeaderAction, setHoveredHeaderAction] = useState4(null);
   const [visibleHeaderTooltip, setVisibleHeaderTooltip] = useState4(null);
   const [hoveredCellTooltip, setHoveredCellTooltip] = useState4(null);
@@ -2786,7 +2787,7 @@ function TableInner({
           const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
           const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
           const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-          const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
+          const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -3794,6 +3795,7 @@ function TableInner({
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
     const isAxisSelected = selectedColumnKeySet.has(column.key);
     const selectedClassName = isAxisSelected ? " is-axis-selected" : "";
+    const hoveredColumnClassName = hoveredHeaderColumnIndex === columnIndex ? " is-header-hovered" : "";
     const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
     let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
@@ -3801,21 +3803,21 @@ function TableInner({
     if (visibleActions.drag) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
+        /* @__PURE__ */ jsx7(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
       );
     }
     if (visibleActions.sort) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
       const direction = sortState?.columnKey === column.key ? sortState.direction : null;
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
+        /* @__PURE__ */ jsx7(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hoveredColumnClassName}${direction ? " is-active" : ""}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
       );
       right -= headerActionSlotWidth;
     }
     if (visibleActions.filter) {
       const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
       icons.push(
-        /* @__PURE__ */ jsx7(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
+        /* @__PURE__ */ jsx7(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
       );
     }
     return icons;
@@ -4353,7 +4355,7 @@ function TableInner({
     const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
     const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
     const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-    const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
+    const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
     return {
       left,
       top,
@@ -4605,6 +4607,8 @@ function TableInner({
             const columnIndex = locateColumn(event.clientX);
             const inHeader = localY >= headerY && localY < headerY + headerHeight;
             const inLeafHeader = inHeader && localY >= headerY + headerLeafTop;
+            const nextHoveredHeaderColumnIndex = inLeafHeader && columnIndex >= 0 ? columnIndex : null;
+            setHoveredHeaderColumnIndex((current) => current === nextHoveredHeaderColumnIndex ? current : nextHoveredHeaderColumnIndex);
             const hoveredHeaderCell = inHeader ? locateHeaderCell(event.clientX, event.clientY) : null;
             const hoveredAction = inLeafHeader ? locateHeaderAction(event.clientX, columnIndex) : null;
             const hoveredDragHandle = Boolean(hoveredHeaderCell && locateHeaderCellDragHandle(event.clientX, hoveredHeaderCell));
@@ -4690,6 +4694,7 @@ function TableInner({
           },
           onMouseLeave: (event) => {
             event.currentTarget.style.cursor = "default";
+            setHoveredHeaderColumnIndex(null);
             showCellTooltip(null);
             showHeaderTooltipAfterDelay(null);
             if (hoveredHeaderActionRef.current) {

package/package.json

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