@lensui/lens-table 0.1.82 → 0.1.84

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/Table.tsx
-import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback2, 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 useLayoutEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState6 } from "react";
 import { flushSync } from "react-dom";
 
 // src/components/EmptyState.tsx
@@ -199,7 +199,7 @@ function DefaultEmptyState({ label = ZH_CN_GRID_LABELS.empty }) {
 // src/components/editors/ChoiceEditor.tsx
 import { Portal } from "@ark-ui/react/portal";
 import { Select, createListCollection } from "@ark-ui/react/select";
-import { useEffect, useId as useId2, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useId as useId2, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 // src/icons/gridIcons.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -315,7 +315,7 @@ function getSearchableChoicePopupHorizontalLayout(anchorLeft, anchorWidth, longe
   );
   return { left, width };
 }
-function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownHeight, style, labels, onChange, onCommit, onCancel }) {
+function SearchableChoiceEditor({ value, options, allowCustomValue, strictOptions, maxDropdownHeight, style, labels, onChange, onCommit, onCancel }) {
   const editorRef = useRef(null);
   const popupRef = useRef(null);
   const activeOptionRef = useRef(null);
@@ -325,6 +325,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
   const listboxId = useId2();
   const originalValue = originalValueRef.current;
   const [inputValue, setInputValue] = useState(value);
+  const [hasTyped, setHasTyped] = useState(false);
   const [activeIndex, setActiveIndex] = useState(() => {
     const selectedIndex = options.findIndex((option) => option.value === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
@@ -334,10 +335,23 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     visibility: "hidden"
   });
   const filteredOptions = useMemo(() => {
+    if (strictOptions) {
+      if (!hasTyped) return options;
+      if (inputValue === "") return options.filter((option) => option.value === "");
+      const strictQuery = inputValue.trim().toLocaleLowerCase();
+      if (!strictQuery) return [];
+      return options.filter((option) => option.label.toLocaleLowerCase().includes(strictQuery) || option.value.toLocaleLowerCase().includes(strictQuery));
+    }
     const query = inputValue.trim().toLocaleLowerCase();
     if (!query || query === originalValue.toLocaleLowerCase()) return options;
     return options.filter((option) => option.label.toLocaleLowerCase().includes(query) || option.value.toLocaleLowerCase().includes(query));
-  }, [inputValue, options, originalValue]);
+  }, [hasTyped, inputValue, options, originalValue, strictOptions]);
+  const exactInputOption = options.find((option) => option.value === inputValue);
+  const selectedValue = exactInputOption?.value;
+  const resolveInputValue = useCallback(() => {
+    if (strictOptions) return exactInputOption?.value ?? originalValue;
+    return allowCustomValue ? inputValue || originalValue : originalValue;
+  }, [allowCustomValue, exactInputOption, inputValue, originalValue, strictOptions]);
   useLayoutEffect(() => {
     const positionPopup = () => {
       const rect = editorRef.current?.getBoundingClientRect();
@@ -404,11 +418,11 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
       const target = event.target;
       if (!(target instanceof Node)) return;
       if (editorRef.current?.contains(target) || popupRef.current?.contains(target)) return;
-      onCommit(allowCustomValue ? inputValue || originalValue : originalValue);
+      onCommit(resolveInputValue());
     };
     document.addEventListener("pointerdown", handleOutsidePointer, true);
     return () => document.removeEventListener("pointerdown", handleOutsidePointer, true);
-  }, [allowCustomValue, inputValue, onCommit, originalValue]);
+  }, [onCommit, resolveInputValue]);
   const selectOption = (option) => {
     onChange(option.value);
     onCommit(option.value);
@@ -430,7 +444,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
       event.preventDefault();
       const option = filteredOptions[activeIndex];
       if (option) selectOption(option);
-      else if (allowCustomValue) onCommit(inputValue || originalValue);
+      else if (allowCustomValue || strictOptions) onCommit(resolveInputValue());
     }
   };
   return /* @__PURE__ */ jsxs3("div", { ref: editorRef, className: "rvg-choice-editor rvg-searchable-choice-editor", style, children: [
@@ -444,6 +458,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         "aria-controls": listboxId,
         onFocus: (event) => event.currentTarget.select(),
         onChange: (event) => {
+          setHasTyped(true);
           setInputValue(event.target.value);
           onChange(event.target.value);
           navigationSourceRef.current = "filter";
@@ -459,8 +474,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         ref: index === activeIndex ? activeOptionRef : void 0,
         type: "button",
         role: "option",
-        "aria-selected": option.value === originalValue,
-        className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
+        "aria-selected": option.value === selectedValue,
+        className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === selectedValue ? " is-selected" : ""}`,
         onPointerDown: (event) => event.preventDefault(),
         onMouseEnter: () => {
           navigationSourceRef.current = "pointer";
@@ -469,7 +484,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         onClick: () => selectOption(option),
         children: [
           /* @__PURE__ */ jsx3("span", { children: option.label }),
-          option.value === originalValue && /* @__PURE__ */ jsx3(ChoiceCheckIcon, {})
+          option.value === selectedValue && /* @__PURE__ */ jsx3(ChoiceCheckIcon, {})
         ]
       },
       option.value
@@ -1114,6 +1129,24 @@ function ellipsizeText(context, text, maxWidth) {
   }
   return `${text.slice(0, start)}${ellipsis}`;
 }
+function getSelectionOutlineBounds({
+  left,
+  right,
+  top,
+  bottom,
+  horizontalStart,
+  horizontalEnd,
+  verticalStart,
+  verticalEnd,
+  borderWidth = 2
+}) {
+  return {
+    left: Math.max(left - borderWidth, horizontalStart - borderWidth),
+    right: Math.min(right + 1, horizontalEnd + 1),
+    top: Math.max(top - borderWidth, verticalStart - borderWidth),
+    bottom: Math.min(bottom + borderWidth, verticalEnd + borderWidth)
+  };
+}
 function paintGrid(options) {
   const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, frameBorderless, extendVerticalGridLines, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
@@ -1602,51 +1635,65 @@ function paintGrid(options) {
       const visibleRight = x + selectionWidth;
       const visibleBottom = y + selectionHeight;
       const selectionTop = fixedHeader ? bodyTop : 0;
-      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);
+      const leftMarkerX = leftFixedWidth - borderWidth;
+      const rightMarkerX = selectionAreaRight - 1;
+      const topMarkerY = selectionTop - borderWidth;
+      const bottomMarkerY = height;
       if ((hiddenAboveHeader || hiddenBelowViewport) && (hiddenBehindLeft || hiddenBehindRight)) {
         const markerSize = 2;
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
-        const markerY = hiddenAboveHeader ? selectionClipTop : height - markerSize;
+        const markerX = hiddenBehindLeft ? leftMarkerX : rightMarkerX;
+        const markerY = hiddenAboveHeader ? topMarkerY : bottomMarkerY;
         ctx.fillStyle = colors.selection;
         ctx.fillRect(markerX, markerY, markerSize, markerSize);
         return;
       }
+      const outline = getSelectionOutlineBounds({
+        left: x,
+        right: visibleRight,
+        top: y,
+        bottom: visibleBottom,
+        horizontalStart: visibleLeft,
+        horizontalEnd: selectionAreaRight,
+        verticalStart: selectionTop,
+        verticalEnd: height,
+        borderWidth
+      });
       ctx.save();
       ctx.beginPath();
-      const clipLeft = fixedSide === "left" ? 0 : Math.max(0, leftFixedWidth);
+      const clipLeft = Math.max(0, outline.left);
       const clipRight = Math.min(width, selectionAreaRight + 1);
-      ctx.rect(clipLeft, selectionClipTop, clipRight - clipLeft, height - selectionClipTop);
+      const clipTop = Math.max(0, outline.top);
+      ctx.rect(clipLeft, clipTop, clipRight - clipLeft, height - clipTop);
       ctx.clip();
       ctx.fillStyle = colors.selection;
       if (hiddenAboveHeader) {
-        const markerLeft = Math.max(x - borderWidth, visibleLeft - 1);
-        const markerRight = Math.min(visibleRight + 1, selectionAreaRight);
-        if (markerRight > markerLeft) ctx.fillRect(markerLeft, selectionClipTop, markerRight - markerLeft, borderWidth);
+        const markerLeft = Math.max(x - borderWidth, visibleLeft - borderWidth);
+        const markerRight = Math.min(visibleRight + 1, selectionAreaRight + 1);
+        if (markerRight > markerLeft) ctx.fillRect(markerLeft, topMarkerY, markerRight - markerLeft, borderWidth);
       }
       if (hiddenBelowViewport) {
-        const markerLeft = Math.max(x - borderWidth, visibleLeft - 1);
-        const markerRight = Math.min(visibleRight + 1, selectionAreaRight);
-        if (markerRight > markerLeft) ctx.fillRect(markerLeft, height - borderWidth, markerRight - markerLeft, borderWidth);
+        const markerLeft = Math.max(x - borderWidth, visibleLeft - borderWidth);
+        const markerRight = Math.min(visibleRight + 1, selectionAreaRight + 1);
+        if (markerRight > markerLeft) ctx.fillRect(markerLeft, bottomMarkerY, markerRight - markerLeft, borderWidth);
       }
       if (hiddenBehindLeft || hiddenBehindRight) {
-        const markerTop = Math.max(y - borderWidth, selectionTop);
-        const markerBottom = Math.min(y + selectionHeight + 1, height);
-        const markerX = hiddenBehindLeft ? leftMarkerX : selectionAreaRight - borderWidth - rightFixedBoundaryInset;
+        const markerTop = Math.max(y - borderWidth, selectionTop - borderWidth);
+        const markerBottom = Math.min(y + selectionHeight + borderWidth, height + borderWidth);
+        const markerX = hiddenBehindLeft ? leftMarkerX : rightMarkerX;
         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);
-      const borderRight = Math.min(x + selectionWidth - 1, selectionAreaRight - borderWidth, width - borderWidth);
-      const borderTop = Math.max(y - borderWidth, selectionClipTop);
-      const borderBottom = Math.min(y + selectionHeight, height - borderWidth);
+      const borderLeft = outline.left;
+      const borderRight = outline.right - borderWidth;
+      const borderTop = outline.top;
+      const borderBottom = outline.bottom - borderWidth;
       const borderOuterWidth = borderRight + borderWidth - borderLeft;
       ctx.fillRect(borderLeft, borderTop, borderOuterWidth, borderWidth);
       ctx.fillRect(borderLeft, borderBottom, borderOuterWidth, borderWidth);
@@ -1658,11 +1705,11 @@ function paintGrid(options) {
 }
 
 // src/hooks/useControllable.ts
-import { useCallback, useState as useState5 } from "react";
+import { useCallback as useCallback2, useState as useState5 } from "react";
 function useControllableKeys(value, defaultValue, onChange) {
   const [internal, setInternal] = useState5(defaultValue ?? []);
   const keys = value === void 0 ? internal : value;
-  const setKeys = useCallback((next) => {
+  const setKeys = useCallback2((next) => {
     if (value === void 0) setInternal(next);
     onChange?.(next);
   }, [onChange, value]);
@@ -1671,7 +1718,7 @@ function useControllableKeys(value, defaultValue, onChange) {
 function useControllableValue(value, defaultValue, onChange) {
   const [internal, setInternal] = useState5(defaultValue ?? null);
   const selected = value === void 0 ? internal : value;
-  const setSelected = useCallback((next) => {
+  const setSelected = useCallback2((next) => {
     if (value === void 0) setInternal(next);
     onChange?.(next);
   }, [onChange, value]);
@@ -2141,7 +2188,7 @@ function TableInner({
     if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
     if (cellTooltipTimerRef.current !== null) clearTimeout(cellTooltipTimerRef.current);
   }, []);
-  const measureCustomHeaderHeight = useCallback2(() => {
+  const measureCustomHeaderHeight = useCallback3(() => {
     const nextHeights = Array.from({ length: headerDepth }, () => baseHeaderHeight);
     customHeaderContentRefs.current.forEach((node) => {
       const headerCell = node.closest(".rvg-header-title");
@@ -2192,7 +2239,7 @@ function TableInner({
   const [hoveredHeaderAction, setHoveredHeaderAction] = useState6(null);
   const [visibleHeaderTooltip, setVisibleHeaderTooltip] = useState6(null);
   const [hoveredCellTooltip, setHoveredCellTooltip] = useState6(null);
-  const hideDragTooltips = useCallback2(() => {
+  const hideDragTooltips = useCallback3(() => {
     if (headerTooltipTimerRef.current !== null) {
       clearTimeout(headerTooltipTimerRef.current);
       headerTooltipTimerRef.current = null;
@@ -2219,10 +2266,10 @@ function TableInner({
   const [insertedRowKeys, setInsertedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
   const [rowOrderKeys, setRowOrderKeys] = useState6(null);
   const settledPendingInsertIdsRef = useRef4(/* @__PURE__ */ new Set());
-  const getDataRowKey = useCallback2((row, index) => {
+  const getDataRowKey = useCallback3((row, index) => {
     return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
   }, [rowKey]);
-  const getSourceRowIndexByKey = useCallback2((key, preferredIndex) => {
+  const getSourceRowIndexByKey = useCallback3((key, preferredIndex) => {
     const preferredRow = sourceRows[preferredIndex];
     if (preferredRow && getDataRowKey(preferredRow, preferredIndex) === key) return preferredIndex;
     const start = Math.max(0, preferredIndex - 8);
@@ -2293,7 +2340,7 @@ function TableInner({
       return result * direction;
     });
   }, [columns, filteredRows, language, onSortChange, sortState]);
-  const resolveSelectionTarget = useCallback2((target) => {
+  const resolveSelectionTarget = useCallback3((target) => {
     if (target == null) return target;
     const columnIndex = columns.findIndex((column) => column.key === target.columnKey);
     const rowIndex = target.rowKey !== void 0 ? rows.findIndex((row2, index) => getDataRowKey(row2, index) === target.rowKey) : target.rowIndex ?? -1;
@@ -2308,7 +2355,7 @@ function TableInner({
   }, [columns, getDataRowKey, rows]);
   const resolvedSelectedCell = useMemo2(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
   const resolvedDefaultSelectedCell = useMemo2(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
-  const handleSelectedCellChange = useCallback2((next) => {
+  const handleSelectedCellChange = useCallback3((next) => {
     if (!onSelectedCellChange) return;
     if (!next) {
       onSelectedCellChange(null);
@@ -2337,7 +2384,7 @@ function TableInner({
     document.addEventListener("pointerdown", handleOutsidePointerDown);
     return () => document.removeEventListener("pointerdown", handleOutsidePointerDown);
   }, [selection, setSelection]);
-  const applyRowOrder = useCallback2((sourceIndex, targetIndex) => {
+  const applyRowOrder = useCallback3((sourceIndex, targetIndex) => {
     if (sourceIndex === targetIndex || sourceIndex < 0 || targetIndex < 0 || sourceIndex >= rows.length || targetIndex >= rows.length) return;
     const nextEntries = rows.map((row, index) => ({ row, key: getDataRowKey(row, index) }));
     const [entry] = nextEntries.splice(sourceIndex, 1);
@@ -2346,7 +2393,7 @@ function TableInner({
     setRowOrderKeys(nextEntries.map(({ key }) => key));
     onRowsReorder?.(nextRows, { sourceIndex, targetIndex });
   }, [getDataRowKey, onRowsReorder, rows]);
-  const applyColumnOrder = useCallback2((sourceIndex, targetIndex, detail) => {
+  const applyColumnOrder = useCallback3((sourceIndex, targetIndex, detail) => {
     const nextColumns = reorderColumns(sourceColumns, detail);
     setSourceColumns(nextColumns);
     onColumnsReorder?.(nextColumns, { sourceIndex, targetIndex, ...detail });
@@ -2419,7 +2466,7 @@ function TableInner({
     }
     return lefts;
   }, [columns, fixedWidth, metrics]);
-  const getScrollableColumnLeft = useCallback2((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
+  const getScrollableColumnLeft = useCallback3((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
   const hasRowSelectionColumn = useMemo2(() => columns.some((column) => column.rowSelection), [columns]);
   const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
   const summarySignature = useMemo2(() => getSummarySignature(columns), [columns]);
@@ -2472,7 +2519,7 @@ function TableInner({
     const rowScrollTop = fixedHeader ? currentScroll2.top : Math.max(0, currentScroll2.top - bodyTop);
     return getViewportRange(currentScroll2.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan);
   }, [bodyTop, bodyViewportHeight, columns.length, fixedHeader, isVirtualized, metrics, rowHeight, rows.length, scrollPosition, viewport.width, virtualOverscan]);
-  const getRowKey = useCallback2((row, index) => {
+  const getRowKey = useCallback3((row, index) => {
     const key = getDataRowKey(row, index);
     rowByKeyRef.current.set(key, row);
     rowIndexByKeyRef.current.set(key, index);
@@ -2541,7 +2588,7 @@ function TableInner({
   const selectedRowKeySet = useMemo2(() => new Set(rowKeys), [rowKeys]);
   const selectedColumnKeySet = useMemo2(() => new Set(columnKeys), [columnKeys]);
   const insertedRowKeySet = useMemo2(() => insertedRowKeys, [insertedRowKeys]);
-  const measureHeaderTitleWidth = useCallback2((columnIndex) => {
+  const measureHeaderTitleWidth = useCallback3((columnIndex) => {
     const title = columns[columnIndex]?.title ?? "";
     const context = canvasRef.current?.getContext("2d");
     if (!context) return Array.from(title).reduce((width3, character) => width3 + (/^[\x00-\x7F]$/.test(character) ? 7 : 13), 0);
@@ -2551,7 +2598,7 @@ function TableInner({
     context.restore();
     return width2;
   }, [columns]);
-  const getCellLabel = useCallback2((rowIndex, columnIndex) => {
+  const getCellLabel = useCallback3((rowIndex, columnIndex) => {
     const row = rows[rowIndex];
     const column = columns[columnIndex];
     if (!row || !column || column.rowSelection || column.rowDragHandle) return "";
@@ -2562,8 +2609,8 @@ function TableInner({
       return "Render error";
     }
   }, [columns, rows]);
-  const getCellSpan = useCallback2((rowIndex, columnIndex) => cellSpanLookup.covered.get(getCellCoordKey2(rowIndex, columnIndex)), [cellSpanLookup]);
-  const getCellDisplayWidth = useCallback2((columnIndex, colSpan = 1) => {
+  const getCellSpan = useCallback3((rowIndex, columnIndex) => cellSpanLookup.covered.get(getCellCoordKey2(rowIndex, columnIndex)), [cellSpanLookup]);
+  const getCellDisplayWidth = useCallback3((columnIndex, colSpan = 1) => {
     let width2 = 0;
     for (let index = columnIndex; index < Math.min(columns.length, columnIndex + colSpan); index += 1) {
       width2 += metrics[index]?.width ?? 0;
@@ -2578,7 +2625,7 @@ function TableInner({
     if (nextRowIndex === selection.rowIndex && nextColumnIndex === selection.columnIndex) return;
     setSelection({ ...selection, rowIndex: nextRowIndex, columnIndex: nextColumnIndex });
   }, [columns, getRowKey, rows, selection, setSelection]);
-  const draw = useCallback2(() => {
+  const draw = useCallback3(() => {
     frameRef.current = null;
     const canvas = canvasRef.current;
     if (!canvas || viewport.width <= 0) return;
@@ -2624,15 +2671,15 @@ function TableInner({
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
     paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, resolveColor: (color) => resolveCanvasColor(themeStyles, color), colors: themeColors });
   }, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDragPreview, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
-  const scheduleDraw = useCallback2(() => {
+  const scheduleDraw = useCallback3(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
   }, [draw]);
-  const drawImmediately = useCallback2(() => {
+  const drawImmediately = useCallback3(() => {
     if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
     frameRef.current = null;
     draw();
   }, [draw]);
-  const getSelectionHorizontalVisibility = useCallback2((scrollLeft) => {
+  const getSelectionHorizontalVisibility = useCallback3((scrollLeft) => {
     if (!selection || selectionRange) return "visible";
     const column = columns[selection.columnIndex];
     if (!column || column.fixed !== void 0) return "visible";
@@ -2643,7 +2690,7 @@ function TableInner({
     if (left >= viewport.width - rightFixedWidth) return "hidden-right";
     return "visible";
   }, [columns, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, rightFixedWidth, selection, selectionRange, viewport.width]);
-  const getSelectionEdgeIndicator = useCallback2((scrollLeft, scrollTop) => {
+  const getSelectionEdgeIndicator = useCallback3((scrollLeft, scrollTop) => {
     if (!selection || selectionRange) return null;
     const row = rows[selection.rowIndex];
     const metric = metrics[selection.columnIndex];
@@ -2666,14 +2713,17 @@ function TableInner({
     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;
+    const leftBoundary = horizontalStart - borderWidth;
+    const rightBoundary = horizontalEnd - 1;
+    const topBoundary = verticalStart - borderWidth;
+    const bottomBoundary = renderHeight;
+    const markerX = hiddenLeft ? leftBoundary : rightBoundary;
+    const markerY = hiddenTop ? topBoundary : bottomBoundary;
     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);
+      const markerTop = Math.max(rawTop - borderWidth, topBoundary);
+      const markerBottom = Math.min(rawBottom + borderWidth, renderHeight + borderWidth);
+      const topClip = Math.max(0, verticalStart - rawTop);
+      const bottomClip = Math.max(0, rawBottom - renderHeight);
       if (topClip > 0 || bottomClip > 0) {
         const foldAtTop = topClip > 0;
         const fold = Math.min(cornerLength, foldAtTop ? topClip : bottomClip);
@@ -2682,7 +2732,7 @@ function TableInner({
           const cornerHeight = Math.max(cornerLength, markerBottom - markerTop);
           const cornerOnLeft = hiddenLeft;
           const shapeLeft = cornerOnLeft ? markerX : markerX + borderWidth - cornerWidth;
-          const shapeTop = foldAtTop ? verticalStart : renderHeight - cornerHeight;
+          const shapeTop = foldAtTop ? topBoundary : renderHeight + borderWidth - cornerHeight;
           return {
             side: `${foldAtTop ? "top" : "bottom"}-${cornerOnLeft ? "left" : "right"}`,
             orientation: "corner",
@@ -2709,19 +2759,19 @@ function TableInner({
         }
       };
     }
-    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);
+    const horizontalMarkerEnd = horizontalEnd + 1;
+    const markerLeft = Math.max(rawLeft - borderWidth, leftBoundary);
+    const markerRight = Math.min(rawRight + 1, horizontalMarkerEnd);
+    const leftClip = Math.max(0, horizontalStart - rawLeft);
+    const rightClip = Math.max(0, rawRight - horizontalEnd);
     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;
+        const shapeLeft = foldAtLeft ? leftBoundary : horizontalMarkerEnd - cornerWidth;
+        const shapeTop = hiddenTop ? topBoundary : renderHeight + borderWidth - cornerHeight;
         return {
           side: `${hiddenTop ? "top" : "bottom"}-${foldAtLeft ? "left" : "right"}`,
           orientation: "corner",
@@ -2747,8 +2797,8 @@ function TableInner({
         height: targetSize
       }
     };
-  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, hasVerticalBorders, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
-  const syncSelectionEdgeTarget = useCallback2((scrollLeft, scrollTop) => {
+  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
+  const syncSelectionEdgeTarget = useCallback3((scrollLeft, scrollTop) => {
     const target = selectionEdgeTargetRef.current;
     if (!target) return;
     const indicator = getSelectionEdgeIndicator(scrollLeft, scrollTop);
@@ -2870,7 +2920,7 @@ function TableInner({
     scroller.addEventListener("scroll", lockScroll);
     return () => scroller.removeEventListener("scroll", lockScroll);
   }, [insertBusy]);
-  const showCustomScrollbar = useCallback2((axis, persist = false) => {
+  const showCustomScrollbar = useCallback3((axis, persist = false) => {
     const showVertical = axis === "vertical" || axis === "both";
     const showHorizontal = axis === "horizontal" || axis === "both";
     if (showVertical) {
@@ -2894,15 +2944,15 @@ function TableInner({
       }
     }
   }, []);
-  const keepCustomScrollbarVisible = useCallback2((axis) => {
+  const keepCustomScrollbarVisible = useCallback3((axis) => {
     showCustomScrollbar(axis, true);
   }, [showCustomScrollbar]);
-  const releaseCustomScrollbarVisible = useCallback2((axis) => {
+  const releaseCustomScrollbarVisible = useCallback3((axis) => {
     if (axis === "vertical" && verticalScrollbarDragRef.current) return;
     if (axis === "horizontal" && horizontalScrollbarDragRef.current) return;
     showCustomScrollbar(axis);
   }, [showCustomScrollbar]);
-  const updateCustomScrollbars = useCallback2(() => {
+  const updateCustomScrollbars = useCallback3(() => {
     const scroller = scrollerRef.current;
     const verticalTrack = verticalScrollbarRef.current;
     const verticalThumb = verticalScrollbarThumbRef.current;
@@ -2955,7 +3005,7 @@ function TableInner({
   useLayoutEffect3(() => {
     updateCustomScrollbars();
   }, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
-  const handleVerticalScrollbarPointerDown = useCallback2((event) => {
+  const handleVerticalScrollbarPointerDown = useCallback3((event) => {
     const scroller = scrollerRef.current;
     const track = verticalScrollbarRef.current;
     const thumb = verticalScrollbarThumbRef.current;
@@ -2992,7 +3042,7 @@ function TableInner({
       maxScrollTop
     };
   }, [showCustomScrollbar, updateCustomScrollbars]);
-  const handleVerticalScrollbarPointerMove = useCallback2((event) => {
+  const handleVerticalScrollbarPointerMove = useCallback3((event) => {
     const drag = verticalScrollbarDragRef.current;
     const scroller = scrollerRef.current;
     if (!drag || !scroller || drag.pointerId !== event.pointerId) return;
@@ -3002,14 +3052,14 @@ function TableInner({
     scroller.scrollTop = nextThumbTop / maxThumbTop * drag.maxScrollTop;
     updateCustomScrollbars();
   }, [updateCustomScrollbars]);
-  const handleVerticalScrollbarPointerUp = useCallback2((event) => {
+  const handleVerticalScrollbarPointerUp = useCallback3((event) => {
     const drag = verticalScrollbarDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
     verticalScrollbarDragRef.current = null;
     showCustomScrollbar("vertical");
   }, [showCustomScrollbar]);
-  const handleHorizontalScrollbarPointerDown = useCallback2((event) => {
+  const handleHorizontalScrollbarPointerDown = useCallback3((event) => {
     const scroller = scrollerRef.current;
     const track = horizontalScrollbarRef.current;
     const thumb = horizontalScrollbarThumbRef.current;
@@ -3052,7 +3102,7 @@ function TableInner({
       maxScrollLeft
     };
   }, [drawImmediately, getSelectionHorizontalVisibility, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars]);
-  const handleHorizontalScrollbarPointerMove = useCallback2((event) => {
+  const handleHorizontalScrollbarPointerMove = useCallback3((event) => {
     const drag = horizontalScrollbarDragRef.current;
     const scroller = scrollerRef.current;
     if (!drag || !scroller || drag.pointerId !== event.pointerId) return;
@@ -3068,7 +3118,7 @@ function TableInner({
     if (visibilityChanged) drawImmediately();
     updateCustomScrollbars();
   }, [drawImmediately, getSelectionHorizontalVisibility, syncSelectionEdgeTarget, updateCustomScrollbars]);
-  const handleHorizontalScrollbarPointerUp = useCallback2((event) => {
+  const handleHorizontalScrollbarPointerUp = useCallback3((event) => {
     const drag = horizontalScrollbarDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
@@ -3082,7 +3132,7 @@ function TableInner({
       clip.style.transform = "";
     });
   }, [scrollPosition.top]);
-  const handleScroll = useCallback2(() => {
+  const handleScroll = useCallback3(() => {
     const element = scrollerRef.current;
     if (!element) return;
     const previousScroll = scrollRef.current;
@@ -3117,11 +3167,20 @@ function TableInner({
         if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom <= verticalStart || rawTop >= renderHeight) {
           focus.style.display = "none";
         } else {
-          const borderWidth = 2;
-          const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
-          const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
-          const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-          const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
+          const bounds = getSelectionOutlineBounds({
+            left: rawLeft,
+            right: rawRight,
+            top: rawTop,
+            bottom: rawBottom,
+            horizontalStart,
+            horizontalEnd,
+            verticalStart,
+            verticalEnd: renderHeight
+          });
+          const left = Math.round(bounds.left);
+          const right = Math.round(bounds.right);
+          const top = Math.round(bounds.top);
+          const bottom = Math.round(bounds.bottom);
           focus.style.display = "block";
           focus.style.left = `${left}px`;
           focus.style.top = `${top}px`;
@@ -3150,7 +3209,7 @@ function TableInner({
     setHoveredCellTooltip(null);
     scheduleDraw();
   }, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars, viewport.width]);
-  const locateColumn = useCallback2((clientX) => {
+  const locateColumn = useCallback3((clientX) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
     const rect = canvas.getBoundingClientRect();
@@ -3178,7 +3237,7 @@ function TableInner({
     }
     return columnIndex;
   }, [columns, fixedWidth, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, rightFixedWidth, viewport.width]);
-  const getDisplayedColumnLeft = useCallback2((columnIndex) => {
+  const getDisplayedColumnLeft = useCallback3((columnIndex) => {
     const metric = metrics[columnIndex];
     if (columns[columnIndex].fixed === "left") return leftFixedOffsets.get(columnIndex) ?? 0;
     if (columns[columnIndex].fixed === "right") return viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metric.width;
@@ -3188,7 +3247,7 @@ function TableInner({
     const displayedContentRight = columns.reduce((right, _column, columnIndex) => Math.max(right, getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width), 0);
     return displayedContentRight > 0 && displayedContentRight < viewport.width ? Math.round(displayedContentRight) - 1 : null;
   }, [columns, getDisplayedColumnLeft, metrics, scrollPosition.left, viewport.width]);
-  const getHeaderLevelAtY = useCallback2((localY, headerY) => {
+  const getHeaderLevelAtY = useCallback3((localY, headerY) => {
     const y = localY - headerY;
     for (let level = 0; level < headerRowHeights.length; level += 1) {
       const top = headerRowOffsets[level] ?? 0;
@@ -3196,11 +3255,11 @@ function TableInner({
     }
     return headerDepth - 1;
   }, [headerDepth, headerRowHeights, headerRowOffsets]);
-  const resizeColumn = useCallback2((columnKey, width2) => {
+  const resizeColumn = useCallback3((columnKey, width2) => {
     setResizedColumnWidths((current) => current[columnKey] === width2 ? current : { ...current, [columnKey]: width2 });
     onColumnResize?.(columnKey, width2);
   }, [onColumnResize]);
-  const locateHeaderAction = useCallback2((clientX, clientY, columnIndex) => {
+  const locateHeaderAction = useCallback3((clientX, clientY, columnIndex) => {
     if (columnIndex < 0 || !canvasRef.current) return null;
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
@@ -3220,7 +3279,7 @@ function TableInner({
     if (visibleActions.filter && localX >= right - headerActionSlotWidth && localX < right) return "filter";
     return null;
   }, [columnDraggable, columns, fixedHeader, getDisplayedColumnLeft, headerActionSize, headerActionSlotWidth, headerLeafHeight, headerLeafTop, measureHeaderTitleWidth, metrics]);
-  const isHeaderTitleTruncated = useCallback2((columnIndex) => {
+  const isHeaderTitleTruncated = useCallback3((columnIndex) => {
     const canvas = canvasRef.current;
     if (columnIndex < 0 || !canvas) return false;
     const column = columns[columnIndex];
@@ -3230,7 +3289,7 @@ function TableInner({
     const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
     return getHeaderTitleRequiredWidth(column, titleWidth) > Math.max(0, metric.width - actionWidth);
   }, [columnDraggable, columns, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
-  const locateHeaderDragHandle = useCallback2((clientX, clientY, columnIndex) => {
+  const locateHeaderDragHandle = useCallback3((clientX, clientY, columnIndex) => {
     if (!columnDraggable || columnIndex < 0 || !canvasRef.current) return false;
     const column = columns[columnIndex];
     if (column.rowSelection || column.rowDragHandle || column.rowNumber) return false;
@@ -3244,14 +3303,14 @@ function TableInner({
     const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
     return localX >= columnRight - headerActionSlotWidth && localX < columnRight - 2;
   }, [columnDraggable, columns, fixedHeader, getDisplayedColumnLeft, headerActionSize, headerActionSlotWidth, headerLeafHeight, headerLeafTop, measureHeaderTitleWidth, metrics]);
-  const getHeaderCellLeft = useCallback2((cell) => {
+  const getHeaderCellLeft = useCallback3((cell) => {
     const startMetric = metrics[cell.startIndex];
     const fixedSide = columns[cell.startIndex]?.fixed;
     if (!startMetric) return 0;
     return fixedSide === "left" ? leftFixedOffsets.get(cell.startIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(cell.startIndex) ?? 0) - startMetric.width : getScrollableColumnLeft(cell.startIndex) - scrollRef.current.left;
   }, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
-  const getHeaderCellWidth = useCallback2((cell) => cell.leaf ? metrics[cell.startIndex]?.width ?? 0 : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1), [getCellDisplayWidth, metrics]);
-  const getHeaderCellEdgeFromMetrics = useCallback2((startIndex, endIndex, edge, nextMetrics) => {
+  const getHeaderCellWidth = useCallback3((cell) => cell.leaf ? metrics[cell.startIndex]?.width ?? 0 : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1), [getCellDisplayWidth, metrics]);
+  const getHeaderCellEdgeFromMetrics = useCallback3((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;
@@ -3275,7 +3334,7 @@ function TableInner({
     }
     return left + (edge === "right" ? width2 : 0);
   }, [columns, fixedWidth, viewport.width]);
-  const locateHeaderResizeHit = useCallback2((clientX, clientY) => {
+  const locateHeaderResizeHit = useCallback3((clientX, clientY) => {
     if (!columnResizable || !canvasRef.current) return null;
     const rect = canvasRef.current.getBoundingClientRect();
     const localX = clientX - rect.left;
@@ -3302,15 +3361,15 @@ function TableInner({
     }
     return closest;
   }, [columnResizable, columns, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, getHeaderLevelAtY, headerCells, headerHeight]);
-  const locateHeaderResizeCell = useCallback2((clientX, clientY) => locateHeaderResizeHit(clientX, clientY)?.cell ?? null, [locateHeaderResizeHit]);
-  const locateHeaderCellDragHandle = useCallback2((clientX, clientY, cell) => {
+  const locateHeaderResizeCell = useCallback3((clientX, clientY) => locateHeaderResizeHit(clientX, clientY)?.cell ?? null, [locateHeaderResizeHit]);
+  const locateHeaderCellDragHandle = useCallback3((clientX, clientY, cell) => {
     if (!columnDraggable || !canvasRef.current) return false;
     if (cell.leaf) return locateHeaderDragHandle(clientX, clientY, cell.startIndex);
     const localX = clientX - canvasRef.current.getBoundingClientRect().left;
     const right = getHeaderCellLeft(cell) + getHeaderCellWidth(cell);
     return localX >= right - headerActionSlotWidth && localX < right - 2;
   }, [columnDraggable, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, locateHeaderDragHandle]);
-  const locateHeaderCell = useCallback2((clientX, clientY) => {
+  const locateHeaderCell = useCallback3((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
     const rect = canvas.getBoundingClientRect();
@@ -3327,7 +3386,7 @@ function TableInner({
     }
     return null;
   }, [fixedHeader, getHeaderCellLeft, getHeaderCellWidth, getHeaderLevelAtY, headerCells, headerHeight]);
-  const setDragGuide = useCallback2((x, top = 0) => {
+  const setDragGuide = useCallback3((x, top = 0) => {
     const guide = dragGuideRef.current;
     if (!guide) return;
     guide.style.display = x === null ? "none" : "block";
@@ -3336,20 +3395,20 @@ function TableInner({
       guide.style.transform = `translateX(${Math.round(x)}px)`;
     }
   }, []);
-  const setRowDragGuide = useCallback2((y) => {
+  const setRowDragGuide = useCallback3((y) => {
     const guide = rowDragGuideRef.current;
     if (!guide) return;
     guide.style.display = y === null ? "none" : "block";
     if (y !== null) guide.style.transform = `translateY(${Math.round(y)}px)`;
   }, []);
-  const locateRow = useCallback2((clientY) => {
+  const locateRow = useCallback3((clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return -1;
     const localY = clientY - canvas.getBoundingClientRect().top;
     const rowIndex = Math.floor((localY - bodyTop + scrollRef.current.top) / rowHeight);
     return rowIndex >= 0 && rowIndex < rows.length ? rowIndex : -1;
   }, [bodyTop, rowHeight, rows.length]);
-  const handleRowOrderPointerDown = useCallback2((event) => {
+  const handleRowOrderPointerDown = useCallback3((event) => {
     if (!rowDraggable || event.button !== 0 || rowOrderDragRef.current) return;
     const columnIndex = locateColumn(event.clientX);
     const sourceIndex = locateRow(event.clientY);
@@ -3363,7 +3422,7 @@ function TableInner({
       targetIndex: sourceIndex
     };
   }, [columns, locateColumn, locateRow, rowDraggable]);
-  const handleRowOrderPointerMove = useCallback2((event) => {
+  const handleRowOrderPointerMove = useCallback3((event) => {
     const drag = rowOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     if (!drag.active) {
@@ -3391,7 +3450,7 @@ function TableInner({
     setRowDragPreview(null);
     setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
   }, [bodyTop, hideDragTooltips, locateRow, renderHeight, rowHeight, rows.length, setRowDragGuide]);
-  const finishRowOrderPointerDrag = useCallback2((event, apply) => {
+  const finishRowOrderPointerDrag = useCallback3((event, apply) => {
     const drag = rowOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture?.(event.pointerId);
@@ -3409,7 +3468,7 @@ function TableInner({
       });
     }
   }, [applyRowOrder, setRowDragGuide]);
-  const locateCell = useCallback2((clientX, clientY) => {
+  const locateCell = useCallback3((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
     const rect = canvas.getBoundingClientRect();
@@ -3429,7 +3488,7 @@ function TableInner({
       columnKey: columns[targetColumnIndex].key
     };
   }, [bodyTop, columns, fixedHeader, getCellSpan, getRowKey, locateColumn, rowHeight, rows]);
-  const beginRangeDrag = useCallback2((event) => {
+  const beginRangeDrag = useCallback3((event) => {
     if (!rangeSelection) return;
     if (event.button !== 0 || editing || event.target !== event.currentTarget) return;
     const cell = locateCell(event.clientX, event.clientY);
@@ -3438,7 +3497,7 @@ function TableInner({
     setSelectionRange(null);
     event.currentTarget.setPointerCapture(event.pointerId);
   }, [columns, editing, locateCell, rangeSelection]);
-  const updateRangeDrag = useCallback2((event) => {
+  const updateRangeDrag = useCallback3((event) => {
     const drag = rangeDragRef.current;
     if (!drag) return;
     const focus = locateCell(event.clientX, event.clientY);
@@ -3448,7 +3507,7 @@ function TableInner({
     event.preventDefault();
     setSelectionRange((current) => current?.focus.rowIndex === focus.rowIndex && current.focus.columnIndex === focus.columnIndex ? current : { anchor: drag.anchor, focus });
   }, [columns, locateCell]);
-  const endRangeDrag = useCallback2((event) => {
+  const endRangeDrag = useCallback3((event) => {
     const drag = rangeDragRef.current;
     if (!drag) return;
     rangeDragRef.current = null;
@@ -3458,7 +3517,7 @@ function TableInner({
     setSelection(drag.anchor);
     scrollerRef.current?.focus({ preventScroll: true });
   }, [setSelection]);
-  const selectRow = useCallback2((rowIndex, event, forceToggle = false) => {
+  const selectRow = useCallback3((rowIndex, event, forceToggle = false) => {
     if (!rowSelection) return;
     clickedCellRef.current = null;
     setSelectionRange(null);
@@ -3478,7 +3537,7 @@ function TableInner({
     rowAnchorRef.current = rowIndex;
     setRowKeys(next);
   }, [getRowKey, rowKeys, rowSelection, rows, selectedRowKeySet, setRowKeys, setSelection]);
-  const selectColumn = useCallback2((columnIndex, event) => {
+  const selectColumn = useCallback3((columnIndex, event) => {
     if (!columnSelection || columnIndex < 0) return;
     clickedCellRef.current = null;
     setSelectionRange(null);
@@ -3498,7 +3557,7 @@ function TableInner({
     columnAnchorRef.current = columnIndex;
     setColumnKeys(next);
   }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
-  const toggleColumnFromMenu = useCallback2((columnIndex) => {
+  const toggleColumnFromMenu = useCallback3((columnIndex) => {
     if (!columnSelection || columnIndex < 0) return;
     clickedCellRef.current = null;
     setSelectionRange(null);
@@ -3510,7 +3569,7 @@ function TableInner({
     columnAnchorRef.current = columnIndex;
     setColumnKeys(next);
   }, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
-  const revealCell = useCallback2((cell) => {
+  const revealCell = useCallback3((cell) => {
     const scroller = scrollerRef.current;
     const metric = metrics[cell.columnIndex];
     const column = columns[cell.columnIndex];
@@ -3540,13 +3599,13 @@ function TableInner({
     scrollRef.current = { left: scroller.scrollLeft, top: scroller.scrollTop };
     scheduleDraw();
   }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, scheduleDraw, viewport.width]);
-  const isCellEditable = useCallback2((cell) => {
+  const isCellEditable = useCallback3((cell) => {
     const column = columns[cell.columnIndex];
     const row = rows[cell.rowIndex];
     if (!column || !row || column.dataIndex === void 0 || column.rowNumber || column.rowSelection || column.rowDragHandle) return false;
     return typeof column.editable === "function" ? column.editable(row[column.dataIndex], row, cell.rowIndex) : column.editable === true;
   }, [columns, rows]);
-  const beginEdit = useCallback2((cell) => {
+  const beginEdit = useCallback3((cell) => {
     const column = columns[cell.columnIndex];
     if (!isCellEditable(cell) || column.dataIndex === void 0) return;
     const value = rows[cell.rowIndex]?.[column.dataIndex];
@@ -3616,7 +3675,7 @@ function TableInner({
       return next;
     });
   };
-  const commitEdit = useCallback2((nextDraft, close = true) => {
+  const commitEdit = useCallback3((nextDraft, close = true) => {
     if (!editing) return;
     if (!isCellEditable(editing)) {
       setEditing(null);
@@ -3648,6 +3707,7 @@ function TableInner({
           options: column.editor.options,
           searchable: column.editor.searchable,
           allowCustomValue: column.editor.allowCustomValue,
+          strictOptions: column.editor.strictOptions,
           maxDropdownHeight: column.editor.maxDropdownHeight,
           style: editorStyle,
           labels,
@@ -3720,7 +3780,7 @@ function TableInner({
       }
     );
   };
-  const handleKeyDown = useCallback2((event) => {
+  const handleKeyDown = useCallback3((event) => {
     if (editing || !selection) return;
     if (event.key === "Enter") {
       event.preventDefault();
@@ -3793,7 +3853,7 @@ function TableInner({
       clipPath: `inset(${Math.max(0, visibleTop - cellTop)}px ${Math.max(0, cellLeft + cellWidth - visibleRight)}px ${Math.max(0, cellTop + cellHeight - visibleBottom)}px ${Math.max(0, visibleLeft - cellLeft)}px)`
     };
   }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, rowStyle, viewport.width]);
-  const handleColumnPointerDown = useCallback2((event) => {
+  const handleColumnPointerDown = useCallback3((event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const localY = event.clientY - rect.top;
     const headerY = fixedHeader ? 0 : -scrollRef.current.top;
@@ -3837,7 +3897,7 @@ function TableInner({
       return;
     }
   }, [fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerHeight, headerRowOffsets, locateHeaderResizeHit, metrics]);
-  const handleColumnPointerMove = useCallback2((event) => {
+  const handleColumnPointerMove = useCallback3((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
     const column = columns[drag.columnIndex];
@@ -3873,7 +3933,7 @@ function TableInner({
     resizeColumn(column.key, width2);
     setGuideFromWidths([width2]);
   }, [columnDraggable, columns, getHeaderCellEdgeFromMetrics, resizeColumn, viewport.width]);
-  const handleColumnPointerUp = useCallback2((event) => {
+  const handleColumnPointerUp = useCallback3((event) => {
     const drag = columnDragRef.current;
     if (!drag) return;
     if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
@@ -3883,7 +3943,7 @@ function TableInner({
     document.documentElement.classList.remove("rvg-is-dragging");
     event.currentTarget.style.cursor = "default";
   }, []);
-  const clearColumnOrderPointerDrag = useCallback2((canvas) => {
+  const clearColumnOrderPointerDrag = useCallback3((canvas) => {
     if (columnOrderLongPressTimerRef.current) {
       clearTimeout(columnOrderLongPressTimerRef.current);
       columnOrderLongPressTimerRef.current = null;
@@ -3896,7 +3956,7 @@ function TableInner({
     document.documentElement.classList.remove("rvg-is-dragging");
     canvas.style.cursor = "default";
   }, [setDragGuide]);
-  const updateColumnDragPreview = useCallback2((sourceCell, clientX, canvas) => {
+  const updateColumnDragPreview = useCallback3((sourceCell, clientX, canvas) => {
     const rootRect = rootRef.current?.getBoundingClientRect() ?? canvas.getBoundingClientRect();
     const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 100;
     const previewWidth = sourceWidth;
@@ -3908,7 +3968,7 @@ function TableInner({
       sourceLeft: getDisplayedColumnLeft(sourceCell.startIndex)
     });
   }, [getDisplayedColumnLeft, metrics, viewport.width]);
-  const activateColumnOrderPointerDrag = useCallback2((canvas, clientX) => {
+  const activateColumnOrderPointerDrag = useCallback3((canvas, clientX) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.active) return;
     if (columnOrderLongPressTimerRef.current) {
@@ -3922,7 +3982,7 @@ function TableInner({
     canvas.style.cursor = "move";
     updateColumnDragPreview(drag.sourceCell, clientX, canvas);
   }, [hideDragTooltips, updateColumnDragPreview]);
-  const handleColumnOrderPointerDown = useCallback2((event) => {
+  const handleColumnOrderPointerDown = useCallback3((event) => {
     if (!columnDraggable || event.button !== 0 || columnDragRef.current) return;
     const sourceCell = locateHeaderCell(event.clientX, event.clientY);
     if (!sourceCell || locateHeaderResizeCell(event.clientX, event.clientY)) return;
@@ -3946,7 +4006,7 @@ function TableInner({
       activateColumnOrderPointerDrag(canvas, drag.startX);
     }, 320);
   }, [activateColumnOrderPointerDrag, columnDraggable, columns, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell]);
-  const handleColumnOrderPointerMove = useCallback2((event) => {
+  const handleColumnOrderPointerMove = useCallback3((event) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId || columnDragRef.current) return;
     if (!drag.active) {
@@ -4017,7 +4077,7 @@ function TableInner({
       columnEdge
     };
   }, [activateColumnOrderPointerDrag, columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, locateColumn, locateHeaderCell, setDragGuide, updateColumnDragPreview]);
-  const finishColumnOrderPointerDrag = useCallback2((event, apply) => {
+  const finishColumnOrderPointerDrag = useCallback3((event, apply) => {
     const drag = columnOrderDragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
     if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
@@ -4041,7 +4101,7 @@ function TableInner({
       suppressClickRef.current = false;
     }, 0);
   }, [applyColumnOrder, clearColumnOrderPointerDrag, utilityColumnCount]);
-  const queueSortStateChange = useCallback2((next) => {
+  const queueSortStateChange = useCallback3((next) => {
     setSortState(next);
   }, []);
   const renderHeaderIcons = (columnIndex, left) => {
@@ -4076,7 +4136,7 @@ function TableInner({
     }
     return icons;
   };
-  const createHeaderTooltip = useCallback2((action, columnIndex, cell) => {
+  const createHeaderTooltip = useCallback3((action, columnIndex, cell) => {
     const column = cell?.column ?? columns[columnIndex];
     if (!column) return null;
     const cellLeft = cell ? getHeaderCellLeft(cell) : getDisplayedColumnLeft(columnIndex);
@@ -4145,7 +4205,7 @@ function TableInner({
       placement
     };
   }, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSize, headerActionSlotWidth, headerDepth, headerLeafHeight, headerLeafTop, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
-  const isPointerOnHeaderTitle = useCallback2((clientX, clientY, cell) => {
+  const isPointerOnHeaderTitle = useCallback3((clientX, clientY, cell) => {
     const canvas = canvasRef.current;
     if (!canvas) return false;
     const rect = canvas.getBoundingClientRect();
@@ -4166,7 +4226,7 @@ function TableInner({
     const textTop = rowTop + 8;
     return localX >= textLeft - 4 && localX <= textLeft + textWidth + 4 && localY >= textTop - 2 && localY <= textTop + 18;
   }, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerRowOffsets]);
-  const locateCustomHeaderTooltip = useCallback2((clientX, clientY, columnIndex) => {
+  const locateCustomHeaderTooltip = useCallback3((clientX, clientY, columnIndex) => {
     const root = rootRef.current;
     const canvas = canvasRef.current;
     if (!root || !canvas || columnIndex < 0) return null;
@@ -4657,11 +4717,20 @@ function TableInner({
     const horizontalEnd = column.fixed === void 0 ? viewport.width - rightFixedWidth : viewport.width;
     const verticalStart = fixedHeader ? bodyTop : 0;
     if (rawRight <= horizontalStart || rawLeft >= horizontalEnd || rawBottom + dragOffset <= verticalStart || rawTop + dragOffset >= renderHeight) return null;
-    const borderWidth = 2;
-    const left = Math.round(Math.max(rawLeft - borderWidth, horizontalStart));
-    const right = Math.round(Math.min(rawRight + 1, horizontalEnd, viewport.width));
-    const top = Math.round(Math.max(rawTop - borderWidth, verticalStart));
-    const bottom = Math.round(Math.min(rawBottom + borderWidth, renderHeight));
+    const bounds = getSelectionOutlineBounds({
+      left: rawLeft,
+      right: rawRight,
+      top: rawTop,
+      bottom: rawBottom,
+      horizontalStart,
+      horizontalEnd,
+      verticalStart,
+      verticalEnd: renderHeight
+    });
+    const left = Math.round(bounds.left);
+    const right = Math.round(bounds.right);
+    const top = Math.round(bounds.top);
+    const bottom = Math.round(bounds.bottom);
     return {
       left,
       top,