@lensui/lens-table 0.1.92 → 0.1.94

package/dist/index.cjs

@@ -953,18 +953,55 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
 var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function TextAreaEditor({ value, title, maxLength, inline = false, style, labels, onChange, onCommit, onCancel }) {
+function TextAreaEditor({
+  value,
+  title,
+  maxLength,
+  inline = false,
+  keepRightBorderVisible = false,
+  style,
+  labels,
+  onChange,
+  onCommit,
+  onCancel
+}) {
   const [open, setOpen] = (0, import_react6.useState)(false);
+  const inputRef = (0, import_react6.useRef)(null);
+  const textareaRef = (0, import_react6.useRef)(null);
+  const selectionRef = (0, import_react6.useRef)(null);
   const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
   const editorStyle = inline && open ? {
     ...style,
-    "--rvg-textarea-inline-header-height": `${inlineHeaderHeight}px`
+    "--rvg-textarea-inline-header-height": `${inlineHeaderHeight}px`,
+    "--rvg-textarea-inline-outline-right": keepRightBorderVisible ? "0px" : "-1px"
   } : style;
   const handleKeyDown = (event) => {
     event.stopPropagation();
     if (event.key === "Enter") onCommit(value);
     if (event.key === "Escape") onCancel();
   };
+  const rememberSelection = (control) => {
+    if (!control || control.selectionStart === null || control.selectionEnd === null)
+      return;
+    selectionRef.current = {
+      start: control.selectionStart,
+      end: control.selectionEnd,
+      direction: control.selectionDirection ?? "none"
+    };
+  };
+  (0, import_react6.useLayoutEffect)(() => {
+    if (!inline || !selectionRef.current) return;
+    const control = open ? textareaRef.current : inputRef.current;
+    if (!control) return;
+    const selection = selectionRef.current;
+    const length = control.value.length;
+    control.focus();
+    control.setSelectionRange(
+      Math.min(selection.start, length),
+      Math.min(selection.end, length),
+      selection.direction
+    );
+  }, [inline, open]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
@@ -974,6 +1011,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
         !(inline && open) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
+            ref: inputRef,
             value,
             autoFocus: true,
             maxLength,
@@ -992,13 +1030,21 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
               event.preventDefault();
               event.stopPropagation();
             },
-            onClick: () => setOpen((current) => inline ? !current : true),
+            onClick: () => {
+              if (!inline) {
+                setOpen(true);
+                return;
+              }
+              rememberSelection(open ? textareaRef.current : inputRef.current);
+              setOpen((current) => !current);
+            },
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
           }
         ),
         open && inline && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "textarea",
           {
+            ref: textareaRef,
             className: "rvg-textarea-inline",
             "aria-label": title,
             "data-rvg-preserve-edit": true,
@@ -1009,30 +1055,44 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
             onChange: (event) => onChange(event.target.value),
             onKeyDown: (event) => {
               event.stopPropagation();
-              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
-              if (event.key === "Escape") setOpen(false);
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
+                onCommit(value);
+              if (event.key === "Escape") {
+                rememberSelection(event.currentTarget);
+                setOpen(false);
+              }
             }
           }
         ),
         open && !inline && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("header", { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "textarea",
-              {
-                value,
-                autoFocus: true,
-                maxLength,
-                onChange: (event) => onChange(event.target.value),
-                onKeyDown: (event) => {
-                  event.stopPropagation();
-                  if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
-                  if (event.key === "Escape") setOpen(false);
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
-          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "section",
+            {
+              className: "rvg-textarea-dialog",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": title,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("header", { children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "textarea",
+                  {
+                    value,
+                    autoFocus: true,
+                    maxLength,
+                    onChange: (event) => onChange(event.target.value),
+                    onKeyDown: (event) => {
+                      event.stopPropagation();
+                      if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
+                        onCommit(value);
+                      if (event.key === "Escape") setOpen(false);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
+              ]
+            }
+          ) }),
           document.body
         )
       ]
