bolt-table 0.1.12 → 0.1.14

package/dist/index.js

@@ -110,6 +110,10 @@ var PinOffIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtim
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "22" }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4" })
 ] });
+var CopyIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgBase, style, className, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+] });
 var EyeOffIcon = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...svgBase, style, className, children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
@@ -165,21 +169,49 @@ var DraggableHeader = import_react.default.memo(
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }
     }, [contextMenu]);
-    const handleContextMenu = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
+    const showContextMenuAt = (clientX, clientY) => {
       const menuWidth = 160;
       const menuHeight = 180;
-      let x = e.clientX;
-      let y = e.clientY;
-      if (x + menuWidth > window.innerWidth) {
+      let x = clientX;
+      let y = clientY;
+      if (x + menuWidth > window.innerWidth)
         x = window.innerWidth - menuWidth - 10;
-      }
-      if (y + menuHeight > window.innerHeight) {
+      if (y + menuHeight > window.innerHeight)
         y = window.innerHeight - menuHeight - 10;
-      }
       setContextMenu({ x, y });
     };
+    const handleContextMenu = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      showContextMenuAt(e.clientX, e.clientY);
+    };
+    const longPressTimerRef = (0, import_react.useRef)(
+      null
+    );
+    const touchStartRef = (0, import_react.useRef)(null);
+    const cancelLongPress = () => {
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current);
+        longPressTimerRef.current = null;
+      }
+      touchStartRef.current = null;
+    };
+    const handleTouchStart = (e) => {
+      cancelLongPress();
+      const touch = e.touches[0];
+      touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+      longPressTimerRef.current = setTimeout(() => {
+        longPressTimerRef.current = null;
+        showContextMenuAt(touch.clientX, touch.clientY);
+      }, 500);
+    };
+    const handleTouchMove = (e) => {
+      if (!touchStartRef.current) return;
+      const touch = e.touches[0];
+      const dx = touch.clientX - touchStartRef.current.x;
+      const dy = touch.clientY - touchStartRef.current.y;
+      if (Math.abs(dx) > 10 || Math.abs(dy) > 10) cancelLongPress();
+    };
     const handleResizeStart = (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -229,6 +261,10 @@ var DraggableHeader = import_react.default.memo(
           style: headerStyle,
           className: `${column.className ?? ""} ${classNames?.header ?? ""} ${isPinned ? classNames?.pinnedHeader ?? "" : ""}`,
           onContextMenu: handleContextMenu,
+          onTouchStart: handleTouchStart,
+          onTouchMove: handleTouchMove,
+          onTouchEnd: cancelLongPress,
+          onTouchCancel: cancelLongPress,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "div",
@@ -1034,15 +1070,26 @@ var TableBody = ({
   expandable,
   resolvedExpandedKeys,
   rowHeight = 40,
+  totalTableWidth,
   scrollAreaWidth,
   accentColor,
   isLoading = false,
   onExpandedRowResize,
-  maxExpandedRowHeight
+  maxExpandedRowHeight,
+  pinnedTopData = [],
+  pinnedBottomData = [],
+  gridTemplateColumns,
+  headerHeight = 36
 }) => {
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
   const selectedKeySet = (0, import_react3.useMemo)(() => new Set(normalizedSelectedKeys), [normalizedSelectedKeys]);
+  const allDataForSelection = (0, import_react3.useMemo)(() => {
+    if (pinnedTopData.length === 0 && pinnedBottomData.length === 0)
+      return data;
+    return [...pinnedTopData, ...data, ...pinnedBottomData];
+  }, [pinnedTopData, data, pinnedBottomData]);
+  const pinnedRowBg = styles?.pinnedRowBg ?? styles?.pinnedBg;
   const columnStyles = (0, import_react3.useMemo)(() => {
     return orderedColumns.map((col, colIndex) => {
       const stickyOffset = columnOffsets.get(col.key);
@@ -1099,6 +1146,8 @@ var TableBody = ({
                 "div",
                 {
                   "data-row-key": rowKey,
+                  "data-column-key": col.key,
+                  "data-bt-cell": "",
                   "data-selected": isSelected || void 0,
                   style: {
                     position: "absolute",
@@ -1128,7 +1177,7 @@ var TableBody = ({
                           rowSelection,
                           normalizedSelectedKeys,
                           rowKey,
-                          allData: data,
+                          allData: allDataForSelection,
                           getRowKey,
                           accentColor,
                           isLoading: isRowShimmer,
@@ -1206,6 +1255,213 @@ var TableBody = ({
           );
         })
       }
+    ),
+    pinnedTopData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          gridColumn: "1 / -1",
+          gridRow: 2,
+          height: `${totalSize}px`,
+          position: "relative",
+          zIndex: 20,
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            style: {
+              position: "sticky",
+              top: headerHeight,
+              pointerEvents: "auto",
+              boxShadow: "0 2px 6px -1px rgba(0,0,0,0.08)"
+            },
+            children: pinnedTopData.map((row, rowIdx) => {
+              const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
+              const isSelected = selectedKeySet.has(rk);
+              const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  className: classNames?.pinnedRow ?? "",
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: gridTemplateColumns ?? "",
+                    minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
+                    ...styles?.pinnedRow
+                  },
+                  children: orderedColumns.map((col) => {
+                    const cellValue = row[col.dataIndex];
+                    const stickyOffset = columnOffsets.get(col.key);
+                    const isPinned = Boolean(col.pinned);
+                    let zIndex = 0;
+                    if (col.key === "__select__" || col.key === "__expand__")
+                      zIndex = 11;
+                    else if (isPinned) zIndex = 2;
+                    const recordFingerprint = col.render ? JSON.stringify(row) : void 0;
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "div",
+                      {
+                        "data-row-key": rk,
+                        "data-column-key": col.key,
+                        "data-bt-cell": "",
+                        "data-selected": isSelected || void 0,
+                        style: {
+                          position: isPinned ? "sticky" : "relative",
+                          ...col.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
+                          ...col.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
+                          zIndex,
+                          backgroundColor: pinnedRowBg,
+                          backdropFilter: "blur(12px)",
+                          WebkitBackdropFilter: "blur(12px)",
+                          ...isPinned && styles?.pinnedCell ? styles.pinnedCell : {}
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "div",
+                          {
+                            style: {
+                              height: `${rowHeight}px`,
+                              position: "relative"
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              Cell,
+                              {
+                                value: cellValue,
+                                record: row,
+                                column: col,
+                                rowIndex: rowIdx,
+                                classNames,
+                                styles,
+                                isSelected,
+                                isExpanded,
+                                rowSelection,
+                                normalizedSelectedKeys,
+                                rowKey: rk,
+                                allData: allDataForSelection,
+                                getRowKey,
+                                accentColor,
+                                isLoading: false,
+                                recordFingerprint
+                              }
+                            )
+                          }
+                        )
+                      },
+                      col.key
+                    );
+                  })
+                },
+                `pinned-top-${rk}`
+              );
+            })
+          }
+        )
+      }
+    ),
+    pinnedBottomData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          gridColumn: "1 / -1",
+          gridRow: 2,
+          height: `${totalSize}px`,
+          position: "relative",
+          zIndex: 20,
+          pointerEvents: "none",
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            style: {
+              marginTop: "auto",
+              position: "sticky",
+              bottom: 0,
+              pointerEvents: "auto",
+              boxShadow: "0 -2px 6px -1px rgba(0,0,0,0.08)"
+            },
+            children: pinnedBottomData.map((row, rowIdx) => {
+              const rk = getRowKey ? getRowKey(row, rowIdx) : String(rowIdx);
+              const isSelected = selectedKeySet.has(rk);
+              const isExpanded = resolvedExpandedKeys?.has(rk) ?? false;
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  className: classNames?.pinnedRow ?? "",
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: gridTemplateColumns ?? "",
+                    minWidth: totalTableWidth ? `${totalTableWidth}px` : void 0,
+                    ...styles?.pinnedRow
+                  },
+                  children: orderedColumns.map((col) => {
+                    const cellValue = row[col.dataIndex];
+                    const stickyOffset = columnOffsets.get(col.key);
+                    const isPinned = Boolean(col.pinned);
+                    let zIndex = 0;
+                    if (col.key === "__select__" || col.key === "__expand__")
+                      zIndex = 11;
+                    else if (isPinned) zIndex = 2;
+                    const recordFingerprint = col.render ? JSON.stringify(row) : void 0;
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "div",
+                      {
+                        "data-row-key": rk,
+                        "data-column-key": col.key,
+                        "data-bt-cell": "",
+                        "data-selected": isSelected || void 0,
+                        style: {
+                          position: isPinned ? "sticky" : "relative",
+                          ...col.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px` } : {},
+                          ...col.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px` } : {},
+                          zIndex,
+                          backgroundColor: pinnedRowBg,
+                          backdropFilter: "blur(12px)",
+                          WebkitBackdropFilter: "blur(12px)",
+                          ...isPinned && styles?.pinnedCell ? styles.pinnedCell : {}
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "div",
+                          {
+                            style: {
+                              height: `${rowHeight}px`,
+                              position: "relative"
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              Cell,
+                              {
+                                value: cellValue,
+                                record: row,
+                                column: col,
+                                rowIndex: rowIdx,
+                                classNames,
+                                styles,
+                                isSelected,
+                                isExpanded,
+                                rowSelection,
+                                normalizedSelectedKeys,
+                                rowKey: rk,
+                                allData: allDataForSelection,
+                                getRowKey,
+                                accentColor,
+                                isLoading: false,
+                                recordFingerprint
+                              }
+                            )
+                          }
+                        )
+                      },
+                      col.key
+                    );
+                  })
+                },
+                `pinned-bottom-${rk}`
+              );
+            })
+          }
+        )
+      }
     )
   ] });
 };
