@ricsam/react-spreadsheets 0.0.3 → 0.0.5

package/dist/cjs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@ricsam/react-spreadsheets",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "commonjs"
 }

package/dist/mjs/lib.mjs

@@ -2614,6 +2614,7 @@ var Spreadsheet = forwardRef(({
   }), [selectionManager]);
   return /* @__PURE__ */ jsx3("div", {
     className: cn("rsp-root", className),
+    "data-rsp-scheme": colorScheme,
     style: { position: "relative", ...style },
     ...containerProps,
     children: /* @__PURE__ */ jsx3("div", {
@@ -2820,7 +2821,15 @@ import {
   parseCellReference as parseCellReference2,
   getCellReference as getCellReference3
 } from "@ricsam/formula-engine";
-import React3, { useCallback as useCallback4, useRef as useRef4, useState as useState5 } from "react";
+import React3, { useCallback as useCallback4, useRef as useRef4, useState as useState6 } from "react";
+
+// src/utils/use-scheme-root.ts
+import { useState as useState5 } from "react";
+function useSchemeRoot() {
+  const [element, setElement] = useState5(null);
+  const scheme = useColorScheme(element);
+  return { ref: setElement, "data-rsp-scheme": scheme };
+}
 
 // src/workbook/border-sides.ts
 function normalizeBorderSides(sides, defaultAllWhenUnset = false) {
@@ -3226,7 +3235,7 @@ var MinusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx4("svg", {
   })
 });
 function useEngine(engine) {
-  const [state, setState] = useState5(() => engine.getState());
+  const [state, setState] = useState6(() => engine.getState());
   React3.useEffect(() => {
     return engine.onUpdate(() => {
       setState(engine.getState());
@@ -3331,7 +3340,8 @@ function FormulaSheet({
   showFormulas = false,
   ...rest
 }) {
-  const [selectedArea, setSelectedArea] = useState5(null);
+  const schemeRoot = useSchemeRoot();
+  const [selectedArea, setSelectedArea] = useState6(null);
   const clipboardManager = React3.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const state = useEngine(engine);
   const sheet = state.workbooks.get(workbookName)?.sheets.get(sheetName);
@@ -3476,6 +3486,7 @@ function FormulaSheet({
   if (!sheet) {
     return /* @__PURE__ */ jsxs3("div", {
       className: "rsp-root rsp-workbook",
+      ...schemeRoot,
       children: [
         toolbar,
         /* @__PURE__ */ jsx4("div", {
@@ -3486,6 +3497,7 @@ function FormulaSheet({
   }
   return /* @__PURE__ */ jsxs3("div", {
     className: "rsp-root rsp-workbook",
+    ...schemeRoot,
     children: [
       toolbar,
       /* @__PURE__ */ jsx4("div", {
@@ -3717,14 +3729,15 @@ function FormulaWorkbook({
   showFormulas = false,
   ...rest
 }) {
+  const schemeRoot = useSchemeRoot();
   const state = useEngine(engine);
-  const [renamingSheet, setRenamingSheet] = useState5(null);
-  const [newSheetName, setNewSheetName] = useState5("");
-  const [spreadsheetZoom, setSpreadsheetZoom] = useState5(1);
+  const [renamingSheet, setRenamingSheet] = useState6(null);
+  const [newSheetName, setNewSheetName] = useState6("");
+  const [spreadsheetZoom, setSpreadsheetZoom] = useState6(1);
   const renameCommittedRef = useRef4(false);
   const clipboardManager = React3.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const sheetNames = engine.getOrderedSheetNames(workbookName);
-  const [internalActiveSheet, setInternalActiveSheet] = useState5(() => {
+  const [internalActiveSheet, setInternalActiveSheet] = useState6(() => {
     return sheetNames[0] || "";
   });
   const isControlledRef = useRef4(controlledActiveSheet !== undefined);
@@ -3823,6 +3836,7 @@ function FormulaWorkbook({
   };
   return /* @__PURE__ */ jsxs3("div", {
     className: "rsp-root rsp-workbook",
+    ...schemeRoot,
     children: [
       toolbar,
       /* @__PURE__ */ jsxs3("div", {
@@ -4095,4 +4109,4 @@ export {
   useResizeObserver
 };
 
-//# debugId=EDFA14971A4FFD6964756E2164756E21
+//# debugId=93A3B97B45C8788264756E2164756E21