@lensui/lens-table 0.1.82 → 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
@@ -1144,6 +1159,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;
@@ -1632,51 +1665,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);
@@ -2696,14 +2743,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);
@@ -2712,7 +2762,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",
@@ -2739,19 +2789,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",
@@ -2777,7 +2827,7 @@ function TableInner({
         height: targetSize
       }
     };
-  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, hasVerticalBorders, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
+  }, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
   const syncSelectionEdgeTarget = (0, import_react8.useCallback)((scrollLeft, scrollTop) => {
     const target = selectionEdgeTargetRef.current;
     if (!target) return;
@@ -3147,11 +3197,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`;
@@ -3678,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,
@@ -4687,11 +4747,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,

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';