@particle-academy/fancy-sheets 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -1739,6 +1739,7 @@ function RowHeader({ rowIndex }) {
   );
 }
 RowHeader.displayName = "RowHeader";
+var DEFAULT_COMMENT_COLOR = "#f59e0b";
 var EXCEL_EPOCH2 = new Date(1899, 11, 30).getTime();
 function serialToDateStr(serial) {
   const d = new Date(EXCEL_EPOCH2 + Math.floor(serial) * 864e5);
@@ -1838,7 +1839,10 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
   if (cell?.format?.bold) formatStyle.fontWeight = "bold";
   if (cell?.format?.italic) formatStyle.fontStyle = "italic";
   if (cell?.format?.textAlign) formatStyle.textAlign = cell.format.textAlign;
-  if (cell?.format?.backgroundColor) formatStyle.backgroundColor = cell.format.backgroundColor;
+  if (cell?.format?.backgroundColor) {
+    formatStyle.backgroundColor = cell.format.backgroundColor;
+    if (!cell.format.color) formatStyle.color = "#1f2937";
+  }
   if (cell?.format?.color) formatStyle.color = cell.format.color;
   if (cell?.format?.fontSize) formatStyle.fontSize = cell.format.fontSize;
   if (cell?.format?.borderTop) {
@@ -1853,7 +1857,15 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
     formatStyle.borderLeftStyle = "solid";
     formatStyle.borderLeftColor = cell.format.borderLeft;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const comment = cell?.comment;
+  const commentColor = comment?.color ?? DEFAULT_COMMENT_COLOR;
+  if (comment) {
+    formatStyle.borderColor = commentColor;
+    formatStyle.borderWidth = 1;
+    formatStyle.borderStyle = "solid";
+  }
+  const [showComment, setShowComment] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-fancy-sheets-cell": "",
@@ -1867,10 +1879,40 @@ var Cell = react.memo(function Cell2({ address, row, col }) {
       ),
       style: { width, minWidth: width, height: rowHeight, ...formatStyle },
       onMouseDown: handleMouseDown,
-      onMouseEnter: handleMouseEnter,
+      onMouseEnter: (e) => {
+        handleMouseEnter();
+        if (comment) setShowComment(true);
+      },
       onMouseUp: handleMouseUp,
+      onMouseLeave: () => {
+        if (comment) setShowComment(false);
+      },
       onDoubleClick: handleDoubleClick,
-      children: !isEditing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: displayValue })
+      children: [
+        !isEditing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: displayValue }),
+        comment && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute top-0 right-0 h-0 w-0",
+            style: {
+              borderTop: `6px solid ${commentColor}`,
+              borderLeft: "6px solid transparent"
+            },
+            "aria-hidden": true
+          }
+        ),
+        comment && showComment && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "absolute top-full left-0 z-50 mt-0.5 max-w-[200px] rounded border bg-white px-2 py-1.5 text-[11px] leading-tight shadow-lg dark:bg-zinc-800",
+            style: { borderColor: commentColor },
+            children: [
+              comment.author && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0.5 font-semibold", style: { color: commentColor }, children: comment.author }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-zinc-700 dark:text-zinc-200 whitespace-pre-wrap", children: comment.text })
+            ]
+          }
+        )
+      ]
     }
   );
 });