@@ -1198,11 +1258,12 @@ function getSelectionOutlineBounds({
   horizontalEnd,
   verticalStart,
   verticalEnd,
-  borderWidth = 2
+  borderWidth = 2,
+  keepRightBorderVisible = false
 }) {
   return {
     left: Math.max(left - borderWidth, horizontalStart - borderWidth),
-    right: Math.min(right + 1, horizontalEnd + 1),
+    right: Math.min(right + 1, horizontalEnd + (keepRightBorderVisible ? 0 : 1)),
     top: Math.max(top - borderWidth, verticalStart - borderWidth),
     bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
   };
@@ -3302,7 +3363,8 @@ function TableInner({
             horizontalStart,
             horizontalEnd,
             verticalStart,
-            verticalEnd: renderHeight
+            verticalEnd: renderHeight,
+            keepRightBorderVisible: horizontalEnd === viewport.width
           });
           const left = Math.round(bounds.left);
           const right = Math.round(bounds.right);
@@ -3861,6 +3923,7 @@ function TableInner({
           title: column.editor.title ?? column.title,
           maxLength: column.editor.maxLength,
           inline: column.editor.inline,
+          keepRightBorderVisible: typeof editorStyle.left === "number" && typeof editorStyle.width === "number" && editorStyle.left + editorStyle.width >= viewport.width,
           style: editorStyle,
           labels,
           onChange: setDraft,
@@ -4856,7 +4919,8 @@ function TableInner({
       horizontalStart,
       horizontalEnd,
       verticalStart,
-      verticalEnd: renderHeight
+      verticalEnd: renderHeight,
+      keepRightBorderVisible: horizontalEnd === viewport.width
     });
     const left = Math.round(bounds.left);
     const right = Math.round(bounds.right);

package/dist/index.css

@@ -2753,14 +2753,30 @@
 .rvg-textarea-editor {
   padding-right: 24px;
 }
+.rvg-root:has(.rvg-textarea-editor.is-inline-expanded) .rvg-selection-focus {
+  display: none;
+}
 .rvg-textarea-editor.is-inline-expanded {
   z-index: 8;
   display: block;
   height: calc(var(--rvg-textarea-inline-header-height) + 116px) !important;
   padding: 0;
-  overflow: hidden;
-  border: 2px solid var(--rvg-color-primary);
+  overflow: visible;
+  border: 0;
   background: var(--rvg-color-bg);
+  box-shadow: none;
+}
+.rvg-textarea-editor.is-inline-expanded::before {
+  position: absolute;
+  z-index: 1;
+  top: -2px;
+  right: var(--rvg-textarea-inline-outline-right, -1px);
+  bottom: -2px;
+  left: -2px;
+  border: 2px solid var(--rvg-color-primary);
+  content: "";
+  pointer-events: none;
+  box-sizing: border-box;
 }
 .rvg-textarea-trigger {
   position: absolute;
@@ -2793,7 +2809,7 @@
   min-width: 0;
   min-height: 0;
   margin: 0;
-  padding: 8px 24px 8px 4px;
+  padding: 0 24px 8px 4px;
   resize: none;
   border: 0;
   border-radius: 0;
@@ -2801,10 +2817,12 @@
   background: transparent;
   color: var(--rvg-color-text);
   font:
-    var(--rvg-font-size-body)/1.5 Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
+  line-height: var(--rvg-textarea-inline-header-height);
+  box-shadow: none;
   box-sizing: border-box;
 }
 .rvg-textarea-backdrop {

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/Table.tsx
-import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback3, useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState6 } from "react";
+import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback3, useEffect as useEffect3, useLayoutEffect as useLayoutEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState6 } from "react";
 import { flushSync } from "react-dom";
 
 // src/components/EmptyState.tsx
@@ -920,21 +920,62 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
 }
 
 // src/components/editors/TextAreaEditor.tsx
-import { useState as useState4 } from "react";
+import {
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function TextAreaEditor({ value, title, maxLength, inline = false, style, labels, onChange, onCommit, onCancel }) {
+function TextAreaEditor({
+  value,
+  title,
+  maxLength,
+  inline = false,
+  keepRightBorderVisible = false,
+  style,
+  labels,
+  onChange,
+  onCommit,
+  onCancel
+}) {
   const [open, setOpen] = useState4(false);
+  const inputRef = useRef4(null);
+  const textareaRef = useRef4(null);
+  const selectionRef = useRef4(null);
   const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
   const editorStyle = inline && open ? {
     ...style,
-    "--rvg-textarea-inline-header-height": `${inlineHeaderHeight}px`
+    "--rvg-textarea-inline-header-height": `${inlineHeaderHeight}px`,
+    "--rvg-textarea-inline-outline-right": keepRightBorderVisible ? "0px" : "-1px"
   } : style;
   const handleKeyDown = (event) => {
     event.stopPropagation();
     if (event.key === "Enter") onCommit(value);
     if (event.key === "Escape") onCancel();
   };
+  const rememberSelection = (control) => {
+    if (!control || control.selectionStart === null || control.selectionEnd === null)
+      return;
+    selectionRef.current = {
+      start: control.selectionStart,
+      end: control.selectionEnd,
+      direction: control.selectionDirection ?? "none"
+    };
+  };
+  useLayoutEffect3(() => {
+    if (!inline || !selectionRef.current) return;
+    const control = open ? textareaRef.current : inputRef.current;
+    if (!control) return;
+    const selection = selectionRef.current;
+    const length = control.value.length;
+    control.focus();
+    control.setSelectionRange(
+      Math.min(selection.start, length),
+      Math.min(selection.end, length),
+      selection.direction
+    );
+  }, [inline, open]);
   return /* @__PURE__ */ jsxs7(
     "div",
     {
@@ -944,6 +985,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
         !(inline && open) && /* @__PURE__ */ jsx7(
           "input",
           {
+            ref: inputRef,
             value,
             autoFocus: true,
             maxLength,
@@ -962,13 +1004,21 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
               event.preventDefault();
               event.stopPropagation();
             },
-            onClick: () => setOpen((current) => inline ? !current : true),
+            onClick: () => {
+              if (!inline) {
+                setOpen(true);
+                return;
+              }
+              rememberSelection(open ? textareaRef.current : inputRef.current);
+              setOpen((current) => !current);
+            },
             children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
           }
         ),
         open && inline && /* @__PURE__ */ jsx7(
           "textarea",
           {
+            ref: textareaRef,
             className: "rvg-textarea-inline",
             "aria-label": title,
             "data-rvg-preserve-edit": true,
@@ -979,30 +1029,44 @@ function TextAreaEditor({ value, title, maxLength, inline = false, style, labels
             onChange: (event) => onChange(event.target.value),
             onKeyDown: (event) => {
               event.stopPropagation();
-              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
-              if (event.key === "Escape") setOpen(false);
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
+                onCommit(value);
+              if (event.key === "Escape") {
+                rememberSelection(event.currentTarget);
+                setOpen(false);
+              }
             }
           }
         ),
         open && !inline && createPortal(
-          /* @__PURE__ */ jsx7("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
-            /* @__PURE__ */ jsx7("header", { children: title }),
-            /* @__PURE__ */ jsx7(
-              "textarea",
-              {
-                value,
-                autoFocus: true,
-                maxLength,
-                onChange: (event) => onChange(event.target.value),
-                onKeyDown: (event) => {
-                  event.stopPropagation();
-                  if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
-                  if (event.key === "Escape") setOpen(false);
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx7("footer", { children: /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
-          ] }) }),
+          /* @__PURE__ */ jsx7("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7(
+            "section",
+            {
+              className: "rvg-textarea-dialog",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": title,
+              children: [
+                /* @__PURE__ */ jsx7("header", { children: title }),
+                /* @__PURE__ */ jsx7(
+                  "textarea",
+                  {
+                    value,
+                    autoFocus: true,
+                    maxLength,
+                    onChange: (event) => onChange(event.target.value),
+                    onKeyDown: (event) => {
+                      event.stopPropagation();
+                      if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
+                        onCommit(value);
+                      if (event.key === "Escape") setOpen(false);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx7("footer", { children: /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
+              ]
+            }
+          ) }),
           document.body
         )
       ]
@@ -1168,11 +1232,12 @@ function getSelectionOutlineBounds({
   horizontalEnd,
   verticalStart,
   verticalEnd,
-  borderWidth = 2
+  borderWidth = 2,
+  keepRightBorderVisible = false
 }) {
   return {
     left: Math.max(left - borderWidth, horizontalStart - borderWidth),
-    right: Math.min(right + 1, horizontalEnd + 1),
+    right: Math.min(right + 1, horizontalEnd + (keepRightBorderVisible ? 0 : 1)),
     top: Math.max(top - borderWidth, verticalStart - borderWidth),
     bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
   };
@@ -2066,8 +2131,8 @@ function TableInner({
   const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
   const headerDepth = useMemo2(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
   const { language, labels } = useMemo2(() => resolveGridLocale(locale), [locale]);
-  const customHeaderContentRefs = useRef4(/* @__PURE__ */ new Map());
-  const customHeaderMeasurementsRef = useRef4(/* @__PURE__ */ new Map());
+  const customHeaderContentRefs = useRef5(/* @__PURE__ */ new Map());
+  const customHeaderMeasurementsRef = useRef5(/* @__PURE__ */ new Map());
   const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = useState6([]);
   const headerRowHeights = useMemo2(() => Array.from({ length: headerDepth }, (_, level) => Math.max(baseHeaderHeight, measuredHeaderRowHeights[level] ?? 0)), [baseHeaderHeight, headerDepth, measuredHeaderRowHeights]);
   const headerRowOffsets = useMemo2(() => {
@@ -2103,7 +2168,7 @@ function TableInner({
   const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
   const [resizedColumnWidths, setResizedColumnWidths] = useState6({});
   const leafSourceColumns = useMemo2(() => flattenDataColumns(sourceColumns), [sourceColumns]);
-  const sourceColumnWidthsRef = useRef4(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
+  const sourceColumnWidthsRef = useRef5(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
   const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
   const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
   const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
@@ -2156,54 +2221,54 @@ function TableInner({
     });
     return levels;
   }, [columns, headerCells, headerDepth]);
-  const canvasRef = useRef4(null);
-  const scrollerRef = useRef4(null);
-  const rootRef = useRef4(null);
-  const frameRef = useRef4(null);
-  const textFrameRef = useRef4(null);
-  const textLayoutScrollTopRef = useRef4(0);
-  const toastTimerRef = useRef4(null);
-  const headerTooltipTimerRef = useRef4(null);
-  const cellTooltipTimerRef = useRef4(null);
-  const pendingHeaderTooltipKeyRef = useRef4("");
-  const pendingCellTooltipKeyRef = useRef4("");
-  const clickedCellRef = useRef4(null);
-  const rowAnchorRef = useRef4(null);
-  const columnAnchorRef = useRef4(null);
-  const columnDragRef = useRef4(null);
-  const columnOrderDragRef = useRef4(null);
-  const columnOrderLongPressTimerRef = useRef4(null);
-  const rowOrderDragRef = useRef4(null);
-  const dragGuideRef = useRef4(null);
-  const rowDragGuideRef = useRef4(null);
-  const selectionFocusRef = useRef4(null);
-  const selectionEdgeTargetRef = useRef4(null);
-  const verticalScrollbarRef = useRef4(null);
-  const verticalScrollbarThumbRef = useRef4(null);
-  const verticalScrollbarDragRef = useRef4(null);
-  const horizontalScrollbarRef = useRef4(null);
-  const horizontalScrollbarThumbRef = useRef4(null);
-  const horizontalScrollbarDragRef = useRef4(null);
-  const verticalScrollbarVisibilityTimerRef = useRef4(null);
-  const horizontalScrollbarVisibilityTimerRef = useRef4(null);
-  const rowByKeyRef = useRef4(/* @__PURE__ */ new Map());
-  const rowIndexByKeyRef = useRef4(/* @__PURE__ */ new Map());
-  const headerIconsRef = useRef4(null);
-  const scrollingHeaderIconsRef = useRef4(null);
-  const scrollingTextRef = useRef4(null);
-  const filterRef = useRef4(null);
-  const contextMenuRef = useRef4(null);
-  const suppressClickRef = useRef4(false);
-  const hasCompletedLoadRef = useRef4(!loading);
-  const validColumnDropRef = useRef4(null);
-  const hoveredHeaderActionRef = useRef4(null);
-  const hoveredRowIndexRef = useRef4(null);
+  const canvasRef = useRef5(null);
+  const scrollerRef = useRef5(null);
+  const rootRef = useRef5(null);
+  const frameRef = useRef5(null);
+  const textFrameRef = useRef5(null);
+  const textLayoutScrollTopRef = useRef5(0);
+  const toastTimerRef = useRef5(null);
+  const headerTooltipTimerRef = useRef5(null);
+  const cellTooltipTimerRef = useRef5(null);
+  const pendingHeaderTooltipKeyRef = useRef5("");
+  const pendingCellTooltipKeyRef = useRef5("");
+  const clickedCellRef = useRef5(null);
+  const rowAnchorRef = useRef5(null);
+  const columnAnchorRef = useRef5(null);
+  const columnDragRef = useRef5(null);
+  const columnOrderDragRef = useRef5(null);
+  const columnOrderLongPressTimerRef = useRef5(null);
+  const rowOrderDragRef = useRef5(null);
+  const dragGuideRef = useRef5(null);
+  const rowDragGuideRef = useRef5(null);
+  const selectionFocusRef = useRef5(null);
+  const selectionEdgeTargetRef = useRef5(null);
+  const verticalScrollbarRef = useRef5(null);
+  const verticalScrollbarThumbRef = useRef5(null);
+  const verticalScrollbarDragRef = useRef5(null);
+  const horizontalScrollbarRef = useRef5(null);
+  const horizontalScrollbarThumbRef = useRef5(null);
+  const horizontalScrollbarDragRef = useRef5(null);
+  const verticalScrollbarVisibilityTimerRef = useRef5(null);
+  const horizontalScrollbarVisibilityTimerRef = useRef5(null);
+  const rowByKeyRef = useRef5(/* @__PURE__ */ new Map());
+  const rowIndexByKeyRef = useRef5(/* @__PURE__ */ new Map());
+  const headerIconsRef = useRef5(null);
+  const scrollingHeaderIconsRef = useRef5(null);
+  const scrollingTextRef = useRef5(null);
+  const filterRef = useRef5(null);
+  const contextMenuRef = useRef5(null);
+  const suppressClickRef = useRef5(false);
+  const hasCompletedLoadRef = useRef5(!loading);
+  const validColumnDropRef = useRef5(null);
+  const hoveredHeaderActionRef = useRef5(null);
+  const hoveredRowIndexRef = useRef5(null);
   const [viewport, setViewport] = useState6({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
   const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState6(0);
   const [availableHeight, setAvailableHeight] = useState6(FALLBACK_HEIGHT);
   const resolvedHeight = typeof height === "number" ? height : availableHeight;
   const [scrollPosition, setScrollPosition] = useState6({ left: 0, top: 0 });
-  const scrollRef = useRef4({ left: 0, top: 0 });
+  const scrollRef = useRef5({ left: 0, top: 0 });
   const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
     if (!onSelectedRowChange) return;
     const missing = new Set(keys.filter((key) => !rowByKeyRef.current.has(key)));
@@ -2303,7 +2368,7 @@ function TableInner({
       return changed ? nextHeights : current;
     });
   }, [activeCustomHeaderLevels, baseHeaderHeight, headerDepth]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     customHeaderContentRefs.current.forEach((_, key) => {
       if (!activeCustomHeaderLevels.has(key)) customHeaderContentRefs.current.delete(key);
     });
@@ -2357,12 +2422,12 @@ function TableInner({
   const [annotationContent, setAnnotationContent] = useState6("");
   const [annotationOpen, setAnnotationOpen] = useState6(false);
   const [annotationPlacement, setAnnotationPlacement] = useState6("right-down");
-  const originalCellValuesRef = useRef4(/* @__PURE__ */ new Map());
+  const originalCellValuesRef = useRef5(/* @__PURE__ */ new Map());
   const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
   const [pendingInserts, setPendingInserts] = useState6(() => []);
   const [insertedRowKeys, setInsertedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
   const [rowOrderKeys, setRowOrderKeys] = useState6(null);
-  const settledPendingInsertIdsRef = useRef4(/* @__PURE__ */ new Set());
+  const settledPendingInsertIdsRef = useRef5(/* @__PURE__ */ new Set());
   const getDataRowKey = useCallback3((row, index) => {
     return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
   }, [rowKey]);
@@ -2465,7 +2530,7 @@ function TableInner({
   }, [columns, onSelectedCellChange, rows]);
   const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
   const [selectionRange, setSelectionRange] = useState6(null);
-  const rangeDragRef = useRef4(null);
+  const rangeDragRef = useRef5(null);
   useEffect3(() => {
     if (!selection) return void 0;
     const handleOutsidePointerDown = (event) => {
@@ -2520,7 +2585,7 @@ function TableInner({
       return changed ? next : current;
     });
   }, [getDataRowKey, pendingDeletedRowKeys.size, sourceRows]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!editing) return;
     if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
     setEditing(null);
@@ -2926,7 +2991,7 @@ function TableInner({
       target.classList.remove("is-shape-syncing");
     }
   }, [getSelectionEdgeIndicator]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     const element = scrollerRef.current;
     if (!element) return;
     const root = element.parentElement;
@@ -3099,7 +3164,7 @@ function TableInner({
     horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
     horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
   }, [autoHeight, bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, realContentHeight, renderHeight, rightFixedWidth, viewport.width]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     updateCustomScrollbars();
   }, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
   const handleVerticalScrollbarPointerDown = useCallback3((event) => {
@@ -3222,7 +3287,7 @@ function TableInner({
     horizontalScrollbarDragRef.current = null;
     showCustomScrollbar("horizontal");
   }, [showCustomScrollbar]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     textLayoutScrollTopRef.current = scrollPosition.top;
     const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
     clips?.forEach((clip) => {
@@ -3272,7 +3337,8 @@ function TableInner({
             horizontalStart,
             horizontalEnd,
             verticalStart,
-            verticalEnd: renderHeight
+            verticalEnd: renderHeight,
+            keepRightBorderVisible: horizontalEnd === viewport.width
           });
           const left = Math.round(bounds.left);
           const right = Math.round(bounds.right);
@@ -3831,6 +3897,7 @@ function TableInner({
           title: column.editor.title ?? column.title,
           maxLength: column.editor.maxLength,
           inline: column.editor.inline,
+          keepRightBorderVisible: typeof editorStyle.left === "number" && typeof editorStyle.width === "number" && editorStyle.left + editorStyle.width >= viewport.width,
           style: editorStyle,
           labels,
           onChange: setDraft,
@@ -4826,7 +4893,8 @@ function TableInner({
       horizontalStart,
       horizontalEnd,
       verticalStart,
-      verticalEnd: renderHeight
+      verticalEnd: renderHeight,
+      keepRightBorderVisible: horizontalEnd === viewport.width
     });
     const left = Math.round(bounds.left);
     const right = Math.round(bounds.right);
@@ -4850,7 +4918,7 @@ function TableInner({
       "--rvg-corner-hover-height-extension": "4px"
     } : null
   } : void 0;
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
   }, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
   const handleContextMenu = (event) => {

package/package.json

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