@lensui/lens-table 0.1.77 → 0.1.79

package/dist/index.cjs

@@ -332,6 +332,19 @@ 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);
@@ -359,14 +372,24 @@ 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,
+          left: horizontal.left,
+          width: horizontal.width,
           maxHeight: Math.min(maxDropdownHeight, availableAbove),
           visibility: popupReadyRef.current ? "visible" : "hidden"
         });
@@ -375,8 +398,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
       setPopupStyle({
         position: "fixed",
         top: rect.bottom + 4,
-        left: rect.left,
-        width: rect.width,
+        left: horizontal.left,
+        width: horizontal.width,
         maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow)),
         visibility: popupReadyRef.current ? "visible" : "hidden"
       });
@@ -884,7 +907,11 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
           if (type === "number" && integer && next !== "" && !/^-?\d+$/.test(next)) return;
           onChange(next);
         },
-        onBlur: commitValue,
+        onBlur: (event) => {
+          const nextTarget = event.relatedTarget;
+          if (nextTarget instanceof Element && nextTarget.closest("[data-rvg-preserve-edit]")) return;
+          commitValue();
+        },
         onKeyDown: handleKeyDown
       }
     ),
@@ -968,25 +995,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];
@@ -1298,7 +1306,7 @@ function paintGrid(options) {
           ctx.fillStyle = isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : colors.grid;
+        ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : isRangeCell ? colors.selectionFill : colors.grid;
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         }
@@ -2068,6 +2076,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);
@@ -2122,6 +2131,7 @@ function TableInner({
   const [editing, setEditing] = (0, import_react8.useState)(null);
   const [draft, setDraft] = (0, import_react8.useState)("");
   const [rowDragPreview, setRowDragPreview] = (0, import_react8.useState)(null);
+  const [liftedRowPreview, setLiftedRowPreview] = (0, import_react8.useState)(null);
   const [columnDragPreview, setColumnDragPreview] = (0, import_react8.useState)(null);
   const [columnDropTarget, setColumnDropTarget] = (0, import_react8.useState)(null);
   (0, import_react8.useEffect)(() => {
@@ -3368,131 +3378,66 @@ 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 canvasTop = event.currentTarget.getBoundingClientRect().top;
+    setLiftedRowPreview({
+      sourceIndex: drag.sourceIndex,
+      top: Math.max(bodyTop, Math.min(renderHeight - rowHeight, event.clientY - canvasTop - rowHeight / 2))
+    });
+    const rawTargetIndex = locateRow(event.clientY);
+    if (rawTargetIndex < 0) return;
+    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(null);
+    setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
+  }, [bodyTop, hideDragTooltips, locateRow, renderHeight, 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);
+    setLiftedRowPreview(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;
@@ -5085,7 +5030,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) => {
@@ -5104,6 +5049,7 @@ function TableInner({
             }
           },
           onPointerDown: (event) => {
+            handleRowOrderPointerDown(event);
             handleColumnPointerDown(event);
             if (columnDragRef.current) return;
             const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
@@ -5116,16 +5062,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);
@@ -5689,6 +5638,26 @@ function TableInner({
         ]
       }
     ),
+    liftedRowPreview && rows[liftedRowPreview.sourceIndex] && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: `rvg-row-drag-preview${selectedRowKeySet.has(getRowKey(rows[liftedRowPreview.sourceIndex], liftedRowPreview.sourceIndex)) ? " is-selected" : ""}`,
+        style: { top: liftedRowPreview.top, width: viewport.width, height: rowHeight },
+        children: columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className: "rvg-row-drag-preview-cell",
+            style: {
+              left: getDisplayedColumnLeft(columnIndex),
+              width: metrics[columnIndex]?.width ?? 0
+            },
+            children: getCellLabel(liftedRowPreview.sourceIndex, columnIndex)
+          },
+          `row-preview:${column.key}`
+        ))
+      }
+    ),
     resizeGuideX !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {

package/dist/index.css

@@ -1638,13 +1638,16 @@
 }
 .rvg-row-drag-preview {
   position: absolute;
-  top: 2px;
-  left: 2px;
-  overflow: visible;
-  border: 1px solid #a9c8f5;
-  background: #fff;
-  box-shadow: 0 2px 6px rgba(5, 5, 5, 0.08);
+  z-index: 6;
+  left: 0;
+  overflow: hidden;
+  border: 1px solid #8db8f3;
+  background: var(--rvg-color-bg);
+  box-shadow: 0 5px 14px rgba(32, 75, 135, 0.2);
   box-sizing: border-box;
+  opacity: 0.94;
+  pointer-events: none;
+  transform: translateY(-1px);
 }
 .rvg-row-drag-preview-cell {
   position: absolute;
@@ -1665,6 +1668,14 @@
   text-overflow: ellipsis;
   box-sizing: border-box;
 }
