@lensui/lens-table 0.1.76 → 0.1.78

package/dist/index.cjs

@@ -332,10 +332,25 @@ function LoadingSpinnerIcon() {
 
 // src/components/editors/ChoiceEditor.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var SEARCHABLE_CHOICE_POPUP_MAX_WIDTH = 360;
+var SEARCHABLE_CHOICE_POPUP_HORIZONTAL_PADDING = 44;
+var SEARCHABLE_CHOICE_POPUP_VIEWPORT_GAP = 8;
+function getSearchableChoicePopupHorizontalLayout(anchorLeft, anchorWidth, longestLabelWidth, viewportWidth) {
+  const availableWidth = Math.max(0, viewportWidth - SEARCHABLE_CHOICE_POPUP_VIEWPORT_GAP * 2);
+  const desiredWidth = Math.max(anchorWidth, longestLabelWidth + SEARCHABLE_CHOICE_POPUP_HORIZONTAL_PADDING);
+  const width = Math.min(desiredWidth, SEARCHABLE_CHOICE_POPUP_MAX_WIDTH, availableWidth);
+  const left = Math.max(
+    SEARCHABLE_CHOICE_POPUP_VIEWPORT_GAP,
+    Math.min(anchorLeft, viewportWidth - SEARCHABLE_CHOICE_POPUP_VIEWPORT_GAP - width)
+  );
+  return { left, width };
+}
 function SearchableChoiceEditor({ value, options, allowCustomValue, 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);
+  const popupReadyRef = (0, import_react2.useRef)(false);
+  const navigationSourceRef = (0, import_react2.useRef)(null);
   const originalValueRef = (0, import_react2.useRef)(value);
   const listboxId = (0, import_react2.useId)();
   const originalValue = originalValueRef.current;
@@ -344,7 +359,10 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     const selectedIndex = options.findIndex((option) => option.value === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
   });
-  const [popupStyle, setPopupStyle] = (0, import_react2.useState)({});
+  const [popupStyle, setPopupStyle] = (0, import_react2.useState)({
+    position: "fixed",
+    visibility: "hidden"
+  });
   const filteredOptions = (0, import_react2.useMemo)(() => {
     const query = inputValue.trim().toLocaleLowerCase();
     if (!query || query === originalValue.toLocaleLowerCase()) return options;
@@ -354,24 +372,36 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     const positionPopup = () => {
       const rect = editorRef.current?.getBoundingClientRect();
       if (!rect) return;
+      const longestLabelWidth = Math.max(
+        0,
+        ...Array.from(popupRef.current?.querySelectorAll(".rvg-choice-item > span") ?? []).map((label) => label.scrollWidth)
+      );
+      const horizontal = getSearchableChoicePopupHorizontalLayout(
+        rect.left,
+        rect.width,
+        longestLabelWidth,
+        window.innerWidth
+      );
       const availableBelow = window.innerHeight - rect.bottom - 8;
       const availableAbove = rect.top - 8;
       if (availableBelow < 120 && availableAbove > availableBelow) {
         setPopupStyle({
           position: "fixed",
           bottom: window.innerHeight - rect.top + 4,
-          left: rect.left,
-          width: rect.width,
-          maxHeight: Math.min(maxDropdownHeight, availableAbove)
+          left: horizontal.left,
+          width: horizontal.width,
+          maxHeight: Math.min(maxDropdownHeight, availableAbove),
+          visibility: popupReadyRef.current ? "visible" : "hidden"
         });
         return;
       }
       setPopupStyle({
         position: "fixed",
         top: rect.bottom + 4,
-        left: rect.left,
-        width: rect.width,
-        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
+        left: horizontal.left,
+        width: horizontal.width,
+        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow)),
+        visibility: popupReadyRef.current ? "visible" : "hidden"
       });
     };
     positionPopup();
@@ -383,8 +413,22 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     };
   }, [maxDropdownHeight]);
   (0, import_react2.useLayoutEffect)(() => {
-    activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-  }, [activeIndex, filteredOptions, popupStyle]);
+    if (popupReadyRef.current) return;
+    if (popupStyle.top === void 0 && popupStyle.bottom === void 0) return;
+    const selectedOption = popupRef.current?.querySelector('[aria-selected="true"]') ?? activeOptionRef.current;
+    selectedOption?.scrollIntoView?.({ block: "center", inline: "nearest" });
+    popupReadyRef.current = true;
+    setPopupStyle((current) => ({ ...current, visibility: "visible" }));
+  }, [popupStyle.bottom, popupStyle.top]);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (!popupReadyRef.current) return;
+    if (navigationSourceRef.current === "keyboard") {
+      activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    } else if (navigationSourceRef.current === "filter" && popupRef.current) {
+      popupRef.current.scrollTop = 0;
+    }
+    navigationSourceRef.current = null;
+  }, [activeIndex, filteredOptions]);
   (0, import_react2.useEffect)(() => {
     const handleOutsidePointer = (event) => {
       const target = event.target;
@@ -404,10 +448,12 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     if (event.key === "Escape") onCancel();
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.max(0, index - 1));
     }
     if (event.key === "Enter") {
@@ -430,6 +476,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         onChange: (event) => {
           setInputValue(event.target.value);
           onChange(event.target.value);
+          navigationSourceRef.current = "filter";
           setActiveIndex(0);
         },
         onKeyDown: handleKeyDown
@@ -445,7 +492,10 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         "aria-selected": option.value === originalValue,
         className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
         onPointerDown: (event) => event.preventDefault(),
-        onMouseEnter: () => setActiveIndex(index),
+        onMouseEnter: () => {
+          navigationSourceRef.current = "pointer";
+          setActiveIndex(index);
+        },
         onClick: () => selectOption(option),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label }),
