@lensui/lens-table 0.1.93 → 0.1.95

package/dist/index.cjs

@@ -953,8 +953,22 @@ 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, keepRightBorderVisible = 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,
@@ -966,6 +980,28 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
     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",
     {
@@ -975,6 +1011,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
         !(inline && open) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
+            ref: inputRef,
             value,
             autoFocus: true,
             maxLength,
@@ -998,7 +1035,12 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
                 setOpen(true);
                 return;
               }
-              setOpen((current) => !current);
+              if (open) {
+                textareaRef.current?.focus();
+                return;
+              }
+              rememberSelection(inputRef.current);
+              setOpen(true);
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
           }
@@ -1006,6 +1048,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
         open && inline && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "textarea",
           {
+            ref: textareaRef,
             className: "rvg-textarea-inline",
             "aria-label": title,
             "data-rvg-preserve-edit": true,
@@ -1016,30 +1059,44 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
             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
         )
       ]

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,11 +920,29 @@ 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, keepRightBorderVisible = 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,
@@ -936,6 +954,28 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
     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",
     {
@@ -945,6 +985,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
         !(inline && open) && /* @__PURE__ */ jsx7(
           "input",
           {
+            ref: inputRef,
             value,
             autoFocus: true,
             maxLength,
@@ -968,7 +1009,12 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
                 setOpen(true);
                 return;
               }
-              setOpen((current) => !current);
+              if (open) {
+                textareaRef.current?.focus();
+                return;
+              }
+              rememberSelection(inputRef.current);
+              setOpen(true);
             },
             children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
           }
@@ -976,6 +1022,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
         open && inline && /* @__PURE__ */ jsx7(
           "textarea",
           {
+            ref: textareaRef,
             className: "rvg-textarea-inline",
             "aria-label": title,
             "data-rvg-preserve-edit": true,
@@ -986,30 +1033,44 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
             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
         )
       ]
@@ -2074,8 +2135,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(() => {
@@ -2111,7 +2172,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;
@@ -2164,54 +2225,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)));
@@ -2311,7 +2372,7 @@ function TableInner({
       return changed ? nextHeights : current;
     });
   }, [activeCustomHeaderLevels, baseHeaderHeight, headerDepth]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     customHeaderContentRefs.current.forEach((_, key) => {
       if (!activeCustomHeaderLevels.has(key)) customHeaderContentRefs.current.delete(key);
     });
@@ -2365,12 +2426,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]);
@@ -2473,7 +2534,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) => {
@@ -2528,7 +2589,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);
@@ -2934,7 +2995,7 @@ function TableInner({
       target.classList.remove("is-shape-syncing");
     }
   }, [getSelectionEdgeIndicator]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     const element = scrollerRef.current;
     if (!element) return;
     const root = element.parentElement;
@@ -3107,7 +3168,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) => {
@@ -3230,7 +3291,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) => {
@@ -4861,7 +4922,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.93",
+  "version": "0.1.95",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",