@lensui/lens-table 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -57,6 +57,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",
@@ -125,6 +126,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",
@@ -333,7 +335,6 @@ function LoadingSpinnerIcon() {
 // src/components/editors/ChoiceEditor.tsx
 var import_jsx_runtime3 = require("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 = (0, import_select.createListCollection)({
     items: options,
     itemToValue: (item) => item.value,
@@ -343,7 +344,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
     import_select.Select.Root,
     {
       className: "rvg-choice-editor",
-      style: editorStyle,
+      style,
       collection,
       value: value ? [value] : [],
       defaultOpen: true,
@@ -914,6 +915,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) {
@@ -1137,22 +1139,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);
     }
   }
@@ -1174,15 +1176,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);
@@ -1190,7 +1192,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();
@@ -1208,14 +1210,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);
@@ -1324,6 +1326,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) {
@@ -1508,6 +1529,7 @@ function Table({
   const dragGuideRef = (0, import_react5.useRef)(null);
   const rowDragGuideRef = (0, import_react5.useRef)(null);
   const selectionFocusRef = (0, import_react5.useRef)(null);
+  const selectionEdgeTargetRef = (0, import_react5.useRef)(null);
   const verticalScrollbarRef = (0, import_react5.useRef)(null);
   const verticalScrollbarThumbRef = (0, import_react5.useRef)(null);
   const verticalScrollbarDragRef = (0, import_react5.useRef)(null);
@@ -1755,7 +1777,8 @@ function Table({
   const getScrollableColumnLeft = (0, import_react5.useCallback)((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
   const hasRowSelectionColumn = (0, import_react5.useMemo)(() => columns.some((column) => column.rowSelection), [columns]);
   const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
-  const hasSummaryRow = (0, import_react5.useMemo)(() => rows.length > 0 && summaryEnabled && columns.some((column) => Boolean(column.summary)), [columns, rows.length, summaryEnabled]);
+  const summarySignature = (0, import_react5.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;
@@ -1764,21 +1787,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] = (0, import_react5.useState)(() => ({ 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] = (0, import_react5.useState)(() => ({ 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();
   (0, import_react5.useEffect)(() => {
     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) {
@@ -1791,13 +1814,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 = (0, import_react5.useMemo)(() => {
     if (!isVirtualized) return { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
     const currentScroll2 = scrollRef.current;
@@ -1944,6 +1967,158 @@ function Table({
   const scheduleDraw = (0, import_react5.useCallback)(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
+  const drawImmediately = (0, import_react5.useCallback)(() => {
+    if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+    frameRef.current = null;
+    draw();
+  }, [draw]);
+  const getSelectionHorizontalVisibility = (0, import_react5.useCallback)((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 = (0, import_react5.useCallback)((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 = (0, import_react5.useCallback)((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]);
   (0, import_react5.useLayoutEffect)(() => {
     const element = scrollerRef.current;
     if (!element) return;
@@ -2194,7 +2369,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,
@@ -2204,7 +2385,7 @@ function Table({
       thumbWidth,
       maxScrollLeft
     };
-  }, [showCustomScrollbar, updateCustomScrollbars]);
+  }, [drawImmediately, getSelectionHorizontalVisibility, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars]);
   const handleHorizontalScrollbarPointerMove = (0, import_react5.useCallback)((event) => {
     const drag = horizontalScrollbarDragRef.current;
     const scroller = scrollerRef.current;
@@ -2212,9 +2393,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 = (0, import_react5.useCallback)((event) => {
     const drag = horizontalScrollbarDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
@@ -2229,6 +2416,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];
@@ -2250,9 +2438,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`;
@@ -2282,7 +2470,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 = (0, import_react5.useCallback)((clientX) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
@@ -2370,6 +2558,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 = (0, import_react5.useCallback)((cell) => cell.leaf ? metrics[cell.startIndex]?.width ?? 0 : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1), [getCellDisplayWidth, metrics]);
+  const getHeaderCellEdgeFromMetrics = (0, import_react5.useCallback)((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 = (0, import_react5.useCallback)((clientX, clientY) => {
     if (!columnResizable || !canvasRef.current) return null;
     const rect = canvasRef.current.getBoundingClientRect();
@@ -2380,6 +2592,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;
@@ -2387,8 +2600,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 };
       }
     }
@@ -2600,6 +2815,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);
       },
@@ -2997,18 +3216,28 @@ function Table({
   const editorStyle = (0, import_react5.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 = (0, import_react5.useCallback)((event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const localY = event.clientY - rect.top;
@@ -3028,9 +3257,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
       };
@@ -3047,6 +3277,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);
@@ -3063,13 +3299,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 = (0, import_react5.useCallback)((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
@@ -3650,9 +3886,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,
@@ -3661,6 +3897,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;
+  (0, import_react5.useLayoutEffect)(() => {
+    syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
+  }, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
   const handleContextMenu = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -4108,6 +4357,27 @@ function Table({
       }
     ),
     selectionOutlineStyle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: selectionFocusRef, className: "rvg-selection-focus", style: selectionOutlineStyle, "aria-hidden": "true" }),
+    selectionEdgeIndicator && selection && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "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__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })
+      }
+    ),
     contextMenu && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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 };
@@ -4432,8 +4702,8 @@ function Table({
           column.key
         );
       }) }, rowIndex)),
-      fixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
-      rightFixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
+      fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
+      rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
     ] }),
     loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-refresh-loading", "aria-label": labels.refreshing, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoadingSpinnerIcon, {}) })
   ] });