+.rvg-row-drag-preview.is-selected {
+  border-color: var(--rvg-color-primary);
+  background: var(--rvg-color-selection-fill);
+}
+.rvg-row-drag-preview.is-selected .rvg-row-drag-preview-cell {
+  border-right-color: color-mix(in srgb, var(--rvg-color-axis-selection-text) 34%, transparent);
+  color: var(--rvg-color-axis-selection-text);
+}
 .rvg-row-drag-preview-cell svg {
   width: 16px;
   height: 16px;
@@ -2704,10 +2715,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,6 +302,19 @@ 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);
@@ -329,14 +342,24 @@ 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,
+          left: horizontal.left,
+          width: horizontal.width,
           maxHeight: Math.min(maxDropdownHeight, availableAbove),
           visibility: popupReadyRef.current ? "visible" : "hidden"
         });
@@ -345,8 +368,8 @@ function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownH
       setPopupStyle({
         position: "fixed",
         top: rect.bottom + 4,
-        left: rect.left,
-        width: rect.width,
+        left: horizontal.left,
+        width: horizontal.width,
         maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow)),
         visibility: popupReadyRef.current ? "visible" : "hidden"
       });
@@ -854,7 +877,11 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
           if (type === "number" && integer && next !== "" && !/^-?\d+$/.test(next)) return;
           onChange(next);
         },
-        onBlur: commitValue,
+        onBlur: (event) => {
+          const nextTarget = event.relatedTarget;
+          if (nextTarget instanceof Element && nextTarget.closest("[data-rvg-preserve-edit]")) return;
+          commitValue();
+        },
         onKeyDown: handleKeyDown
       }
     ),
@@ -938,25 +965,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];
@@ -1268,7 +1276,7 @@ function paintGrid(options) {
           ctx.fillStyle = isAxisSelected ? getAxisSelectionFill(rowIndex, column.key) : colors.columnDropTargetFill;
           ctx.fillRect(x, y, cellWidth, cellHeight);
         }
-        ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : colors.grid;
+        ctx.fillStyle = selectedRowKeys.has(rowKey) ? getAxisSelectionFill(rowIndex, column.key) : isRangeCell ? colors.selectionFill : colors.grid;
         if (!verticalBorderless && !(frameBorderless && columnIndex + colSpan >= columns.length)) {
           ctx.fillRect(x + cellWidth - 1, y, 1, cellHeight);
         }
@@ -2038,6 +2046,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);
@@ -2092,6 +2101,7 @@ function TableInner({
   const [editing, setEditing] = useState6(null);
   const [draft, setDraft] = useState6("");
   const [rowDragPreview, setRowDragPreview] = useState6(null);
+  const [liftedRowPreview, setLiftedRowPreview] = useState6(null);
   const [columnDragPreview, setColumnDragPreview] = useState6(null);
   const [columnDropTarget, setColumnDropTarget] = useState6(null);
   useEffect3(() => {
@@ -3338,131 +3348,66 @@ 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 canvasTop = event.currentTarget.getBoundingClientRect().top;
+    setLiftedRowPreview({
+      sourceIndex: drag.sourceIndex,
+      top: Math.max(bodyTop, Math.min(renderHeight - rowHeight, event.clientY - canvasTop - rowHeight / 2))
+    });
+    const rawTargetIndex = locateRow(event.clientY);
+    if (rawTargetIndex < 0) return;
+    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(null);
+    setRowDragGuide(rowTop + (edge === "bottom" ? rowHeight : 0));
+  }, [bodyTop, hideDragTooltips, locateRow, renderHeight, 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);
+    setLiftedRowPreview(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;
@@ -5055,7 +5000,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) => {
@@ -5074,6 +5019,7 @@ function TableInner({
             }
           },
           onPointerDown: (event) => {
+            handleRowOrderPointerDown(event);
             handleColumnPointerDown(event);
             if (columnDragRef.current) return;
             const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
@@ -5086,16 +5032,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);
@@ -5659,6 +5608,26 @@ function TableInner({
         ]
       }
     ),
+    liftedRowPreview && rows[liftedRowPreview.sourceIndex] && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: `rvg-row-drag-preview${selectedRowKeySet.has(getRowKey(rows[liftedRowPreview.sourceIndex], liftedRowPreview.sourceIndex)) ? " is-selected" : ""}`,
+        style: { top: liftedRowPreview.top, width: viewport.width, height: rowHeight },
+        children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "rvg-row-drag-preview-cell",
+            style: {
+              left: getDisplayedColumnLeft(columnIndex),
+              width: metrics[columnIndex]?.width ?? 0
+            },
+            children: getCellLabel(liftedRowPreview.sourceIndex, columnIndex)
+          },
+          `row-preview:${column.key}`
+        ))
+      }
+    ),
     resizeGuideX !== null && /* @__PURE__ */ jsx8(
       "div",
       {

package/package.json

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