@ricsam/react-spreadsheets 0.0.3 → 0.0.5

package/README.md

@@ -102,8 +102,7 @@ you can override them from **any** ancestor of the grid:
 
 ### Light and dark
 
-Colors resolve through `light-dark()`, which follows the inherited
-`color-scheme`. By default the grid follows the user's OS preference.
+By default the grid follows the user's OS preference.
 
 The grid deliberately does **not** declare `color-scheme` on `.rsp-root`, so a
 pin you set on an ancestor is respected. Pin a subtree with plain CSS:
@@ -119,7 +118,16 @@ or with the bundled helper classes:
 <FormulaWorkbook className="rsp-theme-dark" ... />
 ```
 
-Canvas gridlines and every DOM surface follow the same resolved scheme.
+Canvas gridlines and every DOM surface follow the same resolved scheme. The
+component resolves the inherited `color-scheme` and reflects it on the grid root
+as `data-rsp-scheme`, which drives the `--rsp-light` / `--rsp-dark` token
+switches.
+
+> **Note** — the stylesheet intentionally avoids `light-dark()`. Bundlers that
+> target browsers without native support (Vite's Lightning CSS, for example)
+> lower it to switch variables that only exist next to a `color-scheme`
+> declaration, which makes shared-root tokens compute to an invalid value — in
+> production builds only. An equivalent space-toggle is used instead.
 
 ### Cell fills stay readable
 

package/dist/cjs/lib.cjs

@@ -2722,6 +2722,7 @@ var Spreadsheet = import_react4.forwardRef(({
   }), [selectionManager]);
   return /* @__PURE__ */ jsx_runtime3.jsx("div", {
     className: cn("rsp-root", className),
+    "data-rsp-scheme": colorScheme,
     style: { position: "relative", ...style },
     ...containerProps,
     children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
@@ -2925,7 +2926,15 @@ var Spreadsheet = import_react4.forwardRef(({
 Spreadsheet.displayName = "Spreadsheet";
 // src/workbook/workbook.tsx
 var import_formula_engine2 = require("@ricsam/formula-engine");
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
+
+// src/utils/use-scheme-root.ts
+var import_react5 = require("react");
+function useSchemeRoot() {
+  const [element, setElement] = import_react5.useState(null);
+  const scheme = useColorScheme(element);
+  return { ref: setElement, "data-rsp-scheme": scheme };
+}
 
 // src/workbook/border-sides.ts
 function normalizeBorderSides(sides, defaultAllWhenUnset = false) {
@@ -3331,8 +3340,8 @@ var MinusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx_runtime4.j
   })
 });
 function useEngine(engine) {
-  const [state, setState] = import_react5.useState(() => engine.getState());
-  import_react5.default.useEffect(() => {
+  const [state, setState] = import_react6.useState(() => engine.getState());
+  import_react6.default.useEffect(() => {
     return engine.onUpdate(() => {
       setState(engine.getState());
     });
@@ -3436,11 +3445,12 @@ function FormulaSheet({
   showFormulas = false,
   ...rest
 }) {
-  const [selectedArea, setSelectedArea] = import_react5.useState(null);
-  const clipboardManager = import_react5.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
+  const schemeRoot = useSchemeRoot();
+  const [selectedArea, setSelectedArea] = import_react6.useState(null);
+  const clipboardManager = import_react6.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const state = useEngine(engine);
   const sheet = state.workbooks.get(workbookName)?.sheets.get(sheetName);
-  const onCellDataChange = import_react5.useCallback((updatedSpreadsheet) => {
+  const onCellDataChange = import_react6.useCallback((updatedSpreadsheet) => {
     const data = new Map(updatedSpreadsheet);
     data.forEach((value, key) => {
       if (typeof value === "string") {
@@ -3456,7 +3466,7 @@ function FormulaSheet({
     engine.setSheetContent({ sheetName, workbookName }, data);
   }, [sheetName, engine, workbookName]);
   const passedSelectionEffects = selection?.effects;
-  const selectionManagerEffects = import_react5.useCallback((spreadsheetSelectionManager) => {
+  const selectionManagerEffects = import_react6.useCallback((spreadsheetSelectionManager) => {
     const convertSmAreaToSpreadsheetRange = (area) => {
       const rowEnd = area.end.row.type === "infinity" ? {
         type: "infinity",
@@ -3581,6 +3591,7 @@ function FormulaSheet({
   if (!sheet) {
     return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
       className: "rsp-root rsp-workbook",
+      ...schemeRoot,
       children: [
         toolbar,
         /* @__PURE__ */ jsx_runtime4.jsx("div", {
@@ -3591,6 +3602,7 @@ function FormulaSheet({
   }
   return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
     className: "rsp-root rsp-workbook",
+    ...schemeRoot,
     children: [
       toolbar,
       /* @__PURE__ */ jsx_runtime4.jsx("div", {
@@ -3822,18 +3834,19 @@ function FormulaWorkbook({
   showFormulas = false,
   ...rest
 }) {
+  const schemeRoot = useSchemeRoot();
   const state = useEngine(engine);
-  const [renamingSheet, setRenamingSheet] = import_react5.useState(null);
-  const [newSheetName, setNewSheetName] = import_react5.useState("");
-  const [spreadsheetZoom, setSpreadsheetZoom] = import_react5.useState(1);
-  const renameCommittedRef = import_react5.useRef(false);
-  const clipboardManager = import_react5.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
+  const [renamingSheet, setRenamingSheet] = import_react6.useState(null);
+  const [newSheetName, setNewSheetName] = import_react6.useState("");
+  const [spreadsheetZoom, setSpreadsheetZoom] = import_react6.useState(1);
+  const renameCommittedRef = import_react6.useRef(false);
+  const clipboardManager = import_react6.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const sheetNames = engine.getOrderedSheetNames(workbookName);
-  const [internalActiveSheet, setInternalActiveSheet] = import_react5.useState(() => {
+  const [internalActiveSheet, setInternalActiveSheet] = import_react6.useState(() => {
     return sheetNames[0] || "";
   });
-  const isControlledRef = import_react5.useRef(controlledActiveSheet !== undefined);
-  import_react5.default.useEffect(() => {
+  const isControlledRef = import_react6.useRef(controlledActiveSheet !== undefined);
+  import_react6.default.useEffect(() => {
     const isCurrentlyControlled = controlledActiveSheet !== undefined;
     if (isControlledRef.current !== isCurrentlyControlled) {
       console.error(`FormulaWorkbook: Component changed from ${isControlledRef.current ? "controlled" : "uncontrolled"} to ${isCurrentlyControlled ? "controlled" : "uncontrolled"} mode. ` + `A component should not switch between controlled and uncontrolled modes. ` + `Decide between using activeSheet and onActiveSheetChange props (controlled) or neither (uncontrolled) for the lifetime of the component.`);
@@ -3841,7 +3854,7 @@ function FormulaWorkbook({
     isControlledRef.current = isCurrentlyControlled;
   }, [controlledActiveSheet]);
   const activeSheet = controlledActiveSheet ?? internalActiveSheet;
-  const handleActiveSheetChange = import_react5.useCallback((sheetName) => {
+  const handleActiveSheetChange = import_react6.useCallback((sheetName) => {
     if (onActiveSheetChange) {
       onActiveSheetChange(sheetName);
     } else {
@@ -3852,16 +3865,16 @@ function FormulaWorkbook({
   const activeSheetSelectedOverlayId = sheetSelectedOverlayIds?.[activeSheet];
   const activeSheetColumnWidths = sheetLayouts?.[activeSheet]?.columnWidths;
   const activeSheetRowHeights = sheetLayouts?.[activeSheet]?.rowHeights;
-  const handleOverlaySelect = import_react5.useCallback((overlayId) => {
+  const handleOverlaySelect = import_react6.useCallback((overlayId) => {
     onOverlaySelect?.(activeSheet, overlayId);
   }, [onOverlaySelect, activeSheet]);
-  const handleOverlayChildrenChange = import_react5.useCallback((children) => {
+  const handleOverlayChildrenChange = import_react6.useCallback((children) => {
     onOverlayChildrenChange?.(activeSheet, children);
   }, [onOverlayChildrenChange, activeSheet]);
-  const handleColumnWidthsChange = import_react5.useCallback((columnWidths) => {
+  const handleColumnWidthsChange = import_react6.useCallback((columnWidths) => {
     onSheetColumnWidthsChange?.(activeSheet, columnWidths);
   }, [activeSheet, onSheetColumnWidthsChange]);
-  const handleRowHeightsChange = import_react5.useCallback((rowHeights) => {
+  const handleRowHeightsChange = import_react6.useCallback((rowHeights) => {
     onSheetRowHeightsChange?.(activeSheet, rowHeights);
   }, [activeSheet, onSheetRowHeightsChange]);
   const addSheet = () => {
@@ -3928,6 +3941,7 @@ function FormulaWorkbook({
   };
   return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
     className: "rsp-root rsp-workbook",
+    ...schemeRoot,
     children: [
       toolbar,
       /* @__PURE__ */ jsx_runtime4.jsxs("div", {
@@ -4133,9 +4147,9 @@ var DEFAULT_ZOOM = 1;
 var MIN_ZOOM = 0.5;
 var MAX_ZOOM = 3;
 // src/utils/use-click-away.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var useClickAway = (ref, callback) => {
-  import_react6.useEffect(() => {
+  import_react7.useEffect(() => {
     const handleClickAway = (event) => {
       if (ref) {
         const away = !ref.contains(event.target);
@@ -4149,4 +4163,4 @@ var useClickAway = (ref, callback) => {
   }, [ref, callback]);
 };
 
-//# debugId=203CB6768D786E8764756E2164756E21
+//# debugId=A383A8C557A8A55164756E2164756E21