@@ -941,25 +991,6 @@ function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCo
   ] });
 }
 
-// src/icons/domIcons.ts
-function createRowDragHandleSvg() {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 16 16");
-  for (const [cx, cy] of [[5, 4], [11, 4], [5, 8], [11, 8], [5, 12], [11, 12]]) {
-    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-    circle.setAttribute("cx", String(cx));
-    circle.setAttribute("cy", String(cy));
-    circle.setAttribute("r", "1");
-    svg.appendChild(circle);
-  }
-  return svg;
-}
-
-// src/Table.tsx
-var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
-var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
-
 // src/core/format.ts
 function getDisplayLabel(column, row, rowIndex) {
   const value = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
@@ -2041,6 +2072,7 @@ function TableInner({
   const columnDragRef = (0, import_react8.useRef)(null);
   const columnOrderDragRef = (0, import_react8.useRef)(null);
   const columnOrderLongPressTimerRef = (0, import_react8.useRef)(null);
+  const rowOrderDragRef = (0, import_react8.useRef)(null);
   const dragGuideRef = (0, import_react8.useRef)(null);
   const rowDragGuideRef = (0, import_react8.useRef)(null);
   const selectionFocusRef = (0, import_react8.useRef)(null);
@@ -3341,131 +3373,61 @@ function TableInner({
     const rowIndex = Math.floor((localY - bodyTop + scrollRef.current.top) / rowHeight);
     return rowIndex >= 0 && rowIndex < rows.length ? rowIndex : -1;
   }, [bodyTop, rowHeight, rows.length]);
-  (0, import_react8.useEffect)(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || !rowDraggable) return;
-    const cleanupDrag = (0, import_adapter.draggable)({
-      element: canvas,
-      canDrag: ({ input }) => {
-        const columnIndex = locateColumn(input.clientX);
-        return columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(input.clientY) >= 0;
-      },
-      getInitialData: ({ input }) => ({ type: "table-row", sourceIndex: locateRow(input.clientY) }),
-      onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
-        const sourceIndex = Number(source.data.sourceIndex);
-        const canvasRect = canvas.getBoundingClientRect();
-        const input = location.current.input;
-        const previewOffset = {
-          x: Math.max(0, Math.min(canvasRect.width, input.clientX - canvasRect.left)) + 2,
-          y: Math.max(0, Math.min(rowHeight, input.clientY - canvasRect.top - bodyTop - sourceIndex * rowHeight + scrollRef.current.top)) + 2
-        };
-        (0, import_set_custom_native_drag_preview.setCustomNativeDragPreview)({
-          nativeSetDragImage,
-          getOffset: () => previewOffset,
-          render: ({ container }) => {
-            const frame = document.createElement("div");
-            frame.className = "rvg-row-drag-preview-frame";
-            frame.style.width = `${canvasRect.width + 4}px`;
-            frame.style.height = `${rowHeight + 4}px`;
-            const preview = document.createElement("div");
-            preview.className = "rvg-row-drag-preview";
-            preview.style.width = `${canvasRect.width}px`;
-            preview.style.height = `${rowHeight}px`;
-            const row = rows[sourceIndex];
-            const rowKey2 = getRowKey(row, sourceIndex);
-            columns.forEach((column, columnIndex) => {
-              const left = getDisplayedColumnLeft(columnIndex);
-              const columnWidth = metrics[columnIndex].width;
-              if (left + columnWidth <= 0 || left >= canvasRect.width) return;
-              const cell = document.createElement("div");
-              cell.className = "rvg-row-drag-preview-cell";
-              cell.style.left = `${left}px`;
-              cell.style.width = `${columnWidth}px`;
-              cell.style.justifyContent = column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start";
-              if (column.rowDragHandle && !column.rowSelection) {
-                cell.appendChild(createRowDragHandleSvg());
-              } else if (column.rowSelection) {
-                if (column.rowSelectionIndicator !== "none") {
-                  const checkbox = document.createElement("span");
-                  checkbox.className = selectedRowKeySet.has(rowKey2) ? "rvg-preview-checkbox is-checked" : "rvg-preview-checkbox";
-                  checkbox.textContent = selectedRowKeySet.has(rowKey2) ? "\u2713" : "";
-                  cell.appendChild(checkbox);
-                }
-              } else {
-                cell.textContent = getCellLabel(sourceIndex, columnIndex);
-              }
-              if (selection?.rowKey === rowKey2 && selection.columnKey === column.key) cell.classList.add("is-selected");
-              preview.appendChild(cell);
-            });
-            frame.appendChild(preview);
-            container.appendChild(frame);
-            return () => frame.remove();
-          }
-        });
-      },
-      onDragStart: ({ source }) => {
-        const sourceIndex = Number(source.data.sourceIndex);
-        suppressClickRef.current = true;
-        hideDragTooltips();
-        document.documentElement.classList.add("rvg-is-dragging");
-        canvas.style.cursor = "move";
-        setRowDragPreview({ sourceIndex, targetIndex: sourceIndex });
-      },
-      onDrag: ({ source, location }) => {
-        const target = location.current.dropTargets[0]?.data;
-        const sourceIndex = Number(source.data.sourceIndex);
-        const rawTargetIndex = Number(target?.targetIndex);
-        if (!Number.isInteger(rawTargetIndex)) {
-          setRowDragPreview(null);
-          setRowDragGuide(null);
-          return;
-        }
-        const edge = target?.rowEdge;
-        let targetIndex = rawTargetIndex + (edge === "bottom" ? 1 : 0);
-        if (sourceIndex < targetIndex) targetIndex -= 1;
-        targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
-        setRowDragPreview((current) => current?.sourceIndex === sourceIndex && current.targetIndex === targetIndex ? current : { sourceIndex, targetIndex });
-        setRowDragGuide(bodyTop + rawTargetIndex * rowHeight - scrollRef.current.top + (edge === "bottom" ? rowHeight : 0));
-      },
-      onDrop: ({ source, location }) => {
-        const target = location.current.dropTargets[0]?.data;
-        const sourceIndex = Number(source.data.sourceIndex);
-        const rawTargetIndex = Number(target?.targetIndex);
-        let targetIndex = rawTargetIndex + (target?.rowEdge === "bottom" ? 1 : 0);
-        if (sourceIndex < targetIndex) targetIndex -= 1;
-        targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
-        scrollerRef.current?.classList.add("rvg-row-drop-settling");
-        setRowDragPreview(null);
-        setRowDragGuide(null);
-        document.documentElement.classList.remove("rvg-is-dragging");
-        canvas.style.cursor = "default";
-        if (Number.isInteger(rawTargetIndex) && sourceIndex !== targetIndex) applyRowOrder(sourceIndex, targetIndex);
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => scrollerRef.current?.classList.remove("rvg-row-drop-settling"));
-        });
-        window.setTimeout(() => {
-          suppressClickRef.current = false;
-        }, 0);
-      }
-    });
-    const cleanupDrop = (0, import_adapter.dropTargetForElements)({
-      element: canvas,
-      canDrop: ({ source }) => source.data.type === "table-row",
-      getDropEffect: () => "move",
-      getData: ({ input, element }) => {
-        const targetIndex = locateRow(input.clientY);
-        if (targetIndex < 0) return { targetIndex: -1 };
-        const rowTop = bodyTop + targetIndex * rowHeight - scrollRef.current.top;
-        const rowEdge = input.clientY - canvas.getBoundingClientRect().top < rowTop + rowHeight / 2 ? "top" : "bottom";
-        return (0, import_closest_edge.attachClosestEdge)({ targetIndex, rowEdge }, { element, input, allowedEdges: ["top", "bottom"] });
-      }
-    });
-    return () => {
-      document.documentElement.classList.remove("rvg-is-dragging");
-      cleanupDrag();
-      cleanupDrop();
+  const handleRowOrderPointerDown = (0, import_react8.useCallback)((event) => {
+    if (!rowDraggable || event.button !== 0 || rowOrderDragRef.current) return;
+    const columnIndex = locateColumn(event.clientX);
+    const sourceIndex = locateRow(event.clientY);
+    if (columnIndex < 0 || sourceIndex < 0 || !columns[columnIndex].rowDragHandle) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    rowOrderDragRef.current = {
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      active: false,
+      sourceIndex,
+      targetIndex: sourceIndex
     };
-  }, [applyRowOrder, bodyTop, columns, getCellLabel, getDisplayedColumnLeft, getRowKey, hideDragTooltips, locateColumn, locateRow, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setRowDragGuide]);
+  }, [columns, locateColumn, locateRow, rowDraggable]);
+  const handleRowOrderPointerMove = (0, import_react8.useCallback)((event) => {
+    const drag = rowOrderDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (!drag.active) {
+      if (Math.abs(event.clientY - drag.startY) < 4) return;
+      drag.active = true;
+      suppressClickRef.current = true;
+      hideDragTooltips();
+      document.documentElement.classList.add("rvg-is-dragging");
+      event.currentTarget.style.cursor = "move";
+    }
+    event.preventDefault();
+    const rawTargetIndex = locateRow(event.clientY);
+    if (rawTargetIndex < 0) return;
+    const canvasTop = event.currentTarget.getBoundingClientRect().top;
+    const rowTop = bodyTop + rawTargetIndex * rowHeight - scrollRef.current.top;
+    const edge = event.clientY - canvasTop < rowTop + rowHeight / 2 ? "top" : "bottom";
+    let targetIndex = rawTargetIndex + (edge === "bottom" ? 1 : 0);
+    if (drag.sourceIndex < targetIndex) targetIndex -= 1;
+    targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
+    drag.targetIndex = targetIndex;
+    setRowDragPreview((current) => current?.sourceIndex === drag.sourceIndex && current.targetIndex === targetIndex ? current : { sourceIndex: drag.sourceIndex, targetIndex });
+    setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
+  }, [bodyTop, hideDragTooltips, locateRow, rowHeight, rows.length, setRowDragGuide]);
+  const finishRowOrderPointerDrag = (0, import_react8.useCallback)((event, apply) => {
+    const drag = rowOrderDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture?.(event.pointerId);
+    rowOrderDragRef.current = null;
+    setRowDragPreview(null);
+    setRowDragGuide(null);
+    document.documentElement.classList.remove("rvg-is-dragging");
+    event.currentTarget.style.cursor = "default";
+    if (apply && drag.active && drag.sourceIndex !== drag.targetIndex) {
+      scrollerRef.current?.classList.add("rvg-row-drop-settling");
+      applyRowOrder(drag.sourceIndex, drag.targetIndex);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => scrollerRef.current?.classList.remove("rvg-row-drop-settling"));
+      });
+    }
+  }, [applyRowOrder, setRowDragGuide]);
   const locateCell = (0, import_react8.useCallback)((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -5058,7 +5020,7 @@ function TableInner({
                 }
               }
             }
-            const cursor = inHeader && locateHeaderResizeCell(event.clientX, event.clientY) ? "col-resize" : hoveredAction ? "pointer" : hoveredDragHandle ? "move" : columnIndex >= 0 && columns[columnIndex].rowSelection ? "pointer" : !inHeader && rowDraggable && columnIndex >= 0 && columns[columnIndex].rowDragHandle ? "move" : "default";
+            const cursor = inHeader && locateHeaderResizeCell(event.clientX, event.clientY) ? "col-resize" : hoveredAction ? "pointer" : hoveredDragHandle ? "move" : !inHeader && rowDraggable && columnIndex >= 0 && columns[columnIndex].rowDragHandle ? "move" : columnIndex >= 0 && columns[columnIndex].rowSelection ? "pointer" : "default";
             if (event.currentTarget.style.cursor !== cursor) event.currentTarget.style.cursor = cursor;
           },
           onMouseLeave: (event) => {
@@ -5077,6 +5039,7 @@ function TableInner({
             }
           },
           onPointerDown: (event) => {
+            handleRowOrderPointerDown(event);
             handleColumnPointerDown(event);
             if (columnDragRef.current) return;
             const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
@@ -5089,16 +5052,19 @@ function TableInner({
             beginRangeDrag(event);
           },
           onPointerMove: (event) => {
+            handleRowOrderPointerMove(event);
             handleColumnPointerMove(event);
             handleColumnOrderPointerMove(event);
             updateRangeDrag(event);
           },
           onPointerUp: (event) => {
+            finishRowOrderPointerDrag(event, true);
             handleColumnPointerUp(event);
             finishColumnOrderPointerDrag(event, true);
             endRangeDrag(event);
           },
           onPointerCancel: (event) => {
+            finishRowOrderPointerDrag(event, false);
             handleColumnPointerUp(event);
             finishColumnOrderPointerDrag(event, false);
             endRangeDrag(event);

package/dist/index.css

@@ -2704,10 +2704,17 @@
 }
 .rvg-searchable-choice-content .rvg-choice-item {
   width: 100%;
+  min-width: 0;
   border: 0;
   background: transparent;
   text-align: left;
 }
+.rvg-searchable-choice-content .rvg-choice-item > span {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .rvg-searchable-choice-content .rvg-choice-item:is(:hover, .is-active) {
   background: var(--rvg-color-hover);
 }

package/dist/index.js

@@ -302,10 +302,25 @@ function LoadingSpinnerIcon() {
 
 // src/components/editors/ChoiceEditor.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SEARCHABLE_CHOICE_POPUP_MAX_WIDTH = 360;
+var SEARCHABLE_CHOICE_POPUP_HORIZONTAL_PADDING = 44;
+var SEARCHABLE_CHOICE_POPUP_VIEWPORT_GAP = 8;
+function getSearchableChoicePopupHorizontalLayout(anchorLeft, anchorWidth, longestLabelWidth, viewportWidth) {
+  const availableWidth = Math.max(0, viewportWidth - SEARCHABLE_CHOICE_POPUP_VIEWPORT_GAP * 2);
+  const desiredWidth = Math.max(anchorWidth, longestLabelWidth + SEARCHABLE_CHOICE_POPUP_HORIZONTAL_PADDING);
+  const width = Math.min(desiredWidth, SEARCHABLE_CHOICE_POPUP_MAX_WIDTH, availableWidth);
+  const left = Math.max(
+    SEARCHABLE_CHOICE_POPUP_VIEWPORT_GAP,
+    Math.min(anchorLeft, viewportWidth - SEARCHABLE_CHOICE_POPUP_VIEWPORT_GAP - width)
+  );
+  return { left, width };
+}
 function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownHeight, style, labels, onChange, onCommit, onCancel }) {
   const editorRef = useRef(null);
   const popupRef = useRef(null);
   const activeOptionRef = useRef(null);
+  const popupReadyRef = useRef(false);
+  const navigationSourceRef = useRef(null);
   const originalValueRef = useRef(value);
   const listboxId = useId2();
   const originalValue = originalValueRef.current;
@@ -314,7 +329,10 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     const selectedIndex = options.findIndex((option) => option.value === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
   });
-  const [popupStyle, setPopupStyle] = useState({});
+  const [popupStyle, setPopupStyle] = useState({
+    position: "fixed",
+    visibility: "hidden"
+  });
   const filteredOptions = useMemo(() => {
     const query = inputValue.trim().toLocaleLowerCase();
     if (!query || query === originalValue.toLocaleLowerCase()) return options;
@@ -324,24 +342,36 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     const positionPopup = () => {
       const rect = editorRef.current?.getBoundingClientRect();
       if (!rect) return;
+      const longestLabelWidth = Math.max(
+        0,
+        ...Array.from(popupRef.current?.querySelectorAll(".rvg-choice-item > span") ?? []).map((label) => label.scrollWidth)
+      );
+      const horizontal = getSearchableChoicePopupHorizontalLayout(
+        rect.left,
+        rect.width,
+        longestLabelWidth,
+        window.innerWidth
+      );
       const availableBelow = window.innerHeight - rect.bottom - 8;
       const availableAbove = rect.top - 8;
       if (availableBelow < 120 && availableAbove > availableBelow) {
         setPopupStyle({
           position: "fixed",
           bottom: window.innerHeight - rect.top + 4,
-          left: rect.left,
-          width: rect.width,
-          maxHeight: Math.min(maxDropdownHeight, availableAbove)
+          left: horizontal.left,
+          width: horizontal.width,
+          maxHeight: Math.min(maxDropdownHeight, availableAbove),
+          visibility: popupReadyRef.current ? "visible" : "hidden"
         });
         return;
       }
       setPopupStyle({
         position: "fixed",
         top: rect.bottom + 4,
-        left: rect.left,
-        width: rect.width,
-        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
+        left: horizontal.left,
+        width: horizontal.width,
+        maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow)),
+        visibility: popupReadyRef.current ? "visible" : "hidden"
       });
     };
     positionPopup();
@@ -353,8 +383,22 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     };
   }, [maxDropdownHeight]);
   useLayoutEffect(() => {
-    activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-  }, [activeIndex, filteredOptions, popupStyle]);
+    if (popupReadyRef.current) return;
+    if (popupStyle.top === void 0 && popupStyle.bottom === void 0) return;
+    const selectedOption = popupRef.current?.querySelector('[aria-selected="true"]') ?? activeOptionRef.current;
+    selectedOption?.scrollIntoView?.({ block: "center", inline: "nearest" });
+    popupReadyRef.current = true;
+    setPopupStyle((current) => ({ ...current, visibility: "visible" }));
+  }, [popupStyle.bottom, popupStyle.top]);
+  useLayoutEffect(() => {
+    if (!popupReadyRef.current) return;
+    if (navigationSourceRef.current === "keyboard") {
+      activeOptionRef.current?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    } else if (navigationSourceRef.current === "filter" && popupRef.current) {
+      popupRef.current.scrollTop = 0;
+    }
+    navigationSourceRef.current = null;
+  }, [activeIndex, filteredOptions]);
   useEffect(() => {
     const handleOutsidePointer = (event) => {
       const target = event.target;
@@ -374,10 +418,12 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
     if (event.key === "Escape") onCancel();
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
+      navigationSourceRef.current = "keyboard";
       setActiveIndex((index) => Math.max(0, index - 1));
     }
     if (event.key === "Enter") {
@@ -400,6 +446,7 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         onChange: (event) => {
           setInputValue(event.target.value);
           onChange(event.target.value);
+          navigationSourceRef.current = "filter";
           setActiveIndex(0);
         },
         onKeyDown: handleKeyDown
@@ -415,7 +462,10 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
         "aria-selected": option.value === originalValue,
         className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
         onPointerDown: (event) => event.preventDefault(),
-        onMouseEnter: () => setActiveIndex(index),
+        onMouseEnter: () => {
+          navigationSourceRef.current = "pointer";
+          setActiveIndex(index);
+        },
         onClick: () => selectOption(option),
         children: [
           /* @__PURE__ */ jsx3("span", { children: option.label }),
@@ -911,25 +961,6 @@ function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCo
   ] });
 }
 
