@particle-academy/fancy-sheets 0.4.6 → 0.5.1

package/dist/index.cjs

@@ -1838,6 +1838,24 @@ 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.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) {
+    formatStyle.borderTopWidth = 1;
+    formatStyle.borderTopStyle = "solid";
+    formatStyle.borderTopColor = cell.format.borderTop;
+  }
+  if (cell?.format?.borderRight) formatStyle.borderRightColor = cell.format.borderRight;
+  if (cell?.format?.borderBottom) formatStyle.borderBottomColor = cell.format.borderBottom;
+  if (cell?.format?.borderLeft) {
+    formatStyle.borderLeftWidth = 1;
+    formatStyle.borderLeftStyle = "solid";
+    formatStyle.borderLeftColor = cell.format.borderLeft;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1997,7 +2015,8 @@ function SpreadsheetGrid({ className }) {
     setFrozenCols,
     extendSelection,
     undo,
-    redo
+    redo,
+    contextMenuItems
   } = useSpreadsheet();
   const containerRef = react.useRef(null);
   const handleKeyDown = react.useCallback(
@@ -2190,14 +2209,31 @@ function SpreadsheetGrid({ className }) {
       /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Item, { onClick: () => {
         const col = parseAddress(selection.activeCell).col;
         setFrozenCols(activeSheet.frozenCols > 0 ? 0 : col);
-      }, disabled: readOnly, children: activeSheet.frozenCols > 0 ? "Unfreeze columns" : "Freeze columns left" })
+      }, disabled: readOnly, children: activeSheet.frozenCols > 0 ? "Unfreeze columns" : "Freeze columns left" }),
+      (() => {
+        const items = typeof contextMenuItems === "function" ? contextMenuItems(selection.activeCell) : contextMenuItems;
+        if (!items || items.length === 0) return null;
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactFancy.ContextMenu.Separator, {}),
+          items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            reactFancy.ContextMenu.Item,
+            {
+              onClick: () => item.onClick(selection.activeCell),
+              disabled: typeof item.disabled === "function" ? item.disabled(selection.activeCell) : item.disabled,
+              danger: item.danger,
+              children: item.label
+            },
+            i
+          ))
+        ] });
+      })()
     ] })
   ] });
 }
 SpreadsheetGrid.displayName = "SpreadsheetGrid";
 var btnClass = "inline-flex items-center justify-center rounded px-2 py-1 text-[12px] font-medium text-zinc-600 transition-colors hover:bg-zinc-100 disabled:opacity-40 dark:text-zinc-300 dark:hover:bg-zinc-800";
 var activeBtnClass = "bg-zinc-200 dark:bg-zinc-700";
-function DefaultToolbar() {
+function DefaultToolbar({ extra }) {
   const {
     selection,
     activeSheet,
@@ -2389,7 +2425,11 @@ function DefaultToolbar() {
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px]", children: "\u2192" })
           ]
         }
-      )
+      ),
+      extra && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
+        extra
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-fancy-sheets-formula-bar": "", className: "flex items-center gap-2 border-b border-zinc-200 px-2 py-1 dark:border-zinc-700", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-center text-[11px] font-medium text-zinc-500 dark:text-zinc-400", children: selection.activeCell }),
@@ -2408,8 +2448,8 @@ function DefaultToolbar() {
     ] })
   ] });
 }
-function SpreadsheetToolbar({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fancy-sheets-toolbar": "", className: reactFancy.cn("", className), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultToolbar, {}) });
+function SpreadsheetToolbar({ children, className, extra }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fancy-sheets-toolbar": "", className: reactFancy.cn("", className), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultToolbar, { extra }) });
 }
 SpreadsheetToolbar.displayName = "SpreadsheetToolbar";
 function SpreadsheetSheetTabs({ className }) {
@@ -2506,7 +2546,8 @@ function SpreadsheetRoot({
   rowCount = 100,
   defaultColumnWidth = 100,
   rowHeight = 28,
-  readOnly = false
+  readOnly = false,
+  contextMenuItems
 }) {
   const { state, actions } = useSpreadsheetStore(data ?? defaultData);
   const onChangeRef = react.useRef(onChange);
@@ -2571,9 +2612,10 @@ function SpreadsheetRoot({
       getColumnWidth,
       isCellSelected,
       isCellActive,
+      contextMenuItems,
       _isDragging: isDraggingRef
     }),
-    [state, activeSheet, columnCount, rowCount, defaultColumnWidth, rowHeight, readOnly, actions, getColumnWidth, isCellSelected, isCellActive]
+    [state, activeSheet, columnCount, rowCount, defaultColumnWidth, rowHeight, readOnly, actions, getColumnWidth, isCellSelected, isCellActive, contextMenuItems]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(SpreadsheetContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2590,6 +2632,32 @@ var Spreadsheet = Object.assign(SpreadsheetRoot, {
   Grid: SpreadsheetGrid,
   SheetTabs: SpreadsheetSheetTabs
 });
+function Sheet({ data, onChange, contextMenuItems, ...props }) {
+  const workbook = react.useMemo(
+    () => data ? { sheets: [data], activeSheetId: data.id } : void 0,
+    [data]
+  );
+  const handleChange = react.useMemo(() => {
+    if (!onChange) return void 0;
+    return (wb) => onChange(wb.sheets[0]);
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet, { data: workbook, onChange: handleChange, contextMenuItems, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Grid, {}) });
+}
+Sheet.displayName = "Sheet";
+function SheetWorkbook({
+  hideToolbar = false,
+  hideTabs = false,
+  toolbarExtra,
+  contextMenuItems,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Spreadsheet, { ...props, contextMenuItems, children: [
+    !hideToolbar && /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Toolbar, { extra: toolbarExtra }),
+    /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Grid, {}),
+    !hideTabs && /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.SheetTabs, {})
+  ] });
+}
+SheetWorkbook.displayName = "SheetWorkbook";
 
 // src/engine/csv.ts
 function parseCSV(text) {
@@ -2687,6 +2755,8 @@ function workbookToCSV(workbook, sheetId) {
   return stringifyCSV(data);
 }
 
+exports.Sheet = Sheet;
+exports.SheetWorkbook = SheetWorkbook;
 exports.Spreadsheet = Spreadsheet;
 exports.columnToLetter = columnToLetter;
 exports.createEmptySheet = createEmptySheet;