@gridsheet/preact-core 3.0.5 → 3.0.7

package/dist/index.js

@@ -4,8 +4,8 @@ import { BaseFunction, BaseFunctionAsync, DEFAULT_HISTORY_LIMIT, FormulaError as
 import { jsxs, jsx, Fragment } from "preact/compat/jsx-runtime";
 import React, { createContext, useRef, useContext, useLayoutEffect, useState, useMemo, useCallback, createPortal, memo, useEffect, createRef, useReducer } from "preact/compat";
 import { Children, Component, Fragment as Fragment2, PureComponent, StrictMode, Suspense, SuspenseList, cloneElement, render as render2, createContext as createContext2, createElement, createFactory, createPortal as createPortal2, createRef as createRef2, findDOMNode, forwardRef, hydrate, isValidElement, lazy, memo as memo2, unmountComponentAtNode, unstable_batchedUpdates, useCallback as useCallback2, useContext as useContext2, useDebugValue, useEffect as useEffect2, useImperativeHandle, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useReducer as useReducer2, useRef as useRef2, useState as useState2, version } from "preact/compat";
-import { u as useBrowser, s as setEditingAddress, w as write, a as setInputting, b as updateSheet, r as redo, c as undo, d as cut, e as setSearchQuery, f as setEntering, g as copy, h as select, i as arrow, j as escape, k as clear, l as walk, p as paste, m as setEditorHovering, n as setStore, o as setResizingPositionY, q as setResizingPositionX, t as filterRows, v as sortRows, x as removeCols, y as removeRows, z as insertColsRight, A as insertColsLeft, B as insertRowsBelow, C as insertRowsAbove, D as setContextMenuPosition, E as setColumnMenu, F as setRowMenu, G as isXSheetFocused, H as setEditorRect, I as choose, J as drag, K as setDragging, L as submitAutofill, M as setAutofillDraggingTo, N as selectCols, O as useDebounceCallback, P as selectRows, Q as search, R as setSearchCaseSensitive, S as setSearchRegex, T as setSearchRange, U as useBook, V as reducer } from "./hooks-DPIr6WaL.mjs";
-import { W } from "./hooks-DPIr6WaL.mjs";
+import { u as useBrowser, s as setEditingAddress, w as write, a as setInputting, b as updateSheet, r as redo, c as undo, d as cut, e as setSearchQuery, f as setEntering, g as copy, h as select, i as arrow, j as escape, k as clear, l as walk, p as paste, m as setEditorHovering, n as setStore, o as setResizingPositionY, q as setResizingPositionX, t as filterRows, v as sortRows, x as removeCols, y as removeRows, z as insertColsRight, A as insertColsLeft, B as insertRowsBelow, C as insertRowsAbove, D as setContextMenuPosition, E as setColumnMenu, F as setRowMenu, G as isXSheetFocused, H as setEditorRect, I as choose, J as drag, K as setDragging, L as submitAutofill, M as setAutofillDraggingTo, N as selectCols, O as useDebounceCallback, P as selectRows, Q as search, R as setSearchCaseSensitive, S as setSearchRegex, T as setSearchRange, U as useBook, V as reducer, W as isMutationAction } from "./hooks-ykrgAwg5.mjs";
+import { X } from "./hooks-ykrgAwg5.mjs";
 const Context = createContext(
   {}
 );
@@ -720,6 +720,7 @@ const Editor = ({ mode }) => {
   const [shiftKey, setShiftKey] = useState(false);
   const [selectionStart, setSelectionStart] = useState(0);
   const [isFocused, setIsFocused] = useState(false);
+  const composingRef = useRef(false);
   const {
     choosing,
     inputting,
@@ -889,6 +890,9 @@ const Editor = ({ mode }) => {
       if (!sheet) {
         return;
       }
+      if (e.nativeEvent.isComposing || composingRef.current) {
+        return;
+      }
       if (isKeyDown) {
         return;
       }
@@ -1367,6 +1371,17 @@ const Editor = ({ mode }) => {
               onPaste: handlePaste,
               onKeyDown: handleKeyDown,
               onKeyUp: handleKeyUpInternal,
+              onCompositionStart: () => {
+                composingRef.current = true;
+                if (!editing) {
+                  dispatch(setEditingAddress(address));
+                  dispatch(setInputting(""));
+                }
+              },
+              onCompositionEnd: (e) => {
+                composingRef.current = false;
+                dispatch(setInputting(e.currentTarget.value));
+              },
               onMouseEnter: () => {
                 dispatch(setEditorHovering(true));
               },
@@ -4082,6 +4097,10 @@ const CellStateOverlay = ({ refs = {} }) => {
     }
   }, [
     sheet,
+    // The Sheet instance is mutated in place, so its identity stays stable across structural
+    // changes (insert/remove rows & cols, resize, sort, filter). Depend on its monotonic version
+    // so the overlay redraws when the grid layout shifts; otherwise the old box stays misaligned.
+    sheet == null ? void 0 : sheet.currentVersion,
     tabularRef,
     choosing,
     selectingZone,
@@ -4246,7 +4265,14 @@ const Tabular = () => {
       return;
     }
     setVirtualized(virtualize(sheet, tabularRef.current));
-  }, [tabularRef.current, sheetReactive, (_a = mainRef.current) == null ? void 0 : _a.clientHeight, (_b = mainRef.current) == null ? void 0 : _b.clientWidth]);
+  }, [
+    tabularRef.current,
+    sheetReactive,
+    (_a = mainRef.current) == null ? void 0 : _a.clientHeight,
+    (_b = mainRef.current) == null ? void 0 : _b.clientWidth,
+    sheetHeight,
+    sheetWidth
+  ]);
   useEffect(() => {
     const el = tabularRef.current;
     if (!el) {
@@ -4266,8 +4292,8 @@ const Tabular = () => {
     {
       className: "gs-tabular",
       style: {
-        width: sheetWidth === -1 ? void 0 : sheetWidth,
-        height: sheetHeight === -1 ? void 0 : sheetHeight
+        width: sheetWidth === -1 ? void 0 : Math.min(sheetWidth, sheet.totalWidth),
+        height: sheetHeight === -1 ? void 0 : Math.min(sheetHeight, sheet.totalHeight)
       },
       ref: tabularRef,
       onMouseMove: handleMouseMove,
@@ -4443,6 +4469,7 @@ const FormulaBar = ({ ready }) => {
     optionsAll,
     functions: sheet == null ? void 0 : sheet.registry.functions
   });
+  const composingRef = useRef(false);
   const largeInput = largeEditorRef.current;
   const handleInput = useCallback((e) => {
     dispatch(setInputting(e.currentTarget.value));
@@ -4485,6 +4512,9 @@ const FormulaBar = ({ ready }) => {
   );
   const handleKeyDown = useCallback(
     (e) => {
+      if (e.nativeEvent.isComposing || composingRef.current) {
+        return;
+      }
       if (e.ctrlKey || !sheet) {
         return true;
       }
@@ -4716,6 +4746,13 @@ const FormulaBar = ({ ready }) => {
               },
               onKeyDown: handleKeyDown,
               onKeyUp: updateScroll,
+              onCompositionStart: () => {
+                composingRef.current = true;
+              },
+              onCompositionEnd: (e) => {
+                composingRef.current = false;
+                dispatch(setInputting(e.currentTarget.value));
+              },
               onScroll: updateScroll,
               onMouseEnter: (e) => {
                 dispatch(setEditorHovering(true));
@@ -4960,7 +4997,7 @@ function GridSheet({
   style,
   book: initialBook
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const { sheetResize, showFormulaBar = true, mode = "light" } = options;
   const rootRef = useRef(null);
   const flashRef = useRef(null);
@@ -5052,8 +5089,14 @@ function GridSheet({
   useEffect(() => {
     embedStyle();
   }, []);
-  const [sheetHeight, setSheetHeight] = useState((options == null ? void 0 : options.sheetHeight) || estimateSheetHeight(initialCells));
-  const [sheetWidth, setSheetWidth] = useState((options == null ? void 0 : options.sheetWidth) || estimateSheetWidth(initialCells));
+  const fillWidth = typeof options.sheetWidth === "string";
+  const fillHeight = typeof options.sheetHeight === "string";
+  const [sheetHeight, setSheetHeight] = useState(
+    typeof (options == null ? void 0 : options.sheetHeight) === "number" ? options.sheetHeight : estimateSheetHeight(initialCells)
+  );
+  const [sheetWidth, setSheetWidth] = useState(
+    typeof (options == null ? void 0 : options.sheetWidth) === "number" ? options.sheetWidth : estimateSheetWidth(initialCells)
+  );
   useEffect(() => {
     const el = mainRef.current;
     if (!el) {
@@ -5063,25 +5106,47 @@ function GridSheet({
     const ro = new ResizeObserver(() => {
       if (first) {
         first = false;
-        return;
+        if (!fillWidth && !fillHeight) {
+          return;
+        }
       }
-      setSheetHeight(options.sheetHeight ? Math.min(options.sheetHeight, el.clientHeight) : el.clientHeight);
-      setSheetWidth(options.sheetWidth ? Math.min(options.sheetWidth, el.clientWidth) : el.clientWidth);
+      const root = rootRef.current;
+      setSheetHeight(root ? Math.min(el.clientHeight, root.clientHeight) : el.clientHeight);
+      setSheetWidth(root ? Math.min(el.clientWidth, root.clientWidth) : el.clientWidth);
     });
     ro.observe(el);
     return () => ro.disconnect();
-  }, []);
+  }, [fillWidth, fillHeight]);
   useEffect(() => {
-    if (options.sheetHeight) {
+    if (typeof options.sheetHeight === "number") {
       setSheetHeight(options.sheetHeight);
     }
   }, [options.sheetHeight]);
   useEffect(() => {
-    if (options.sheetWidth) {
+    if (typeof options.sheetWidth === "number") {
       setSheetWidth(options.sheetWidth);
     }
   }, [options.sheetWidth]);
-  return /* @__PURE__ */ jsx(Context.Provider, { value: { store, dispatch }, children: /* @__PURE__ */ jsxs(
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (loading) {
+      setLoading(false);
+    }
+  });
+  const wrappedDispatch = useCallback(
+    (action) => {
+      if (!isMutationAction(action.type)) {
+        dispatch(action);
+        return;
+      }
+      setLoading(true);
+      requestAnimationFrame(() => {
+        dispatch(action);
+      });
+    },
+    [dispatch]
+  );
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { store, dispatch: wrappedDispatch }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `gs-root1 ${registry.ready ? "gs-initialized" : ""}`,
@@ -5090,6 +5155,13 @@ function GridSheet({
       "data-mode": mode,
       "data-rows": ((_a = store.sheetReactive.current) == null ? void 0 : _a.numRows) ?? 0,
       "data-cols": ((_b = store.sheetReactive.current) == null ? void 0 : _b.numCols) ?? 0,
+      style: fillWidth || fillHeight ? {
+        // inline-flex (when width isn't filled) keeps the prior shrink-to-content width.
+        display: fillWidth ? "flex" : "inline-flex",
+        flexDirection: "column",
+        ...fillWidth ? { width: options.sheetWidth } : null,
+        ...fillHeight ? { height: options.sheetHeight } : null
+      } : void 0,
       children: [
         /* @__PURE__ */ jsx("div", { className: "gs-flash-overlay", ref: flashRef }),
         /* @__PURE__ */ jsx(ScrollHandle, { style: { position: "fixed", top: 0, left: 0 } }),
@@ -5102,9 +5174,13 @@ function GridSheet({
             className: `gs-main ${className || ""}`,
             ref: mainRef,
             style: {
-              //width: '100%',
-              maxWidth: (((_c = store.sheetReactive.current) == null ? void 0 : _c.totalWidth) || 0) + 2,
-              maxHeight: (((_d = store.sheetReactive.current) == null ? void 0 : _d.fullHeight) || 0) + 2,
+              ...fillWidth ? { width: "100%" } : null,
+              maxWidth: "100%",
+              // In fill-height mode the parent's height is the limit (flex:1 fills the remaining
+              // space below the formula bar); otherwise cap at the viewport bottom as before.
+              ...fillHeight ? { flex: 1, minHeight: 0, maxHeight: "100%" } : {
+                maxHeight: mainRef.current ? window.innerHeight - mainRef.current.getBoundingClientRect().top : (((_c = store.sheetReactive.current) == null ? void 0 : _c.fullHeight) || 0) + 2
+              },
               resize: sheetResize,
               ...style
             },
@@ -5116,7 +5192,8 @@ function GridSheet({
               /* @__PURE__ */ jsx(ColumnMenu, {}),
               /* @__PURE__ */ jsx(RowMenu, {}),
               /* @__PURE__ */ jsx(Resizer, {}),
-              /* @__PURE__ */ jsx(Emitter, {})
+              /* @__PURE__ */ jsx(Emitter, {}),
+              loading && /* @__PURE__ */ jsx("div", { className: "gs-loading-overlay", children: /* @__PURE__ */ jsx("div", { className: "gs-loading-spinner" }) })
             ]
           }
         )
@@ -5295,7 +5372,7 @@ export {
   useSheetRef,
   useState2 as useState,
   useStoreRef,
-  W as userActions,
+  X as userActions,
   version,
   x2c2 as x2c,
   y2r2 as y2r,