-// src/icons/domIcons.ts
-function createRowDragHandleSvg() {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 16 16");
-  for (const [cx, cy] of [[5, 4], [11, 4], [5, 8], [11, 8], [5, 12], [11, 12]]) {
-    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-    circle.setAttribute("cx", String(cx));
-    circle.setAttribute("cy", String(cy));
-    circle.setAttribute("r", "1");
-    svg.appendChild(circle);
-  }
-  return svg;
-}
-
-// src/Table.tsx
-import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
-import { attachClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-
 // src/core/format.ts
 function getDisplayLabel(column, row, rowIndex) {
   const value = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
@@ -2011,6 +2042,7 @@ function TableInner({
   const columnDragRef = useRef4(null);
   const columnOrderDragRef = useRef4(null);
   const columnOrderLongPressTimerRef = useRef4(null);
+  const rowOrderDragRef = useRef4(null);
   const dragGuideRef = useRef4(null);
   const rowDragGuideRef = useRef4(null);
   const selectionFocusRef = useRef4(null);
@@ -3311,131 +3343,61 @@ function TableInner({
     const rowIndex = Math.floor((localY - bodyTop + scrollRef.current.top) / rowHeight);
     return rowIndex >= 0 && rowIndex < rows.length ? rowIndex : -1;
   }, [bodyTop, rowHeight, rows.length]);
-  useEffect3(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || !rowDraggable) return;
-    const cleanupDrag = draggable({
-      element: canvas,
-      canDrag: ({ input }) => {
-        const columnIndex = locateColumn(input.clientX);
-        return columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(input.clientY) >= 0;
-      },
-      getInitialData: ({ input }) => ({ type: "table-row", sourceIndex: locateRow(input.clientY) }),
-      onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
-        const sourceIndex = Number(source.data.sourceIndex);
-        const canvasRect = canvas.getBoundingClientRect();
-        const input = location.current.input;
-        const previewOffset = {
-          x: Math.max(0, Math.min(canvasRect.width, input.clientX - canvasRect.left)) + 2,
-          y: Math.max(0, Math.min(rowHeight, input.clientY - canvasRect.top - bodyTop - sourceIndex * rowHeight + scrollRef.current.top)) + 2
-        };
-        setCustomNativeDragPreview({
-          nativeSetDragImage,
-          getOffset: () => previewOffset,
-          render: ({ container }) => {
-            const frame = document.createElement("div");
-            frame.className = "rvg-row-drag-preview-frame";
-            frame.style.width = `${canvasRect.width + 4}px`;
-            frame.style.height = `${rowHeight + 4}px`;
-            const preview = document.createElement("div");
-            preview.className = "rvg-row-drag-preview";
-            preview.style.width = `${canvasRect.width}px`;
-            preview.style.height = `${rowHeight}px`;
-            const row = rows[sourceIndex];
-            const rowKey2 = getRowKey(row, sourceIndex);
-            columns.forEach((column, columnIndex) => {
-              const left = getDisplayedColumnLeft(columnIndex);
-              const columnWidth = metrics[columnIndex].width;
-              if (left + columnWidth <= 0 || left >= canvasRect.width) return;
-              const cell = document.createElement("div");
-              cell.className = "rvg-row-drag-preview-cell";
-              cell.style.left = `${left}px`;
-              cell.style.width = `${columnWidth}px`;
-              cell.style.justifyContent = column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start";
-              if (column.rowDragHandle && !column.rowSelection) {
-                cell.appendChild(createRowDragHandleSvg());
-              } else if (column.rowSelection) {
-                if (column.rowSelectionIndicator !== "none") {
-                  const checkbox = document.createElement("span");
-                  checkbox.className = selectedRowKeySet.has(rowKey2) ? "rvg-preview-checkbox is-checked" : "rvg-preview-checkbox";
-                  checkbox.textContent = selectedRowKeySet.has(rowKey2) ? "\u2713" : "";
-                  cell.appendChild(checkbox);
-                }
-              } else {
-                cell.textContent = getCellLabel(sourceIndex, columnIndex);
-              }
-              if (selection?.rowKey === rowKey2 && selection.columnKey === column.key) cell.classList.add("is-selected");
-              preview.appendChild(cell);
-            });
-            frame.appendChild(preview);
-            container.appendChild(frame);
-            return () => frame.remove();
-          }
-        });
-      },
-      onDragStart: ({ source }) => {
-        const sourceIndex = Number(source.data.sourceIndex);
-        suppressClickRef.current = true;
-        hideDragTooltips();
-        document.documentElement.classList.add("rvg-is-dragging");
-        canvas.style.cursor = "move";
-        setRowDragPreview({ sourceIndex, targetIndex: sourceIndex });
-      },
-      onDrag: ({ source, location }) => {
-        const target = location.current.dropTargets[0]?.data;
-        const sourceIndex = Number(source.data.sourceIndex);
-        const rawTargetIndex = Number(target?.targetIndex);
-        if (!Number.isInteger(rawTargetIndex)) {
-          setRowDragPreview(null);
-          setRowDragGuide(null);
-          return;
-        }
-        const edge = target?.rowEdge;
-        let targetIndex = rawTargetIndex + (edge === "bottom" ? 1 : 0);
-        if (sourceIndex < targetIndex) targetIndex -= 1;
-        targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
-        setRowDragPreview((current) => current?.sourceIndex === sourceIndex && current.targetIndex === targetIndex ? current : { sourceIndex, targetIndex });
-        setRowDragGuide(bodyTop + rawTargetIndex * rowHeight - scrollRef.current.top + (edge === "bottom" ? rowHeight : 0));
-      },
-      onDrop: ({ source, location }) => {
-        const target = location.current.dropTargets[0]?.data;
-        const sourceIndex = Number(source.data.sourceIndex);
-        const rawTargetIndex = Number(target?.targetIndex);
-        let targetIndex = rawTargetIndex + (target?.rowEdge === "bottom" ? 1 : 0);
-        if (sourceIndex < targetIndex) targetIndex -= 1;
-        targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
-        scrollerRef.current?.classList.add("rvg-row-drop-settling");
-        setRowDragPreview(null);
-        setRowDragGuide(null);
-        document.documentElement.classList.remove("rvg-is-dragging");
-        canvas.style.cursor = "default";
-        if (Number.isInteger(rawTargetIndex) && sourceIndex !== targetIndex) applyRowOrder(sourceIndex, targetIndex);
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => scrollerRef.current?.classList.remove("rvg-row-drop-settling"));
-        });
-        window.setTimeout(() => {
-          suppressClickRef.current = false;
-        }, 0);
-      }
-    });
-    const cleanupDrop = dropTargetForElements({
-      element: canvas,
-      canDrop: ({ source }) => source.data.type === "table-row",
-      getDropEffect: () => "move",
-      getData: ({ input, element }) => {
-        const targetIndex = locateRow(input.clientY);
-        if (targetIndex < 0) return { targetIndex: -1 };
-        const rowTop = bodyTop + targetIndex * rowHeight - scrollRef.current.top;
-        const rowEdge = input.clientY - canvas.getBoundingClientRect().top < rowTop + rowHeight / 2 ? "top" : "bottom";
-        return attachClosestEdge({ targetIndex, rowEdge }, { element, input, allowedEdges: ["top", "bottom"] });
-      }
-    });
-    return () => {
-      document.documentElement.classList.remove("rvg-is-dragging");
-      cleanupDrag();
-      cleanupDrop();
+  const handleRowOrderPointerDown = useCallback2((event) => {
+    if (!rowDraggable || event.button !== 0 || rowOrderDragRef.current) return;
+    const columnIndex = locateColumn(event.clientX);
+    const sourceIndex = locateRow(event.clientY);
+    if (columnIndex < 0 || sourceIndex < 0 || !columns[columnIndex].rowDragHandle) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    rowOrderDragRef.current = {
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      active: false,
+      sourceIndex,
+      targetIndex: sourceIndex
     };
-  }, [applyRowOrder, bodyTop, columns, getCellLabel, getDisplayedColumnLeft, getRowKey, hideDragTooltips, locateColumn, locateRow, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setRowDragGuide]);
+  }, [columns, locateColumn, locateRow, rowDraggable]);
+  const handleRowOrderPointerMove = useCallback2((event) => {
+    const drag = rowOrderDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (!drag.active) {
+      if (Math.abs(event.clientY - drag.startY) < 4) return;
+      drag.active = true;
+      suppressClickRef.current = true;
+      hideDragTooltips();
+      document.documentElement.classList.add("rvg-is-dragging");
+      event.currentTarget.style.cursor = "move";
+    }
+    event.preventDefault();
+    const rawTargetIndex = locateRow(event.clientY);
+    if (rawTargetIndex < 0) return;
+    const canvasTop = event.currentTarget.getBoundingClientRect().top;
+    const rowTop = bodyTop + rawTargetIndex * rowHeight - scrollRef.current.top;
+    const edge = event.clientY - canvasTop < rowTop + rowHeight / 2 ? "top" : "bottom";
+    let targetIndex = rawTargetIndex + (edge === "bottom" ? 1 : 0);
+    if (drag.sourceIndex < targetIndex) targetIndex -= 1;
+    targetIndex = Math.max(0, Math.min(rows.length - 1, targetIndex));
+    drag.targetIndex = targetIndex;
+    setRowDragPreview((current) => current?.sourceIndex === drag.sourceIndex && current.targetIndex === targetIndex ? current : { sourceIndex: drag.sourceIndex, targetIndex });
+    setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
+  }, [bodyTop, hideDragTooltips, locateRow, rowHeight, rows.length, setRowDragGuide]);
+  const finishRowOrderPointerDrag = useCallback2((event, apply) => {
+    const drag = rowOrderDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture?.(event.pointerId);
+    rowOrderDragRef.current = null;
+    setRowDragPreview(null);
+    setRowDragGuide(null);
+    document.documentElement.classList.remove("rvg-is-dragging");
+    event.currentTarget.style.cursor = "default";
+    if (apply && drag.active && drag.sourceIndex !== drag.targetIndex) {
+      scrollerRef.current?.classList.add("rvg-row-drop-settling");
+      applyRowOrder(drag.sourceIndex, drag.targetIndex);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => scrollerRef.current?.classList.remove("rvg-row-drop-settling"));
+      });
+    }
+  }, [applyRowOrder, setRowDragGuide]);
   const locateCell = useCallback2((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -5028,7 +4990,7 @@ function TableInner({
                 }
               }
             }
-            const cursor = inHeader && locateHeaderResizeCell(event.clientX, event.clientY) ? "col-resize" : hoveredAction ? "pointer" : hoveredDragHandle ? "move" : columnIndex >= 0 && columns[columnIndex].rowSelection ? "pointer" : !inHeader && rowDraggable && columnIndex >= 0 && columns[columnIndex].rowDragHandle ? "move" : "default";
+            const cursor = inHeader && locateHeaderResizeCell(event.clientX, event.clientY) ? "col-resize" : hoveredAction ? "pointer" : hoveredDragHandle ? "move" : !inHeader && rowDraggable && columnIndex >= 0 && columns[columnIndex].rowDragHandle ? "move" : columnIndex >= 0 && columns[columnIndex].rowSelection ? "pointer" : "default";
             if (event.currentTarget.style.cursor !== cursor) event.currentTarget.style.cursor = cursor;
           },
           onMouseLeave: (event) => {
@@ -5047,6 +5009,7 @@ function TableInner({
             }
           },
           onPointerDown: (event) => {
+            handleRowOrderPointerDown(event);
             handleColumnPointerDown(event);
             if (columnDragRef.current) return;
             const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
@@ -5059,16 +5022,19 @@ function TableInner({
             beginRangeDrag(event);
           },
           onPointerMove: (event) => {
+            handleRowOrderPointerMove(event);
             handleColumnPointerMove(event);
             handleColumnOrderPointerMove(event);
             updateRangeDrag(event);
           },
           onPointerUp: (event) => {
+            finishRowOrderPointerDrag(event, true);
             handleColumnPointerUp(event);
             finishColumnOrderPointerDrag(event, true);
             endRangeDrag(event);
           },
           onPointerCancel: (event) => {
+            finishRowOrderPointerDrag(event, false);
             handleColumnPointerUp(event);
             finishColumnOrderPointerDrag(event, false);
             endRangeDrag(event);

package/package.json

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