bolt-table 0.1.13 → 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",
@@ -1110,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",
@@ -1224,85 +1262,100 @@ var TableBody = ({
         style: {
           gridColumn: "1 / -1",
           gridRow: 2,
-          position: "sticky",
-          top: headerHeight,
+          height: `${totalSize}px`,
+          position: "relative",
           zIndex: 20,
-          boxShadow: "0 2px 6px -1px rgba(0,0,0,0.08)"
+          pointerEvents: "none"
         },
-        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-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,
-                      ...isPinned && styles?.pinnedCell ? styles.pinnedCell : {}
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        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: {
-                          height: `${rowHeight}px`,
-                          position: "relative"
+                          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)(
-                          Cell,
+                          "div",
                           {
-                            value: cellValue,
-                            record: row,
-                            column: col,
-                            rowIndex: rowIdx,
-                            classNames,
-                            styles,
-                            isSelected,
-                            isExpanded,
-                            rowSelection,
-                            normalizedSelectedKeys,
-                            rowKey: rk,
-                            allData: allDataForSelection,
-                            getRowKey,
-                            accentColor,
-                            isLoading: false,
-                            recordFingerprint
+                            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}`
-          );
-        })
+                      },
+                      col.key
+                    );
+                  })
+                },
+                `pinned-top-${rk}`
+              );
+            })
+          }
+        )
       }
     ),
     pinnedBottomData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1311,86 +1364,103 @@ var TableBody = ({
         style: {
           gridColumn: "1 / -1",
           gridRow: 2,
-          position: "sticky",
-          bottom: 0,
-          alignSelf: "end",
+          height: `${totalSize}px`,
+          position: "relative",
           zIndex: 20,
-          boxShadow: "0 -2px 6px -1px rgba(0,0,0,0.08)"
+          pointerEvents: "none",
+          display: "flex",
+          flexDirection: "column"
         },
-        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-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,
-                      ...isPinned && styles?.pinnedCell ? styles.pinnedCell : {}
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        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: {
-                          height: `${rowHeight}px`,
-                          position: "relative"
+                          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)(
-                          Cell,
+                          "div",
                           {
-                            value: cellValue,
-                            record: row,
-                            column: col,
-                            rowIndex: rowIdx,
-                            classNames,
-                            styles,
-                            isSelected,
-                            isExpanded,
-                            rowSelection,
-                            normalizedSelectedKeys,
-                            rowKey: rk,
-                            allData: allDataForSelection,
-                            getRowKey,
-                            accentColor,
-                            isLoading: false,
-                            recordFingerprint
+                            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}`
-          );
-        })
+                      },
+                      col.key
+                    );
+                  })
+                },
+                `pinned-bottom-${rk}`
+              );
+            })
+          }
+        )
       }
     )
   ] });
@@ -1428,6 +1498,7 @@ function BoltTable({
   onColumnHide,
   rowSelection,
   rowPinning,
+  onRowPin,
   expandable,
   rowKey = "id",
   onEndReached,
@@ -1997,6 +2068,44 @@ function BoltTable({
   }, [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 });
@@ -2358,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) {
@@ -2856,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: