@lensui/lens-table 0.1.4 → 0.1.5

package/dist/index.js

@@ -27,6 +27,7 @@ var ZH_CN_GRID_LABELS = {
   sortDesc: "\u5F53\u524D\uFF1A\u964D\u5E8F",
   sortBoth: "\u5347\u5E8F / \u964D\u5E8F",
   dragColumn: "\u62D6\u52A8\u5217\u6392\u5E8F",
+  revealSelectedCell: "\u5B9A\u4F4D\u5230\u9009\u4E2D\u5355\u5143\u683C",
   previousYear: "\u4E0A\u4E00\u5E74",
   nextYear: "\u4E0B\u4E00\u5E74",
   previousMonth: "\u4E0A\u4E2A\u6708",
@@ -95,6 +96,7 @@ var EN_US_GRID_LABELS = {
   sortDesc: "Current: descending",
   sortBoth: "Ascending / descending",
   dragColumn: "Drag column to reorder",
+  revealSelectedCell: "Reveal selected cell",
   previousYear: "Previous year",
   nextYear: "Next year",
   previousMonth: "Previous month",
@@ -303,7 +305,6 @@ function LoadingSpinnerIcon() {
 // src/components/editors/ChoiceEditor.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCancel }) {
-  const editorStyle = typeof style.width === "number" ? { ...style, width: Math.max(0, style.width - 1) } : style;
   const collection = createListCollection({
     items: options,
     itemToValue: (item) => item.value,
@@ -313,7 +314,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
     Select.Root,
     {
       className: "rvg-choice-editor",
-      style: editorStyle,
+      style,
       collection,
       value: value ? [value] : [],
       defaultOpen: true,
@@ -884,6 +885,7 @@ function paintGrid(options) {
   const leftFixedWidth = columns.reduce((value, column, index) => column.fixed === "left" ? value + metrics[index].width : value, 0);
   const rightFixedWidth = columns.reduce((value, column, index) => column.fixed === "right" ? value + metrics[index].width : value, 0);
   const rightFixedLeft = width - rightFixedWidth;
+  const rightFixedBoundaryInset = rightFixedWidth > 0 && !verticalBorderless ? 1 : 0;
   const leftOffsets = /* @__PURE__ */ new Map();
   let leftOffset = 0;
   for (let index = 0; index < columns.length; index += 1) {
@@ -1107,22 +1109,22 @@ function paintGrid(options) {
     const markerBottom = Math.min(bottom, height);
     const startX = getColumnX(columnStart);
     const endX = getColumnX(columnEnd) + metrics[columnEnd].width;
-    const visibleLeft = columns[columnStart].fixed === "left" ? Math.max(0, startX) : Math.max(leftFixedWidth - 1, startX);
+    const visibleLeft = columns[columnStart].fixed === "left" ? Math.max(0, startX) : Math.max(leftFixedWidth, startX);
     const visibleRight = columns[columnEnd].fixed === "right" ? Math.min(width, endX) : Math.min(rightFixedLeft, endX);
     ctx.fillStyle = colors.selection;
     if (markerBottom > markerTop) {
       if (columns[columnStart].fixed === void 0 && startX < leftFixedWidth) {
-        ctx.fillRect(Math.max(0, leftFixedWidth - 1), markerTop, 2, markerBottom - markerTop);
+        ctx.fillRect(Math.max(0, leftFixedWidth), markerTop, 2, markerBottom - markerTop);
       }
       if (columns[columnEnd].fixed === void 0 && endX > rightFixedLeft) {
-        ctx.fillRect(Math.max(0, rightFixedLeft - 1), markerTop, 2, markerBottom - markerTop);
+        ctx.fillRect(Math.max(0, rightFixedLeft - 2 - rightFixedBoundaryInset), markerTop, 2, markerBottom - markerTop);
       }
     }
     if (visibleRight > visibleLeft) {
       if (top < clipTop) ctx.fillRect(visibleLeft, clipTop, visibleRight - visibleLeft, 2);
       if (bottom > height) ctx.fillRect(visibleLeft, height - 2, visibleRight - visibleLeft, 2);
     } else if (top < clipTop || bottom > height) {
-      const markerX = endX <= leftFixedWidth ? Math.max(0, leftFixedWidth - 1) : Math.max(0, rightFixedLeft - 1);
+      const markerX = endX <= leftFixedWidth ? Math.max(0, leftFixedWidth) : Math.max(0, rightFixedLeft - 2 - rightFixedBoundaryInset);
       ctx.fillRect(markerX, top < clipTop ? clipTop : height - 2, 2, 2);
     }
   }
@@ -1144,15 +1146,15 @@ function paintGrid(options) {
       const visibleRight = x + selectionWidth;
       const visibleBottom = y + selectionHeight;
       const selectionTop = fixedHeader ? bodyTop : 0;
-      const selectionClipTop = fixedHeader ? Math.max(0, selectionTop - 1) : selectionTop;
+      const selectionClipTop = selectionTop;
       const hiddenAboveHeader = visibleBottom <= selectionTop;
       const hiddenBelowViewport = y >= height;
       const hiddenBehindLeft = !isFixed && visibleRight <= visibleLeft;
       const hiddenBehindRight = !isFixed && x >= selectionAreaRight;
-      const leftMarkerX = Math.max(0, leftFixedWidth - 1);
+      const leftMarkerX = Math.max(0, leftFixedWidth);
       if ((hiddenAboveHeader || hiddenBelowViewport) && (hiddenBehindLeft || hiddenBehindRight)) {
         const markerSize = 2;
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth;
+        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
         const markerY = hiddenAboveHeader ? selectionClipTop : height - markerSize;
         ctx.fillStyle = colors.selection;
         ctx.fillRect(markerX, markerY, markerSize, markerSize);
@@ -1160,7 +1162,7 @@ function paintGrid(options) {
       }
       ctx.save();
       ctx.beginPath();
-      const clipLeft = fixedSide === "left" ? 0 : Math.max(0, leftFixedWidth - 1);
+      const clipLeft = fixedSide === "left" ? 0 : Math.max(0, leftFixedWidth);
       const clipRight = Math.min(width, selectionAreaRight + 1);
       ctx.rect(clipLeft, selectionClipTop, clipRight - clipLeft, height - selectionClipTop);
       ctx.clip();
@@ -1178,14 +1180,14 @@ function paintGrid(options) {
       if (hiddenBehindLeft || hiddenBehindRight) {
         const markerTop = Math.max(y - borderWidth, selectionTop);
         const markerBottom = Math.min(y + selectionHeight + 1, height);
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth;
+        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
         ctx.fillRect(markerX, markerTop, borderWidth, Math.max(0, markerBottom - markerTop));
       }
       if (hiddenAboveHeader || hiddenBelowViewport || hiddenBehindLeft || hiddenBehindRight) {
         ctx.restore();
         return;
       }
-      const borderLeft = x <= 0 ? 0 : Math.max(x - borderWidth, visibleLeft - 1);
+      const borderLeft = x <= 0 ? 0 : Math.max(x - borderWidth, visibleLeft);
       const borderRight = Math.min(x + selectionWidth - 1, selectionAreaRight - borderWidth, width - borderWidth);
       const borderTop = Math.max(y - borderWidth, selectionClipTop);
       const borderBottom = Math.min(y + selectionHeight - 1, height - borderWidth);
@@ -1294,6 +1296,25 @@ var createEmptyCellSpanLookup = () => ({
   covered: /* @__PURE__ */ new Map(),
   maxRowSpan: 1
 });
+var summaryFunctionIds = /* @__PURE__ */ new WeakMap();
+var nextSummaryFunctionId = 1;
+function getSummaryFunctionId(fn) {
+  if (!fn) return "";
+  const existing = summaryFunctionIds.get(fn);
+  if (existing !== void 0) return existing;
+  const next = nextSummaryFunctionId;
+  nextSummaryFunctionId += 1;
+  summaryFunctionIds.set(fn, next);
+  return next;
+}
+function getSummarySignature(columns) {
+  return columns.filter((column) => Boolean(column.summary)).map((column) => [
+    column.key,
+    String(column.dataIndex ?? ""),
+    typeof column.summary === "function" ? getSummaryFunctionId(column.summary) : "sum",
+    getSummaryFunctionId(column.formatter)
+  ].join("
")).join("");
+}
 async function calculateSummaryValues(columns, rows) {
   const values = /* @__PURE__ */ new Map();
   for (const column of columns) {
@@ -1478,6 +1499,7 @@ function Table({
   const dragGuideRef = useRef2(null);
   const rowDragGuideRef = useRef2(null);
   const selectionFocusRef = useRef2(null);
+  const selectionEdgeTargetRef = useRef2(null);
   const verticalScrollbarRef = useRef2(null);
   const verticalScrollbarThumbRef = useRef2(null);
   const verticalScrollbarDragRef = useRef2(null);
@@ -1725,7 +1747,8 @@ function Table({
   const getScrollableColumnLeft = useCallback2((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
   const hasRowSelectionColumn = useMemo(() => columns.some((column) => column.rowSelection), [columns]);
   const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
-  const hasSummaryRow = useMemo(() => rows.length > 0 && summaryEnabled && columns.some((column) => Boolean(column.summary)), [columns, rows.length, summaryEnabled]);
+  const summarySignature = useMemo(() => getSummarySignature(columns), [columns]);
+  const hasSummaryRow = rows.length > 0 && summaryEnabled && summarySignature.length > 0;
   const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
   const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
   const bodyTop = headerHeight + topSummaryHeight;
@@ -1734,21 +1757,21 @@ function Table({
   const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
   const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
   const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight + topSummaryHeight : 0));
-  const [summaryState, setSummaryState] = useState4(() => ({ columns: null, rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
-  const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.columns !== columns || summaryState.rows !== rows);
-  const summaryValues = hasSummaryRow && summaryState.columns === columns && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
+  const [summaryState, setSummaryState] = useState4(() => ({ signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
+  const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.signature !== summarySignature || summaryState.rows !== rows);
+  const summaryValues = hasSummaryRow && summaryState.signature === summarySignature && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
   useEffect2(() => {
     let cancelled = false;
     if (!hasSummaryRow) {
-      setSummaryState((current) => current.columns === null && current.rows === null && current.values.size === 0 && !current.pending ? current : { columns: null, rows: null, values: /* @__PURE__ */ new Map(), pending: false });
+      setSummaryState((current) => current.signature === "" && current.rows === null && current.values.size === 0 && !current.pending ? current : { signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false });
       return () => {
         cancelled = true;
       };
     }
     setSummaryState((current) => ({
-      columns,
+      signature: summarySignature,
       rows,
-      values: current.columns === columns && current.rows === rows ? current.values : /* @__PURE__ */ new Map(),
+      values: current.signature === summarySignature && current.rows === rows ? current.values : /* @__PURE__ */ new Map(),
       pending: true
     }));
     if (loading) {
@@ -1761,13 +1784,13 @@ function Table({
       if (cancelled) return;
       const values = await calculateSummaryValues(columns, rows);
       if (cancelled) return;
-      setSummaryState({ columns, rows, values, pending: false });
+      setSummaryState({ signature: summarySignature, rows, values, pending: false });
     };
     void run();
     return () => {
       cancelled = true;
     };
-  }, [columns, hasSummaryRow, loading, rows]);
+  }, [hasSummaryRow, loading, rows, summarySignature]);
   const domRange = useMemo(() => {
     if (!isVirtualized) return { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
     const currentScroll2 = scrollRef.current;
@@ -1914,6 +1937,158 @@ function Table({
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
+  const drawImmediately = useCallback2(() => {
+    if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+    frameRef.current = null;
+    draw();
+  }, [draw]);
+  const getSelectionHorizontalVisibility = useCallback2((scrollLeft) => {
+    if (!selection || selectionRange) return "visible";
+    const column = columns[selection.columnIndex];
+    if (!column || column.fixed !== void 0) return "visible";
+    const span = getCellSpan(selection.rowIndex, selection.columnIndex);
+    const left = getScrollableColumnLeft(selection.columnIndex) - scrollLeft;
+    const right = left + getCellDisplayWidth(selection.columnIndex, span?.colSpan ?? 1);
+    if (right <= fixedWidth) return "hidden-left";
+    if (left >= viewport.width - rightFixedWidth) return "hidden-right";
+    return "visible";
+  }, [columns, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, rightFixedWidth, selection, selectionRange, viewport.width]);
+  const getSelectionEdgeIndicator = useCallback2((scrollLeft, scrollTop) => {
+    if (!selection || selectionRange) return null;
+    const row = rows[selection.rowIndex];
+    const metric = metrics[selection.columnIndex];
+    const column = columns[selection.columnIndex];
+    if (!row || !metric || !column || getRowKey(row, selection.rowIndex) !== selection.rowKey) return null;
+    const span = getCellSpan(selection.rowIndex, selection.columnIndex);
+    const rawLeft = column.fixed === "left" ? leftFixedOffsets.get(selection.columnIndex) ?? 0 : column.fixed === "right" ? viewport.width - (rightFixedOffsets.get(selection.columnIndex) ?? 0) - metric.width : getScrollableColumnLeft(selection.columnIndex) - scrollLeft;
+    const rawRight = rawLeft + getCellDisplayWidth(selection.columnIndex, span?.colSpan ?? 1);
+    const rawTop = bodyTop + selection.rowIndex * rowHeight - scrollTop;
+    const rawBottom = rawTop + rowHeight * (span?.rowSpan ?? 1);
+    const horizontalStart = column.fixed === void 0 ? fixedWidth : 0;
+    const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
+    const verticalStart = fixedHeader ? bodyTop : 0;
+    const hiddenLeft = column.fixed === void 0 && rawRight <= horizontalStart;
+    const hiddenRight = column.fixed === void 0 && rawLeft >= horizontalEnd;
+    const hiddenTop = rawBottom <= verticalStart;
+    const hiddenBottom = rawTop >= renderHeight;
+    if (!hiddenLeft && !hiddenRight && !hiddenTop && !hiddenBottom) return null;
+    const borderWidth = 2;
+    const cornerLength = 10;
+    const hitSlop = 6;
+    const targetSize = borderWidth + hitSlop * 2;
+    const rightBoundaryInset = rightFixedWidth > 0 && hasVerticalBorders ? 1 : 0;
+    const markerX = hiddenLeft ? horizontalStart : horizontalEnd - borderWidth - rightBoundaryInset;
+    const markerY = hiddenTop ? verticalStart : renderHeight - borderWidth;
+    if (hiddenLeft || hiddenRight) {
+      let markerTop = Math.max(rawTop - borderWidth, verticalStart);
+      let markerBottom = Math.min(rawBottom + 1, renderHeight);
+      const topClip = Math.max(0, verticalStart - (rawTop - borderWidth));
+      const bottomClip = Math.max(0, rawBottom + 1 - renderHeight);
+      if (topClip > 0 || bottomClip > 0) {
+        const foldAtTop = topClip > 0;
+        const fold = Math.min(cornerLength, foldAtTop ? topClip : bottomClip);
+        if (fold > borderWidth) {
+          const cornerWidth = fold;
+          const cornerHeight = Math.max(cornerLength, markerBottom - markerTop);
+          const cornerOnLeft = hiddenLeft;
+          const shapeLeft = cornerOnLeft ? markerX : markerX + borderWidth - cornerWidth;
+          const shapeTop = foldAtTop ? verticalStart : renderHeight - cornerHeight;
+          return {
+            side: `${foldAtTop ? "top" : "bottom"}-${cornerOnLeft ? "left" : "right"}`,
+            orientation: "corner",
+            style: {
+              left: shapeLeft - hitSlop,
+              top: shapeTop - hitSlop,
+              width: cornerWidth + hitSlop * 2,
+              height: cornerHeight + hitSlop * 2
+            },
+            corner: { width: cornerWidth, height: cornerHeight }
+          };
+        }
+      }
+      if (markerBottom <= markerTop) return null;
+      return {
+        side: hiddenLeft ? "left" : "right",
+        orientation: "vertical",
+        viewportEdge: hiddenLeft && horizontalStart === 0 ? "left" : hiddenRight && horizontalEnd === viewport.width ? "right" : void 0,
+        style: {
+          left: markerX - hitSlop,
+          top: markerTop,
+          width: targetSize,
+          height: markerBottom - markerTop
+        }
+      };
+    }
+    const horizontalMarkerEnd = horizontalEnd - rightBoundaryInset;
+    let markerLeft = Math.max(rawLeft - borderWidth, horizontalStart);
+    let markerRight = Math.min(rawRight + 1, horizontalMarkerEnd);
+    const leftClip = Math.max(0, horizontalStart - (rawLeft - borderWidth));
+    const rightClip = Math.max(0, rawRight + 1 - horizontalMarkerEnd);
+    if (leftClip > 0 || rightClip > 0) {
+      const foldAtLeft = leftClip > 0;
+      const fold = Math.min(cornerLength, foldAtLeft ? leftClip : rightClip);
+      if (fold > borderWidth) {
+        const cornerWidth = Math.max(cornerLength, markerRight - markerLeft);
+        const cornerHeight = fold;
+        const shapeLeft = foldAtLeft ? horizontalStart : horizontalMarkerEnd - cornerWidth;
+        const shapeTop = hiddenTop ? verticalStart : renderHeight - cornerHeight;
+        return {
+          side: `${hiddenTop ? "top" : "bottom"}-${foldAtLeft ? "left" : "right"}`,
+          orientation: "corner",
+          style: {
+            left: shapeLeft - hitSlop,
+            top: shapeTop - hitSlop,
+            width: cornerWidth + hitSlop * 2,
+            height: cornerHeight + hitSlop * 2
+          },
+          corner: { width: cornerWidth, height: cornerHeight }
+        };
+      }
+    }
+    if (markerRight <= markerLeft) return null;
+    return {
+      side: hiddenTop ? "top" : "bottom",
+      orientation: "horizontal",
+      viewportEdge: hiddenTop && verticalStart === 0 ? "top" : hiddenBottom ? "bottom" : void 0,
+      style: {
+        left: markerLeft,
+        top: markerY - hitSlop,
+        width: markerRight - markerLeft,
+        height: targetSize
+      }
+    };
+  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, hasVerticalBorders, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
+  const syncSelectionEdgeTarget = useCallback2((scrollLeft, scrollTop) => {
+    const target = selectionEdgeTargetRef.current;
+    if (!target) return;
+    const indicator = getSelectionEdgeIndicator(scrollLeft, scrollTop);
+    if (!indicator) {
+      target.style.visibility = "hidden";
+      return;
+    }
+    const orientationChanged = !target.classList.contains(`is-${indicator.orientation}`);
+    target.className = `rvg-selection-edge-target is-${indicator.orientation} is-${indicator.side}${indicator.viewportEdge ? ` is-viewport-${indicator.viewportEdge}` : ""}${orientationChanged ? " is-shape-syncing" : ""}`;
+    target.style.left = `${Number(indicator.style.left)}px`;
+    target.style.top = `${Number(indicator.style.top)}px`;
+    target.style.width = `${Number(indicator.style.width)}px`;
+    target.style.height = `${Number(indicator.style.height)}px`;
+    if (indicator.corner) {
+      target.style.setProperty("--rvg-corner-width", `${indicator.corner.width}px`);
+      target.style.setProperty("--rvg-corner-height", `${indicator.corner.height}px`);
+      target.style.setProperty("--rvg-corner-hover-width-extension", "4px");
+      target.style.setProperty("--rvg-corner-hover-height-extension", "4px");
+    } else {
+      target.style.removeProperty("--rvg-corner-width");
+      target.style.removeProperty("--rvg-corner-height");
+      target.style.removeProperty("--rvg-corner-hover-width-extension");
+      target.style.removeProperty("--rvg-corner-hover-height-extension");
+    }
+    target.style.visibility = "visible";
+    if (orientationChanged) {
+      void target.offsetWidth;
+      target.classList.remove("is-shape-syncing");
+    }
+  }, [getSelectionEdgeIndicator]);
   useLayoutEffect2(() => {
     const element = scrollerRef.current;
     if (!element) return;
@@ -2164,7 +2339,13 @@ function Table({
     }
     const nextThumbLeft = Math.max(0, Math.min(trackWidth - thumbWidth, event.clientX - trackRect.left - thumbWidth / 2));
     const maxThumbLeft = Math.max(1, trackWidth - thumbWidth);
-    scroller.scrollLeft = nextThumbLeft / maxThumbLeft * maxScrollLeft;
+    const previousScrollLeft = scroller.scrollLeft;
+    const nextScrollLeft = nextThumbLeft / maxThumbLeft * maxScrollLeft;
+    const visibilityChanged = getSelectionHorizontalVisibility(previousScrollLeft) !== getSelectionHorizontalVisibility(nextScrollLeft);
+    scroller.scrollLeft = nextScrollLeft;
+    scrollRef.current = { left: scroller.scrollLeft, top: scroller.scrollTop };
+    syncSelectionEdgeTarget(scroller.scrollLeft, scroller.scrollTop);
+    if (visibilityChanged) drawImmediately();
     updateCustomScrollbars();
     horizontalScrollbarDragRef.current = {
       pointerId: event.pointerId,
@@ -2174,7 +2355,7 @@ function Table({
       thumbWidth,
       maxScrollLeft
     };
-  }, [showCustomScrollbar, updateCustomScrollbars]);
+  }, [drawImmediately, getSelectionHorizontalVisibility, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars]);
   const handleHorizontalScrollbarPointerMove = useCallback2((event) => {
     const drag = horizontalScrollbarDragRef.current;
     const scroller = scrollerRef.current;
@@ -2182,9 +2363,15 @@ function Table({
     event.preventDefault();
     const maxThumbLeft = Math.max(1, drag.trackWidth - drag.thumbWidth);
     const nextThumbLeft = Math.max(0, Math.min(maxThumbLeft, drag.startLeft + event.clientX - drag.startX));
-    scroller.scrollLeft = nextThumbLeft / maxThumbLeft * drag.maxScrollLeft;
+    const previousScrollLeft = scroller.scrollLeft;
+    const nextScrollLeft = nextThumbLeft / maxThumbLeft * drag.maxScrollLeft;
+    const visibilityChanged = getSelectionHorizontalVisibility(previousScrollLeft) !== getSelectionHorizontalVisibility(nextScrollLeft);
+    scroller.scrollLeft = nextScrollLeft;
+    scrollRef.current = { left: scroller.scrollLeft, top: scroller.scrollTop };
+    syncSelectionEdgeTarget(scroller.scrollLeft, scroller.scrollTop);
+    if (visibilityChanged) drawImmediately();
     updateCustomScrollbars();
-  }, [updateCustomScrollbars]);
+  }, [drawImmediately, getSelectionHorizontalVisibility, syncSelectionEdgeTarget, updateCustomScrollbars]);
   const handleHorizontalScrollbarPointerUp = useCallback2((event) => {
     const drag = horizontalScrollbarDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -2199,6 +2386,7 @@ function Table({
     const scrollDeltaX = element.scrollLeft - previousScroll.left;
     const scrollDeltaY = element.scrollTop - previousScroll.top;
     scrollRef.current = { left: element.scrollLeft, top: element.scrollTop };
+    syncSelectionEdgeTarget(element.scrollLeft, element.scrollTop);
     const focus = selectionFocusRef.current;
     if (focus && selection && !selectionRange) {
       const row = rows[selection.rowIndex];
@@ -2220,9 +2408,9 @@ function Table({
           focus.style.display = "none";
         } else {
           const borderWidth = 2;
-          const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart - 1));
+          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 - 1));
+          const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
           const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
           focus.style.display = "block";
           focus.style.left = `${left}px`;
@@ -2252,7 +2440,7 @@ function Table({
     setHoveredCellTooltip(null);
     scheduleDraw();
     setEditing(null);
-  }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, showCustomScrollbar, updateCustomScrollbars, viewport.width]);
+  }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars, viewport.width]);
   const locateColumn = useCallback2((clientX) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
@@ -2340,6 +2528,30 @@ function Table({
     return fixedSide === "left" ? leftFixedOffsets.get(cell.startIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(cell.startIndex) ?? 0) - startMetric.width : getScrollableColumnLeft(cell.startIndex) - scrollRef.current.left;
   }, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
   const getHeaderCellWidth = useCallback2((cell) => cell.leaf ? metrics[cell.startIndex]?.width ?? 0 : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1), [getCellDisplayWidth, metrics]);
+  const getHeaderCellEdgeFromMetrics = useCallback2((startIndex, endIndex, edge, nextMetrics) => {
+    const fixedSide = columns[startIndex]?.fixed;
+    const width2 = nextMetrics.slice(startIndex, endIndex + 1).reduce((total, metric) => total + metric.width, 0);
+    let left;
+    if (fixedSide === "left") {
+      left = 0;
+      for (let index = 0; index < startIndex; index += 1) {
+        if (columns[index].fixed === "left") left += nextMetrics[index]?.width ?? 0;
+      }
+    } else if (fixedSide === "right") {
+      let rightOffset = 0;
+      for (let index = columns.length - 1; index > startIndex; index -= 1) {
+        if (columns[index].fixed === "right") rightOffset += nextMetrics[index]?.width ?? 0;
+      }
+      left = viewport.width - rightOffset - width2;
+    } else {
+      left = 0;
+      for (let index = 0; index < startIndex; index += 1) {
+        if (columns[index].fixed === void 0) left += nextMetrics[index]?.width ?? 0;
+      }
+      left += fixedWidth - scrollRef.current.left;
+    }
+    return left + (edge === "right" ? width2 : 0);
+  }, [columns, fixedWidth, viewport.width]);
   const locateHeaderResizeHit = useCallback2((clientX, clientY) => {
     if (!columnResizable || !canvasRef.current) return null;
     const rect = canvasRef.current.getBoundingClientRect();
@@ -2350,6 +2562,7 @@ function Table({
     const level = getHeaderLevelAtY(localY, headerY);
     let closest = null;
     let distance = 6;
+    let priority = -1;
     for (const cell of headerCells) {
       if (cell.level !== level) continue;
       if (columns[cell.startIndex]?.rowSelection || columns[cell.startIndex]?.rowDragHandle || columns[cell.startIndex]?.rowNumber) continue;
@@ -2357,8 +2570,10 @@ function Table({
       const edge = fixedSide === "right" && cell.leaf ? "left" : "right";
       const edgeX = getHeaderCellLeft(cell) + (edge === "right" ? getHeaderCellWidth(cell) : 0);
       const nextDistance = Math.abs(localX - edgeX);
-      if (nextDistance < distance) {
+      const nextPriority = fixedSide === "right" ? 2 : fixedSide === "left" ? 1 : 0;
+      if (nextDistance < distance || nextDistance === distance && nextPriority > priority) {
         distance = nextDistance;
+        priority = nextPriority;
         closest = { cell, edge };
       }
     }
@@ -2570,6 +2785,10 @@ function Table({
         columnDragPreviewRef.current = { sourceIndex, targetIndex: destinationIndex };
         const targetLeft = Number(target?.targetLeft);
         const targetWidth = Number(target?.targetWidth);
+        if (!Number.isFinite(targetLeft) || !Number.isFinite(targetWidth)) {
+          setDragGuide(null);
+          return;
+        }
         const guideTop = headerRowOffsets[Number(source.data.headerLevel)] ?? 0;
         setDragGuide(edge === "right" ? targetLeft + targetWidth : targetLeft, guideTop);
       },
@@ -2967,18 +3186,28 @@ function Table({
   const editorStyle = useMemo(() => {
     if (!editing) return void 0;
     const metric = metrics[editing.columnIndex];
-    const fixedSide = columns[editing.columnIndex].fixed;
+    const column = columns[editing.columnIndex];
+    if (!metric || !column) return void 0;
+    const fixedSide = column.fixed;
     const span = getCellSpan(editing.rowIndex, editing.columnIndex);
     const cellWidth = getCellDisplayWidth(editing.columnIndex, span?.colSpan ?? 1);
     const cellHeight = rowHeight * (span?.rowSpan ?? 1);
     const cellLeft = fixedSide === "left" ? leftFixedOffsets.get(editing.columnIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(editing.columnIndex) ?? 0) - metric.width : getScrollableColumnLeft(editing.columnIndex) - scrollRef.current.left;
+    const cellTop = bodyTop + editing.rowIndex * rowHeight - scrollRef.current.top;
+    const horizontalStart = fixedSide === void 0 ? fixedWidth : 0;
+    const horizontalEnd = fixedSide === void 0 ? viewport.width - rightFixedWidth : viewport.width;
+    const verticalStart = fixedHeader ? bodyTop : 0;
+    const visibleLeft = Math.max(cellLeft, horizontalStart);
+    const visibleRight = Math.min(cellLeft + cellWidth, horizontalEnd, viewport.width);
+    const visibleTop = Math.max(cellTop, verticalStart);
+    const visibleBottom = Math.min(cellTop + cellHeight, renderHeight);
     return {
-      left: (fixedSide ? cellLeft : Math.max(cellLeft, fixedWidth)) + 1,
-      top: Math.max(fixedHeader ? bodyTop : 0, bodyTop + editing.rowIndex * rowHeight - scrollRef.current.top) + 1,
-      width: cellWidth - 2,
-      height: cellHeight - 2
+      left: visibleLeft,
+      top: visibleTop,
+      width: Math.max(0, visibleRight - visibleLeft),
+      height: Math.max(0, visibleBottom - visibleTop)
     };
-  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, rowHeight, viewport.width]);
+  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, viewport.width]);
   const handleColumnPointerDown = useCallback2((event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const localY = event.clientY - rect.top;
@@ -2998,9 +3227,10 @@ function Table({
         columnIndex: resizeIndex,
         startX: event.clientX,
         startWidth: startWidths.reduce((total, width2) => total + width2, 0),
-        startGuideX,
         guideTop: headerRowOffsets[resizeCell.level] ?? 0,
         resizeEdge,
+        resizeStartIndex: resizeCell.startIndex,
+        resizeEndIndex: resizeCell.endIndex,
         resizeIndices,
         startWidths
       };
@@ -3017,6 +3247,12 @@ function Table({
     const minWidth = getMinimumColumnWidth(column, columnDraggable);
     const pointerDelta = Math.round(event.clientX - drag.startX);
     const delta = drag.resizeEdge === "left" ? -pointerDelta : pointerDelta;
+    const setGuideFromWidths = (nextWidths) => {
+      const widthByIndex = new Map(drag.resizeIndices.map((columnIndex, index) => [columnIndex, nextWidths[index]]));
+      const nextColumns = columns.map((column2, index) => widthByIndex.has(index) ? { ...column2, width: widthByIndex.get(index) } : column2);
+      const nextMetrics = buildColumnMetrics(nextColumns, { columnDraggable, viewportWidth: viewport.width });
+      setResizeGuideX(getHeaderCellEdgeFromMetrics(drag.resizeStartIndex, drag.resizeEndIndex, drag.resizeEdge, nextMetrics));
+    };
     if (drag.resizeIndices.length > 1) {
       const minWidths = drag.resizeIndices.map((index) => getMinimumColumnWidth(columns[index], columnDraggable));
       const minTotalWidth = minWidths.reduce((total, width3) => total + width3, 0);
@@ -3033,13 +3269,13 @@ function Table({
       drag.resizeIndices.forEach((columnIndex, index) => {
         resizeColumn(columns[columnIndex].key, nextWidths[index]);
       });
-      setResizeGuideX(drag.startGuideX + (drag.resizeEdge === "left" ? drag.startWidth - targetTotalWidth : targetTotalWidth - drag.startWidth));
+      setGuideFromWidths(nextWidths);
       return;
     }
     const width2 = Math.max(minWidth, Math.round(drag.startWidth + delta));
     resizeColumn(column.key, width2);
-    setResizeGuideX(drag.startGuideX + (drag.resizeEdge === "left" ? drag.startWidth - width2 : width2 - drag.startWidth));
-  }, [columnDraggable, columns, resizeColumn]);
+    setGuideFromWidths([width2]);
+  }, [columnDraggable, columns, getHeaderCellEdgeFromMetrics, resizeColumn, viewport.width]);
   const handleColumnPointerUp = useCallback2((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
@@ -3620,9 +3856,9 @@ function Table({
     const verticalStart = fixedHeader ? bodyTop : 0;
     if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) return null;
     const borderWidth = 2;
-    const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart - 1));
+    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 - 1));
+    const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
     const bottom = Math.round(Math.min(rawBottom + 1, renderHeight));
     return {
       left,
@@ -3631,6 +3867,19 @@ function Table({
       height: Math.max(0, bottom - top)
     };
   })();
+  const selectionEdgeIndicator = getSelectionEdgeIndicator(scrollPosition.left, scrollPosition.top);
+  const selectionEdgeStyle = selectionEdgeIndicator ? {
+    ...selectionEdgeIndicator.style,
+    ...selectionEdgeIndicator.corner ? {
+      "--rvg-corner-width": `${selectionEdgeIndicator.corner.width}px`,
+      "--rvg-corner-height": `${selectionEdgeIndicator.corner.height}px`,
+      "--rvg-corner-hover-width-extension": "4px",
+      "--rvg-corner-hover-height-extension": "4px"
+    } : null
+  } : void 0;
+  useLayoutEffect2(() => {
+    syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
+  }, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
   const handleContextMenu = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -4078,6 +4327,27 @@ function Table({
       }
     ),
     selectionOutlineStyle && /* @__PURE__ */ jsx7("div", { ref: selectionFocusRef, className: "rvg-selection-focus", style: selectionOutlineStyle, "aria-hidden": "true" }),
+    selectionEdgeIndicator && selection && /* @__PURE__ */ jsx7(
+      "button",
+      {
+        ref: selectionEdgeTargetRef,
+        type: "button",
+        className: `rvg-selection-edge-target is-${selectionEdgeIndicator.orientation} is-${selectionEdgeIndicator.side}${selectionEdgeIndicator.viewportEdge ? ` is-viewport-${selectionEdgeIndicator.viewportEdge}` : ""}`,
+        style: selectionEdgeStyle,
+        "aria-label": labels.revealSelectedCell,
+        title: labels.revealSelectedCell,
+        onPointerDown: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onClick: (event) => {
+          event.stopPropagation();
+          scrollerRef.current?.focus({ preventScroll: true });
+          revealCell(selection);
+        },
+        children: /* @__PURE__ */ jsx7("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx7("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })
+      }
+    ),
     contextMenu && /* @__PURE__ */ jsx7("div", { ref: contextMenuRef, className: "rvg-context-menu", role: "menu", style: { left: contextMenu.left, top: contextMenu.top }, children: contextMenu.type === "header" ? (() => {
       const column = columns[contextMenu.columnIndex];
       const headerContext = { column, columnIndex: contextMenu.columnIndex };
@@ -4402,8 +4672,8 @@ function Table({
           column.key
         );
       }) }, rowIndex)),
-      fixedWidth > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
-      rightFixedWidth > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
+      fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx7("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
+      rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx7("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
     ] }),
     loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */ jsx7("div", { className: "rvg-refresh-loading", "aria-label": labels.refreshing, children: /* @__PURE__ */ jsx7(LoadingSpinnerIcon, {}) })
   ] });

package/package.json

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