@particle-academy/fancy-sheets 0.5.1 → 0.6.0

package/dist/index.d.cts

@@ -33,6 +33,15 @@ interface CellFormat {
     /** Left border color (renders 1px solid) */
     borderLeft?: string;
 }
+/** Cell comment */
+interface CellComment {
+    /** Comment text */
+    text: string;
+    /** Author name (optional) */
+    author?: string;
+    /** Comment color — used for the corner triangle indicator and cell border (default: #f59e0b / amber-500) */
+    color?: string;
+}
 /** A single cell's complete data */
 interface CellData {
     /** The raw value (what the user typed) */
@@ -43,6 +52,8 @@ interface CellData {
     computedValue?: CellValue;
     /** Display formatting */
     format?: CellFormat;
+    /** Cell comment — shows a triangle indicator in the corner */
+    comment?: CellComment;
 }
 
 /** Sparse cell map — only stores cells that have data */
@@ -284,4 +295,4 @@ declare function workbookToCSV(workbook: WorkbookData, sheetId?: string): string
 type FormulaRangeFunction = (args: CellValue[][]) => CellValue;
 declare function registerFunction(name: string, fn: FormulaRangeFunction): void;
 
-export { type CellAddress, type CellData, type CellFormat, type CellMap, type CellRange, type CellValue, type ColumnWidths, type FormulaRangeFunction, type MergedRegion, type SelectionState, Sheet, type SheetData, type SheetProps, SheetWorkbook, type SheetWorkbookProps, Spreadsheet, type SpreadsheetContextMenuItem, type SpreadsheetContextValue, type SpreadsheetProps, type TextAlign, type WorkbookData, columnToLetter, createEmptySheet, createEmptyWorkbook, csvToWorkbook, letterToColumn, parseAddress, parseCSV, registerFunction, stringifyCSV, toAddress, useSpreadsheet, workbookToCSV };
+export { type CellAddress, type CellComment, type CellData, type CellFormat, type CellMap, type CellRange, type CellValue, type ColumnWidths, type FormulaRangeFunction, type MergedRegion, type SelectionState, Sheet, type SheetData, type SheetProps, SheetWorkbook, type SheetWorkbookProps, Spreadsheet, type SpreadsheetContextMenuItem, type SpreadsheetContextValue, type SpreadsheetProps, type TextAlign, type WorkbookData, columnToLetter, createEmptySheet, createEmptyWorkbook, csvToWorkbook, letterToColumn, parseAddress, parseCSV, registerFunction, stringifyCSV, toAddress, useSpreadsheet, workbookToCSV };

package/dist/index.d.ts

@@ -33,6 +33,15 @@ interface CellFormat {
     /** Left border color (renders 1px solid) */
     borderLeft?: string;
 }
+/** Cell comment */
+interface CellComment {
+    /** Comment text */
+    text: string;
+    /** Author name (optional) */
+    author?: string;
+    /** Comment color — used for the corner triangle indicator and cell border (default: #f59e0b / amber-500) */
+    color?: string;
+}
 /** A single cell's complete data */
 interface CellData {
     /** The raw value (what the user typed) */
@@ -43,6 +52,8 @@ interface CellData {
     computedValue?: CellValue;
     /** Display formatting */
     format?: CellFormat;
+    /** Cell comment — shows a triangle indicator in the corner */
+    comment?: CellComment;
 }
 
 /** Sparse cell map — only stores cells that have data */
@@ -284,4 +295,4 @@ declare function workbookToCSV(workbook: WorkbookData, sheetId?: string): string
 type FormulaRangeFunction = (args: CellValue[][]) => CellValue;
 declare function registerFunction(name: string, fn: FormulaRangeFunction): void;
 
-export { type CellAddress, type CellData, type CellFormat, type CellMap, type CellRange, type CellValue, type ColumnWidths, type FormulaRangeFunction, type MergedRegion, type SelectionState, Sheet, type SheetData, type SheetProps, SheetWorkbook, type SheetWorkbookProps, Spreadsheet, type SpreadsheetContextMenuItem, type SpreadsheetContextValue, type SpreadsheetProps, type TextAlign, type WorkbookData, columnToLetter, createEmptySheet, createEmptyWorkbook, csvToWorkbook, letterToColumn, parseAddress, parseCSV, registerFunction, stringifyCSV, toAddress, useSpreadsheet, workbookToCSV };
+export { type CellAddress, type CellComment, type CellData, type CellFormat, type CellMap, type CellRange, type CellValue, type ColumnWidths, type FormulaRangeFunction, type MergedRegion, type SelectionState, Sheet, type SheetData, type SheetProps, SheetWorkbook, type SheetWorkbookProps, Spreadsheet, type SpreadsheetContextMenuItem, type SpreadsheetContextValue, type SpreadsheetProps, type TextAlign, type WorkbookData, columnToLetter, createEmptySheet, createEmptyWorkbook, csvToWorkbook, letterToColumn, parseAddress, parseCSV, registerFunction, stringifyCSV, toAddress, useSpreadsheet, workbookToCSV };

package/dist/index.js

@@ -1,6 +1,6 @@
-import { createContext, memo, useCallback, useContext, useRef, useEffect, useMemo, useState, useReducer } from 'react';
+import { createContext, memo, useCallback, useState, useContext, useRef, useEffect, useMemo, useReducer } from 'react';
 import { cn, ContextMenu } from '@particle-academy/react-fancy';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/Spreadsheet/Spreadsheet.tsx
 var SpreadsheetContext = createContext(null);
@@ -1737,6 +1737,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);
@@ -1854,7 +1855,15 @@ var Cell = memo(function Cell2({ address, row, col }) {
     formatStyle.borderLeftStyle = "solid";
     formatStyle.borderLeftColor = cell.format.borderLeft;
   }
-  return /* @__PURE__ */ 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] = useState(false);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-fancy-sheets-cell": "",
@@ -1868,10 +1877,40 @@ var Cell = 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__ */ jsx("span", { className: "truncate", children: displayValue })
+      children: [
+        !isEditing && /* @__PURE__ */ jsx("span", { className: "truncate", children: displayValue }),
+        comment && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "mb-0.5 font-semibold", style: { color: commentColor }, children: comment.author }),
+              /* @__PURE__ */ jsx("div", { className: "text-zinc-700 dark:text-zinc-200 whitespace-pre-wrap", children: comment.text })
+            ]
+          }
+        )
+      ]
     }
   );
 });