@lensui/lens-table 0.1.83 → 0.1.84

package/README.md

@@ -315,6 +315,11 @@ const columns: GridColumn<Row>[] = [
 | `time-range`      | `'09:00 ~ 18:00'`                       | 时间范围选择器。                                                    |
 | `date-time-range` | `'2026-01-01 09:00 ~ 2026-01-01 18:00'` | 日期时间范围选择器，包含日期和时间面板。                            |
 
+`select` 可配置 `searchable` 开启输入筛选。需要把输入限制为已有选项时，设置
+`strictOptions: true`：首次打开显示完整列表；开始输入后始终按输入内容筛选；失焦时只提交
+精确匹配的选项，不匹配则恢复进入编辑前的值。若 `options` 包含 `{ label: '', value: '' }`，
+清空输入会提交该空选项。
+
 可选 `format` 用于控制提交到数据里的字符串格式，例如：
 
 ```tsx

package/dist/index.cjs

@@ -345,7 +345,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 = (0, import_react2.useRef)(null);
   const popupRef = (0, import_react2.useRef)(null);
   const activeOptionRef = (0, import_react2.useRef)(null);
@@ -355,6 +355,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
   const listboxId = (0, import_react2.useId)();
   const originalValue = originalValueRef.current;
   const [inputValue, setInputValue] = (0, import_react2.useState)(value);
+  const [hasTyped, setHasTyped] = (0, import_react2.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react2.useState)(() => {
     const selectedIndex = options.findIndex((option) => option.value === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
@@ -364,10 +365,23 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     visibility: "hidden"
   });
   const filteredOptions = (0, import_react2.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 = (0, import_react2.useCallback)(() => {
+    if (strictOptions) return exactInputOption?.value ?? originalValue;
+    return allowCustomValue ? inputValue || originalValue : originalValue;
+  }, [allowCustomValue, exactInputOption, inputValue, originalValue, strictOptions]);
   (0, import_react2.useLayoutEffect)(() => {
     const positionPopup = () => {
       const rect = editorRef.current?.getBoundingClientRect();
@@ -434,11 +448,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);
@@ -460,7 +474,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__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: editorRef, className: "rvg-choice-editor rvg-searchable-choice-editor", style, children: [
@@ -474,6 +488,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";
@@ -489,8 +504,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";
@@ -499,7 +514,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         onClick: () => selectOption(option),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label }),
-          option.value === originalValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChoiceCheckIcon, {})
+          option.value === selectedValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChoiceCheckIcon, {})
         ]
       },
       option.value
@@ -3722,6 +3737,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,

package/dist/index.d.cts

@@ -211,6 +211,8 @@ interface GridColumn<Row> {
         }>;
         searchable?: boolean;
         allowCustomValue?: boolean;
+        /** Keep typed input filtered and only commit values that exactly match an option. */
+        strictOptions?: boolean;
         maxDropdownHeight?: number;
     } | {
         type: 'textarea';

package/dist/index.d.ts

@@ -211,6 +211,8 @@ interface GridColumn<Row> {
         }>;
         searchable?: boolean;
         allowCustomValue?: boolean;
+        /** Keep typed input filtered and only commit values that exactly match an option. */
+        strictOptions?: boolean;
         maxDropdownHeight?: number;
     } | {
         type: 'textarea';

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
@@ -1690,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]);
@@ -1703,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]);
@@ -2173,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");
@@ -2224,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;
@@ -2251,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);
@@ -2325,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;
@@ -2340,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);
@@ -2369,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);
@@ -2378,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 });
@@ -2451,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]);
@@ -2504,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);
@@ -2573,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);
@@ -2583,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 "";
@@ -2594,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;
@@ -2610,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;
@@ -2656,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";
@@ -2675,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];
@@ -2783,7 +2798,7 @@ function TableInner({
       }
     };
   }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
-  const syncSelectionEdgeTarget = useCallback2((scrollLeft, scrollTop) => {
+  const syncSelectionEdgeTarget = useCallback3((scrollLeft, scrollTop) => {
     const target = selectionEdgeTargetRef.current;
     if (!target) return;
     const indicator = getSelectionEdgeIndicator(scrollLeft, scrollTop);
@@ -2905,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) {
@@ -2929,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;
@@ -2990,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;
@@ -3027,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;
@@ -3037,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;
@@ -3087,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;
@@ -3103,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);
@@ -3117,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;
@@ -3194,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();
@@ -3222,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;
@@ -3232,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;
@@ -3240,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;
@@ -3264,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];
@@ -3274,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;
@@ -3288,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;
@@ -3319,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;
@@ -3346,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();
@@ -3371,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";
@@ -3380,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);
@@ -3407,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) {
@@ -3435,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);
@@ -3453,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();
@@ -3473,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);
@@ -3482,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);
@@ -3492,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;
@@ -3502,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);
@@ -3522,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);
@@ -3542,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);
@@ -3554,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];
@@ -3584,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];
@@ -3660,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);
@@ -3692,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,
@@ -3764,7 +3780,7 @@ function TableInner({
       }
     );
   };
-  const handleKeyDown = useCallback2((event) => {
+  const handleKeyDown = useCallback3((event) => {
     if (editing || !selection) return;
     if (event.key === "Enter") {
       event.preventDefault();
@@ -3837,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;
@@ -3881,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];
@@ -3917,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);
@@ -3927,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;
@@ -3940,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;
@@ -3952,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) {
@@ -3966,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;
@@ -3990,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) {
@@ -4061,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);
@@ -4085,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) => {
@@ -4120,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);
@@ -4189,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();
@@ -4210,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;

package/package.json

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