@ricsam/react-spreadsheets 0.0.5 → 0.0.7

package/README.md

@@ -86,10 +86,63 @@ export function Demo() {
 `FormulaWorkbook` adds Excel-style sheet tabs, renaming, deletion and zoom on
 top of `FormulaSheet`.
 
+### Formula reference highlights
+
+Keep editor-driven reference highlights separate from the user's spreadsheet
+selection. `FormulaSheet` calls `customCellStyle` with both the cell and its
+engine-provided style, so a host can add a transient range fill and perimeter
+without replacing table or conditional formatting:
+
+```tsx
+type Highlight = {
+  start: { rowIndex: number; colIndex: number };
+  end: { rowIndex: number; colIndex: number };
+};
+
+function ReferenceAwareSheet({ highlight }: { highlight?: Highlight }) {
+  return (
+    <FormulaSheet
+      engine={engine}
+      workbookName="Workbook1"
+      sheetName="Sheet1"
+      style={{ height: 480 }}
+      customCellStyle={(cell, internalStyle) => {
+        if (
+          !highlight ||
+          cell.rowIndex < highlight.start.rowIndex ||
+          cell.rowIndex > highlight.end.rowIndex ||
+          cell.colIndex < highlight.start.colIndex ||
+          cell.colIndex > highlight.end.colIndex
+        ) {
+          return internalStyle;
+        }
+
+        const color = "#7c3aed";
+        return {
+          ...internalStyle,
+          backgroundColor: "rgb(124 58 237 / 14%)",
+          ...(cell.rowIndex === highlight.start.rowIndex && { borderTopColor: color }),
+          ...(cell.rowIndex === highlight.end.rowIndex && { borderBottomColor: color }),
+          ...(cell.colIndex === highlight.start.colIndex && { borderLeftColor: color }),
+          ...(cell.colIndex === highlight.end.colIndex && { borderRightColor: color }),
+        };
+      }}
+    />
+  );
+}
+```
+
+Update `highlight` from the formula editor's caret/reference analysis. Clearing
+it removes the decoration, while the selection manager continues to own mouse,
+keyboard and edit selection state independently. For `FormulaWorkbook`, pass a
+controlled `activeSheet` if the editor should reveal a reference on another
+sheet; the same `customCellStyle` prop is forwarded to its active sheet.
+
 ## Theming
 
-All colors, fonts and sizes are CSS custom properties declared on `:root`, so
-you can override them from **any** ancestor of the grid:
+All colors, fonts and sizes are CSS custom properties. The package only ever
+*reads* the public `--rsp-*` names, so an override on **any** ancestor of the
+grid always wins:
 
 ```css
 .my-panel {
@@ -100,6 +153,16 @@ you can override them from **any** ancestor of the grid:
 }
 ```
 
+An override replaces both schemes, so pick a value that works in the mode(s) you
+support, or scope it per scheme:
+
+```css
+.my-panel { --rsp-bg: #ffffff; }
+@media (prefers-color-scheme: dark) {
+  .my-panel { --rsp-bg: #10131a; }
+}
+```
+
 ### Light and dark
 
 By default the grid follows the user's OS preference.
@@ -129,6 +192,13 @@ switches.
 > declaration, which makes shared-root tokens compute to an invalid value — in
 > production builds only. An equivalent space-toggle is used instead.
 
+> **Note** — internally each public token is aliased to a private `--_rsp-*`
+> property declared on `.rsp-root`, and the rules consume the private name. A
+> custom property containing `var()` is substituted at the element where it is
+> *declared*, so themed values declared on `:root` would be resolved against the
+> document root and a subtree pin could never change them. Treat `--_rsp-*` as
+> private and always override the public `--rsp-*` name.
+
 ### Cell fills stay readable
 
 A `backgroundColor` coming from your document model is usually a single literal

package/dist/cjs/lib.cjs

@@ -2747,7 +2747,7 @@ var Spreadsheet = import_react4.forwardRef(({
               height: 0,
               visibility: "hidden",
               pointerEvents: "none",
-              color: "var(--rsp-gridline)"
+              color: "var(--_rsp-gridline)"
             }
           }),
           /* @__PURE__ */ jsx_runtime3.jsx("canvas", {
@@ -3642,63 +3642,61 @@ function FormulaSheet({
               workbookName
             });
             if (!tableInfo) {
-              if (conditionalStyle) {
-                return {
-                  ...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 {};
+              const style2 = 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, style2) : style2;
             }
             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)"
+              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.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)";
+              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)";
+                style.backgroundColor = "var(--_rsp-table-even-row-bg)";
               } else {
-                style.backgroundColor = "var(--rsp-table-odd-row-bg)";
+                style.backgroundColor = "var(--_rsp-table-odd-row-bg)";
               }
             }
             if (isFirstColumn) {
-              style.borderLeft = "2px solid var(--rsp-table-border-color)";
+              style.borderLeft = "2px solid var(--_rsp-table-border-color)";
             }
             if (isLastColumn) {
-              style.borderRight = "2px solid var(--rsp-table-border-color)";
+              style.borderRight = "2px solid var(--_rsp-table-border-color)";
             }
             if (isHeaderRow) {
-              style.borderTop = "2px solid var(--rsp-table-border-color)";
+              style.borderTop = "2px solid var(--_rsp-table-border-color)";
             }
             if (isLastRow) {
-              style.borderBottom = "2px solid var(--rsp-table-border-color)";
+              style.borderBottom = "2px solid var(--_rsp-table-border-color)";
             }
             if (conditionalStyle?.backgroundColor) {
               style.backgroundColor = conditionalStyle.backgroundColor;
@@ -4163,4 +4161,4 @@ var useClickAway = (ref, callback) => {
   }, [ref, callback]);
 };
 
-//# debugId=A383A8C557A8A55164756E2164756E21
+//# debugId=4874F9DF8699906864756E2164756E21