@ricsam/react-spreadsheets 0.0.12 → 0.0.14

package/README.md

@@ -22,6 +22,22 @@ bun add @ricsam/formula-engine
 
 `react`, `react-dom` and `@ricsam/selection-manager` are peer dependencies.
 
+## Formula rendering and imported defaults
+
+`FormulaSheet` shares engine style reads between its cell container and content,
+with a bounded cache invalidated on **every engine update**, including changes to
+other sheets, styles, metadata, undo and redo. Selection-only changes leave
+unchanged cells alone. Consumer style/render callbacks still receive current
+`isSelected` and `isBeingEdited` values; keep callback identities stable (for
+example with `useCallback`) to avoid invalidating all visible cells unnecessarily.
+
+Workbook metadata may contain `defaultCellStyle` (a `CellStyle`, optionally with
+`fontFamily: string`). These imported defaults are applied beneath explicit
+engine cell styles. Font sizes use the engine's CSS-pixel convention. False
+bold/italic/underline values override defaults. Without this metadata the existing
+CSS/application defaults remain unchanged; fonts are never inferred from nearby
+cells. Existing saved imports need reimporting to recover missing source defaults.
+
 ## Usage
 
 Import the stylesheet once, near your app root:

package/dist/cjs/lib.cjs

@@ -3473,13 +3473,21 @@ class WorkbookSelectionManager {
     if (cachedSelections && manager.getState().selections.length === 0) {
       manager.replaceSelections(cachedSelections);
     }
+    let previousFocus = manager.getState().hasFocus;
+    let previousSelections = JSON.stringify(manager.getState().selections);
     const focusCleanup = manager.observeStateChange((state) => state.hasFocus, (hasFocus) => {
+      if (hasFocus === previousFocus)
+        return;
+      previousFocus = hasFocus;
       if (hasFocus && !this.applyingRangeFocus.has(manager)) {
         this.rememberSelections(manager, registeredContext);
         this.emitChange();
       }
     });
     const selectionCleanup = manager.observeStateChange((state) => JSON.stringify(state.selections), (selectionsJson) => {
+      if (selectionsJson === previousSelections)
+        return;
+      previousSelections = selectionsJson;
       if (this.applyingRangeFocus.has(manager))
         return;
       const selections = JSON.parse(selectionsJson);
@@ -4039,6 +4047,186 @@ function FormulaSheet({
     viewId,
     workbookName
   ]);
+  const renderCallbacks = import_react6.useMemo(() => {
+    const metadata = engine.getWorkbookMetadata(workbookName);
+    const defaults = metadata?.defaultCellStyle;
+    const fontStyle = (style) => ({
+      ...style?.fontFamily && { fontFamily: style.fontFamily },
+      ...style?.bold !== undefined && { fontWeight: style.bold ? "bold" : "normal" },
+      ...style?.italic !== undefined && { fontStyle: style.italic ? "italic" : "normal" },
+      ...style?.underline !== undefined && { textDecoration: style.underline ? "underline" : "none" }
+    });
+    const styles = new Map;
+    const getStyle = (cell) => {
+      if (styles.has(cell.id))
+        return styles.get(cell.id);
+      const explicit = engine.getCellStyle({
+        sheetName,
+        workbookName,
+        colIndex: cell.colIndex,
+        rowIndex: cell.rowIndex
+      });
+      const style = defaults ? { ...defaults, ...explicit } : explicit;
+      if (styles.size >= 4096)
+        styles.clear();
+      styles.set(cell.id, style);
+      return style;
+    };
+    return {
+      customCellStyle: (cell) => {
+        const conditionalStyle = getStyle(cell);
+        const tableInfo = engine.isCellInTable({
+          sheetName,
+          colIndex: cell.colIndex,
+          rowIndex: cell.rowIndex,
+          workbookName
+        });
+        if (!tableInfo) {
+          const style = conditionalStyle ? {
+            ...conditionalStyle.backgroundColor && {
+              backgroundColor: conditionalStyle.backgroundColor
+            },
+            ...conditionalStyle.color && {
+              color: conditionalStyle.color
+            },
+            ...conditionalStyle.fontSize && {
+              fontSize: conditionalStyle.fontSize
+            },
+            ...fontStyle(conditionalStyle),
+            ...getBorderCellStyle(conditionalStyle),
+            ...getWrapCellStyle(conditionalStyle)
+          } : {};
+          return customCellStyle ? customCellStyle(cell, style) : style;
+        }
+        const isHeaderRow = cell.rowIndex === tableInfo.start.rowIndex;
+        const isFirstColumn = cell.colIndex === tableInfo.start.colIndex;
+        const isLastColumn = cell.colIndex === tableInfo.start.colIndex + tableInfo.headers.size - 1;
+        const isLastRow = tableInfo.endRow.type === "number" ? cell.rowIndex === tableInfo.endRow.value : false;
+        const style = {
+          border: "1px solid var(--_rsp-table-border-light)"
+        };
+        if (isHeaderRow) {
+          style.backgroundColor = "var(--_rsp-table-header-bg)";
+          style.color = "var(--_rsp-table-header-color)";
+          style.fontWeight = "bold";
+          style.borderBottom = "2px solid var(--_rsp-table-header-border)";
+        } else {
+          const dataRowIndex = cell.rowIndex - tableInfo.start.rowIndex - 1;
+          if (dataRowIndex % 2 === 0) {
+            style.backgroundColor = "var(--_rsp-table-even-row-bg)";
+          } else {
+            style.backgroundColor = "var(--_rsp-table-odd-row-bg)";
+          }
+        }
+        if (isFirstColumn) {
+          style.borderLeft = "2px solid var(--_rsp-table-border-color)";
+        }
+        if (isLastColumn) {
+          style.borderRight = "2px solid var(--_rsp-table-border-color)";
+        }
+        if (isHeaderRow) {
+          style.borderTop = "2px solid var(--_rsp-table-border-color)";
+        }
+        if (isLastRow) {
+          style.borderBottom = "2px solid var(--_rsp-table-border-color)";
+        }
+        if (conditionalStyle?.backgroundColor) {
+          style.backgroundColor = conditionalStyle.backgroundColor;
+        }
+        if (conditionalStyle?.color) {
+          style.color = conditionalStyle.color;
+        }
+        if (conditionalStyle?.fontSize) {
+          style.fontSize = conditionalStyle.fontSize;
+        }
+        Object.assign(style, fontStyle(conditionalStyle));
+        Object.assign(style, getBorderCellStyle(conditionalStyle));
+        Object.assign(style, getWrapCellStyle(conditionalStyle));
+        if (customCellStyle) {
+          return customCellStyle(cell, style);
+        }
+        return style;
+      },
+      customCellRenderer: (cell) => {
+        const cellRef = import_formula_engine2.getCellReference({
+          colIndex: cell.colIndex,
+          rowIndex: cell.rowIndex
+        });
+        const value = showFormulas ? sheet?.content.get(cellRef) : engine.getCellValue({
+          sheetName,
+          workbookName,
+          colIndex: cell.colIndex,
+          rowIndex: cell.rowIndex
+        }, verboseErrors);
+        const conditionalStyle = getStyle(cell);
+        const conditionalStyleProps = {};
+        if (conditionalStyle?.backgroundColor) {
+          conditionalStyleProps.backgroundColor = conditionalStyle.backgroundColor;
+        }
+        if (conditionalStyle?.color) {
+          conditionalStyleProps.color = conditionalStyle.color;
+        }
+        if (conditionalStyle?.fontSize) {
+          conditionalStyleProps.fontSize = conditionalStyle.fontSize;
+        }
+        Object.assign(conditionalStyleProps, fontStyle(conditionalStyle), getWrapContentStyle(conditionalStyle));
+        let defaultElement;
+        if (showFormulas) {
+          defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
+            "data-conditional-background": conditionalStyle?.backgroundColor,
+            "data-conditional-text-color": conditionalStyle?.color,
+            style: conditionalStyleProps,
+            children: getCellDisplayText(value)
+          });
+        } else if (typeof value === "boolean") {
+          defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
+            "data-conditional-background": conditionalStyle?.backgroundColor,
+            "data-conditional-text-color": conditionalStyle?.color,
+            "data-type": "boolean",
+            style: {
+              ...conditionalStyleProps,
+              width: "100%",
+              textAlign: "center",
+              fontFamily: conditionalStyle?.fontFamily ?? "'Courier New', monospace"
+            },
+            children: value ? "TRUE" : "FALSE"
+          });
+        } else if (typeof value === "number") {
+          defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
+            "data-conditional-background": conditionalStyle?.backgroundColor,
+            "data-conditional-text-color": conditionalStyle?.color,
+            "data-type": "number",
+            style: { ...conditionalStyleProps, width: "100%", textAlign: "right" },
+            children: value.toLocaleString("en-US", {
+              minimumFractionDigits: 0,
+              maximumFractionDigits: 10
+            })
+          });
+        } else {
+          defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
+            "data-conditional-background": conditionalStyle?.backgroundColor,
+            "data-conditional-text-color": conditionalStyle?.color,
+            style: { ...conditionalStyleProps, width: "100%", textAlign: "left" },
+            children: getCellDisplayText(value)
+          });
+        }
+        if (customCellRenderer) {
+          return customCellRenderer(cell, defaultElement);
+        }
+        return defaultElement;
+      }
+    };
+  }, [
+    engine,
+    state,
+    workbookName,
+    sheetName,
+    sheet,
+    showFormulas,
+    verboseErrors,
+    customCellStyle,
+    customCellRenderer
+  ]);
   if (!sheet) {
     return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
       className: "rsp-root rsp-workbook",
@@ -4080,183 +4268,7 @@ function FormulaSheet({
           containerProps: isSelected && selectedArea ? {
             "data-grid-no-interaction": "true"
           } : {},
-          customCellStyle: (cell) => {
-            const conditionalStyle = engine.getCellStyle({
-              sheetName,
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex,
-              workbookName
-            });
-            const tableInfo = engine.isCellInTable({
-              sheetName,
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex,
-              workbookName
-            });
-            if (!tableInfo) {
-              const style = conditionalStyle ? {
-                ...conditionalStyle.backgroundColor && {
-                  backgroundColor: conditionalStyle.backgroundColor
-                },
-                ...conditionalStyle.color && {
-                  color: conditionalStyle.color
-                },
-                ...conditionalStyle.fontSize && {
-                  fontSize: conditionalStyle.fontSize
-                },
-                ...conditionalStyle.bold && {
-                  fontWeight: "bold"
-                },
-                ...conditionalStyle.italic && {
-                  fontStyle: "italic"
-                },
-                ...conditionalStyle.underline && {
-                  textDecoration: "underline"
-                },
-                ...getBorderCellStyle(conditionalStyle),
-                ...getWrapCellStyle(conditionalStyle)
-              } : {};
-              return customCellStyle ? customCellStyle(cell, style) : style;
-            }
-            const isHeaderRow = cell.rowIndex === tableInfo.start.rowIndex;
-            const isFirstColumn = cell.colIndex === tableInfo.start.colIndex;
-            const isLastColumn = cell.colIndex === tableInfo.start.colIndex + tableInfo.headers.size - 1;
-            const isLastRow = tableInfo.endRow.type === "number" ? cell.rowIndex === tableInfo.endRow.value : false;
-            const style = {
-              border: "1px solid var(--_rsp-table-border-light)"
-            };
-            if (isHeaderRow) {
-              style.backgroundColor = "var(--_rsp-table-header-bg)";
-              style.color = "var(--_rsp-table-header-color)";
-              style.fontWeight = "bold";
-              style.borderBottom = "2px solid var(--_rsp-table-header-border)";
-            } else {
-              const dataRowIndex = cell.rowIndex - tableInfo.start.rowIndex - 1;
-              if (dataRowIndex % 2 === 0) {
-                style.backgroundColor = "var(--_rsp-table-even-row-bg)";
-              } else {
-                style.backgroundColor = "var(--_rsp-table-odd-row-bg)";
-              }
-            }
-            if (isFirstColumn) {
-              style.borderLeft = "2px solid var(--_rsp-table-border-color)";
-            }
-            if (isLastColumn) {
-              style.borderRight = "2px solid var(--_rsp-table-border-color)";
-            }
-            if (isHeaderRow) {
-              style.borderTop = "2px solid var(--_rsp-table-border-color)";
-            }
-            if (isLastRow) {
-              style.borderBottom = "2px solid var(--_rsp-table-border-color)";
-            }
-            if (conditionalStyle?.backgroundColor) {
-              style.backgroundColor = conditionalStyle.backgroundColor;
-            }
-            if (conditionalStyle?.color) {
-              style.color = conditionalStyle.color;
-            }
-            if (conditionalStyle?.fontSize) {
-              style.fontSize = conditionalStyle.fontSize;
-            }
-            if (conditionalStyle?.bold) {
-              style.fontWeight = "bold";
-            }
-            if (conditionalStyle?.italic) {
-              style.fontStyle = "italic";
-            }
-            if (conditionalStyle?.underline) {
-              style.textDecoration = "underline";
-            }
-            Object.assign(style, getBorderCellStyle(conditionalStyle));
-            Object.assign(style, getWrapCellStyle(conditionalStyle));
-            if (customCellStyle) {
-              return customCellStyle(cell, style);
-            }
-            return style;
-          },
-          customCellRenderer: (cell) => {
-            const cellRef = import_formula_engine2.getCellReference({
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex
-            });
-            const value = showFormulas ? sheet?.content.get(cellRef) : engine.getCellValue({
-              sheetName,
-              workbookName,
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex
-            }, verboseErrors);
-            const conditionalStyle = engine.getCellStyle({
-              sheetName,
-              colIndex: cell.colIndex,
-              rowIndex: cell.rowIndex,
-              workbookName
-            });
-            const conditionalStyleProps = {};
-            if (conditionalStyle?.backgroundColor) {
-              conditionalStyleProps.backgroundColor = conditionalStyle.backgroundColor;
-            }
-            if (conditionalStyle?.color) {
-              conditionalStyleProps.color = conditionalStyle.color;
-            }
-            if (conditionalStyle?.fontSize) {
-              conditionalStyleProps.fontSize = conditionalStyle.fontSize;
-            }
-            if (conditionalStyle?.bold) {
-              conditionalStyleProps.fontWeight = "bold";
-            }
-            if (conditionalStyle?.italic) {
-              conditionalStyleProps.fontStyle = "italic";
-            }
-            if (conditionalStyle?.underline) {
-              conditionalStyleProps.textDecoration = "underline";
-            }
-            Object.assign(conditionalStyleProps, getWrapContentStyle(conditionalStyle));
-            let defaultElement;
-            if (showFormulas) {
-              defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
-                "data-conditional-background": conditionalStyle?.backgroundColor,
-                "data-conditional-text-color": conditionalStyle?.color,
-                style: conditionalStyleProps,
-                children: getCellDisplayText(value)
-              });
-            } else if (typeof value === "boolean") {
-              defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
-                "data-conditional-background": conditionalStyle?.backgroundColor,
-                "data-conditional-text-color": conditionalStyle?.color,
-                "data-type": "boolean",
-                style: {
-                  ...conditionalStyleProps,
-                  width: "100%",
-                  textAlign: "center",
-                  fontFamily: "'Courier New', monospace"
-                },
-                children: value ? "TRUE" : "FALSE"
-              });
-            } else if (typeof value === "number") {
-              defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
-                "data-conditional-background": conditionalStyle?.backgroundColor,
-                "data-conditional-text-color": conditionalStyle?.color,
-                "data-type": "number",
-                style: { ...conditionalStyleProps, width: "100%", textAlign: "right" },
-                children: value.toLocaleString("en-US", {
-                  minimumFractionDigits: 0,
-                  maximumFractionDigits: 10
-                })
-              });
-            } else {
-              defaultElement = /* @__PURE__ */ jsx_runtime4.jsx("div", {
-                "data-conditional-background": conditionalStyle?.backgroundColor,
-                "data-conditional-text-color": conditionalStyle?.color,
-                style: { ...conditionalStyleProps, width: "100%", textAlign: "left" },
-                children: getCellDisplayText(value)
-              });
-            }
-            if (customCellRenderer) {
-              return customCellRenderer(cell, defaultElement);
-            }
-            return defaultElement;
-          }
+          ...renderCallbacks
         })
       })
     ]
@@ -4615,4 +4627,4 @@ var useClickAway = (ref, callback) => {
   }, [ref, callback]);
 };
 
-//# debugId=95BAABDC3CCBBC2364756E2164756E21
+//# debugId=07CD4F6A4866444B64756E2164756E21