@@ -1241,6 +1497,8 @@ function BoltTable({
   onColumnPin,
   onColumnHide,
   rowSelection,
+  rowPinning,
+  onRowPin,
   expandable,
   rowKey = "id",
   onEndReached,
@@ -1781,6 +2039,73 @@ function BoltTable({
     }
     return result;
   }, [data, sortState, columnFilters]);
+  const { pinnedTopRows, pinnedBottomRows, unpinnedProcessedData } = (0, import_react4.useMemo)(() => {
+    if (!rowPinning || !rowPinning.top?.length && !rowPinning.bottom?.length) {
+      return {
+        pinnedTopRows: [],
+        pinnedBottomRows: [],
+        unpinnedProcessedData: processedData
+      };
+    }
+    const topKeySet = new Set((rowPinning.top ?? []).map(String));
+    const bottomKeySet = new Set((rowPinning.bottom ?? []).map(String));
+    const topMap = /* @__PURE__ */ new Map();
+    const bottomMap = /* @__PURE__ */ new Map();
+    const rest = [];
+    processedData.forEach((row, idx) => {
+      const key = getRowKey(row, idx);
+      if (topKeySet.has(key)) topMap.set(key, row);
+      else if (bottomKeySet.has(key)) bottomMap.set(key, row);
+      else rest.push(row);
+    });
+    const orderedTop = (rowPinning.top ?? []).map((k) => topMap.get(String(k))).filter((r) => r !== void 0);
+    const orderedBottom = (rowPinning.bottom ?? []).map((k) => bottomMap.get(String(k))).filter((r) => r !== void 0);
+    return {
+      pinnedTopRows: orderedTop,
+      pinnedBottomRows: orderedBottom,
+      unpinnedProcessedData: rest
+    };
+  }, [processedData, rowPinning, getRowKey]);
+  const pinnedTopHeight = pinnedTopRows.length * rowHeight;
+  const pinnedBottomHeight = pinnedBottomRows.length * rowHeight;
+  const pinnedTopKeySet = (0, import_react4.useMemo)(
+    () => new Set((rowPinning?.top ?? []).map(String)),
+    [rowPinning?.top]
+  );
+  const pinnedBottomKeySet = (0, import_react4.useMemo)(
+    () => new Set((rowPinning?.bottom ?? []).map(String)),
+    [rowPinning?.bottom]
+  );
+  const [cellContextMenu, setCellContextMenu] = (0, import_react4.useState)(null);
+  const cellMenuRef = (0, import_react4.useRef)(null);
+  const cellLongPressTimer = (0, import_react4.useRef)(
+    null
+  );
+  const cellTouchStart = (0, import_react4.useRef)(null);
+  const cancelCellLongPress = (0, import_react4.useCallback)(() => {
+    if (cellLongPressTimer.current) {
+      clearTimeout(cellLongPressTimer.current);
+      cellLongPressTimer.current = null;
+    }
+    cellTouchStart.current = null;
+  }, []);
+  import_react4.default.useEffect(() => {
+    if (!cellContextMenu) return;
+    const close = (e) => {
+      if (cellMenuRef.current && cellMenuRef.current.contains(e.target))
+        return;
+      setCellContextMenu(null);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setCellContextMenu(null);
+    };
+    document.addEventListener("mousedown", close);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", close);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [cellContextMenu]);
   const columnFiltersKey = Object.keys(columnFilters).sort().map((k) => `${k}:${columnFilters[k]}`).join("|");
   import_react4.default.useEffect(() => {
     tableAreaRef.current?.scrollTo({ top: 0 });
@@ -1788,12 +2113,12 @@ function BoltTable({
   const pgEnabled = pagination !== false && !!pagination;
   const pgSize = pgEnabled ? pagination.pageSize ?? 10 : 10;
   const pgCurrent = pgEnabled ? Number(pagination.current ?? 1) : 1;
-  const needsClientPagination = pgEnabled && processedData.length > pgSize;
+  const needsClientPagination = pgEnabled && unpinnedProcessedData.length > pgSize;
   const paginatedData = (0, import_react4.useMemo)(() => {
-    if (!needsClientPagination) return processedData;
+    if (!needsClientPagination) return unpinnedProcessedData;
     const start = (pgCurrent - 1) * pgSize;
-    return processedData.slice(start, start + pgSize);
-  }, [processedData, needsClientPagination, pgCurrent, pgSize]);
+    return unpinnedProcessedData.slice(start, start + pgSize);
+  }, [unpinnedProcessedData, needsClientPagination, pgCurrent, pgSize]);
   const shimmerCount = pgEnabled ? pgSize : 15;
   const showShimmer = isLoading && processedData.length === 0;
   const shimmerData = (0, import_react4.useMemo)(() => {
@@ -1851,8 +2176,9 @@ function BoltTable({
       return cached ? rowHeight + cached : rowHeight + expandedRowHeight;
     },
     overscan: 5,
-    // Render 5 extra rows above and below the visible window
-    getItemKey: (index) => shimmerData ? `__shimmer_${index}__` : getRowKey(displayData[index], index)
+    getItemKey: (index) => shimmerData ? `__shimmer_${index}__` : getRowKey(displayData[index], index),
+    paddingStart: pinnedTopHeight,
+    paddingEnd: pinnedBottomHeight
   });
   const rowVirtualizerRef = (0, import_react4.useRef)(rowVirtualizer);
   rowVirtualizerRef.current = rowVirtualizer;
@@ -1892,7 +2218,7 @@ function BoltTable({
   const activeColumn = activeId ? orderedColumns.find((col) => col.key === activeId) : null;
   const currentPage = pgCurrent;
   const pageSize = pgSize;
-  const rawTotal = pgEnabled ? pagination.total ?? (needsClientPagination ? processedData.length : data.length) : data.length;
+  const rawTotal = pgEnabled ? pagination.total ?? (needsClientPagination ? unpinnedProcessedData.length : data.length) : data.length;
   const lastKnownTotalRef = (0, import_react4.useRef)(0);
   if (!isLoading || rawTotal > 0) {
     lastKnownTotalRef.current = rawTotal;
@@ -2141,6 +2467,64 @@ function BoltTable({
                             position: "relative",
                             ...isEmpty ? { height: "100%" } : {}
                           },
+                          onContextMenu: (e) => {
+                            const cell = e.target.closest("[data-bt-cell]");
+                            if (!cell) return;
+                            const rk = cell.dataset.rowKey;
+                            const ck = cell.dataset.columnKey;
+                            if (!rk || !ck) return;
+                            const col = freshOrderedColumns.find(
+                              (c) => c.key === ck
+                            );
+                            const hasCopy = col?.copy;
+                            const hasRowPin = !!onRowPin;
+                            if (!hasCopy && !hasRowPin) return;
+                            e.preventDefault();
+                            setCellContextMenu({
+                              x: Math.min(e.clientX, window.innerWidth - 200),
+                              y: Math.min(e.clientY, window.innerHeight - 200),
+                              rowKey: rk,
+                              columnKey: ck
+                            });
+                          },
+                          onTouchStart: (e) => {
+                            cancelCellLongPress();
+                            const cell = e.target.closest("[data-bt-cell]");
+                            if (!cell) return;
+                            const touch = e.touches[0];
+                            cellTouchStart.current = {
+                              x: touch.clientX,
+                              y: touch.clientY
+                            };
+                            const rk = cell.dataset.rowKey;
+                            const ck = cell.dataset.columnKey;
+                            cellLongPressTimer.current = setTimeout(() => {
+                              cellLongPressTimer.current = null;
+                              if (!rk || !ck) return;
+                              const col = freshOrderedColumns.find(
+                                (c) => c.key === ck
+                              );
+                              const hasCopy = col?.copy;
+                              const hasRowPin = !!onRowPin;
+                              if (!hasCopy && !hasRowPin) return;
+                              setCellContextMenu({
+                                x: Math.min(touch.clientX, window.innerWidth - 200),
+                                y: Math.min(touch.clientY, window.innerHeight - 200),
+                                rowKey: rk,
+                                columnKey: ck
+                              });
+                            }, 500);
+                          },
+                          onTouchMove: (e) => {
+                            if (!cellTouchStart.current) return;
+                            const touch = e.touches[0];
+                            const dx = touch.clientX - cellTouchStart.current.x;
+                            const dy = touch.clientY - cellTouchStart.current.y;
+                            if (Math.abs(dx) > 10 || Math.abs(dy) > 10)
+                              cancelCellLongPress();
+                          },
+                          onTouchEnd: cancelCellLongPress,
+                          onTouchCancel: cancelCellLongPress,
                           children: [
                             orderedColumns.map((column, visualIndex) => {
                               if (column.key === "__select__" && rowSelection) {
@@ -2329,7 +2713,11 @@ function BoltTable({
                                   scrollContainerRef: tableAreaRef,
                                   isLoading: showShimmer,
                                   onExpandedRowResize: handleExpandedRowResize,
-                                  maxExpandedRowHeight
+                                  maxExpandedRowHeight,
+                                  pinnedTopData: pinnedTopRows,
+                                  pinnedBottomData: pinnedBottomRows,
+                                  gridTemplateColumns,
+                                  headerHeight: HEADER_HEIGHT
                                 }
                               )
                             )
@@ -2635,7 +3023,166 @@ function BoltTable({
         }
       ),
       document.body
-    )
+    ),
+    cellContextMenu && typeof document !== "undefined" && (() => {
+      const menuCol = freshOrderedColumns.find(
+        (c) => c.key === cellContextMenu.columnKey
+      );
+      const isPinnedTop = pinnedTopKeySet.has(cellContextMenu.rowKey);
+      const isPinnedBottom = pinnedBottomKeySet.has(
+        cellContextMenu.rowKey
+      );
+      const hasCopy = menuCol?.copy;
+      const hasRowPin = !!onRowPin;
+      let menuRecord;
+      let menuRowIndex = 0;
+      const allRows = [
+        ...pinnedTopRows,
+        ...displayData,
+        ...pinnedBottomRows
+      ];
+      for (let i = 0; i < allRows.length; i++) {
+        const rk = getRowKey(allRows[i], i);
+        if (rk === cellContextMenu.rowKey) {
+          menuRecord = allRows[i];
+          menuRowIndex = i;
+          break;
+        }
+      }
+      const menuValue = menuRecord && menuCol ? menuRecord[menuCol.dataIndex] : void 0;
+      const btnStyle = {
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        gap: 8,
+        background: "none",
+        border: "none",
+        padding: "6px 12px",
+        fontSize: 12,
+        cursor: "pointer",
+        color: "inherit",
+        whiteSpace: "nowrap"
+      };
+      return (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            ref: cellMenuRef,
+            style: {
+              position: "fixed",
+              top: cellContextMenu.y,
+              left: cellContextMenu.x,
+              zIndex: 99999,
+              minWidth: 170,
+              borderRadius: 8,
+              border: "1px solid rgba(128,128,128,0.2)",
+              boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
+              backdropFilter: "blur(16px)",
+              WebkitBackdropFilter: "blur(16px)",
+              backgroundColor: "rgba(128,128,128,0.08)",
+              padding: "4px 0",
+              fontSize: 10
+            },
+            children: [
+              hasRowPin && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "button",
+                  {
+                    "data-bt-ctx-item": true,
+                    style: btnStyle,
+                    onClick: () => {
+                      onRowPin(
+                        cellContextMenu.rowKey,
+                        isPinnedTop ? false : "top"
+                      );
+                      setCellContextMenu(null);
+                    },
+                    children: [
+                      isPinnedTop ? icons?.pinOff ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        PinOffIcon,
+                        {
+                          style: { width: 14, height: 14, flexShrink: 0 }
+                        }
+                      ) : icons?.pin ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        PinIcon,
+                        {
+                          style: { width: 14, height: 14, flexShrink: 0 }
+                        }
+                      ),
+                      isPinnedTop ? "Unpin Row from Top" : "Pin Row to Top"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "button",
+                  {
+                    "data-bt-ctx-item": true,
+                    style: btnStyle,
+                    onClick: () => {
+                      onRowPin(
+                        cellContextMenu.rowKey,
+                        isPinnedBottom ? false : "bottom"
+                      );
+                      setCellContextMenu(null);
+                    },
+                    children: [
+                      isPinnedBottom ? icons?.pinOff ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        PinOffIcon,
+                        {
+                          style: { width: 14, height: 14, flexShrink: 0 }
+                        }
+                      ) : icons?.pin ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        PinIcon,
+                        {
+                          style: {
+                            width: 14,
+                            height: 14,
+                            flexShrink: 0,
+                            transform: "rotate(180deg)"
+                          }
+                        }
+                      ),
+                      isPinnedBottom ? "Unpin Row from Bottom" : "Pin Row to Bottom"
+                    ]
+                  }
+                )
+              ] }),
+              hasRowPin && hasCopy && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  style: {
+                    borderTop: "1px solid rgba(128,128,128,0.2)",
+                    margin: "4px 0"
+                  }
+                }
+              ),
+              hasCopy && menuRecord && menuCol && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  "data-bt-ctx-item": true,
+                  style: btnStyle,
+                  onClick: () => {
+                    const text = typeof menuCol.copy === "function" ? menuCol.copy(menuValue, menuRecord, menuRowIndex) : String(menuValue ?? "");
+                    navigator.clipboard?.writeText(text);
+                    setCellContextMenu(null);
+                  },
+                  children: [
+                    icons?.copy ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      CopyIcon,
+                      {
+                        style: { width: 14, height: 14, flexShrink: 0 }
+                      }
+                    ),
+                    "Copy"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        document.body
+      );
+    })()
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node: