@gridsheet/preact-core 3.1.0 → 3.2.0

package/dist/components/StoreObserver.d.ts

@@ -3,6 +3,8 @@ import { OptionsType, SheetHandle, StoreHandle } from '../types';
 type StoreObserverProps = Omit<OptionsType, 'sheetHeight' | 'sheetWidth'> & {
     sheetHeight?: number;
     sheetWidth?: number;
+    fixedWidth?: boolean;
+    fixedHeight?: boolean;
     sheetName?: string;
     sheetRef?: MutableRefObject<SheetHandle | null>;
     storeRef?: MutableRefObject<StoreHandle | null>;

package/dist/index.js

@@ -1491,6 +1491,8 @@ const StoreObserver = ({
   sheetName,
   sheetHeight,
   sheetWidth,
+  fixedWidth,
+  fixedHeight,
   sheetRef,
   storeRef,
   editingOnEnter,
@@ -1546,6 +1548,9 @@ const StoreObserver = ({
       dispatch(setStore({ sheetWidth }));
     }
   }, [sheetWidth]);
+  useEffect(() => {
+    dispatch(setStore({ fixedWidth: !!fixedWidth, fixedHeight: !!fixedHeight }));
+  }, [fixedWidth, fixedHeight]);
   useEffect(() => {
     if (typeof editingOnEnter !== "undefined") {
       dispatch(setStore({ editingOnEnter }));
@@ -3401,7 +3406,9 @@ function ScrollHandle({ style, horizontal = 0, vertical = 0, className = "" }) {
   useEffect(() => {
     return stopScroll;
   }, [stopScroll]);
-  if (!editorRef.current || !dragging && !autofillDraggingTo) {
+  const t = tabularRef.current;
+  const cannotScrollHere = !!t && (horizontal > 0 && t.scrollLeft + t.clientWidth >= t.scrollWidth - 1 || horizontal < 0 && t.scrollLeft <= 0 || vertical > 0 && t.scrollTop + t.clientHeight >= t.scrollHeight - 1 || vertical < 0 && t.scrollTop <= 0);
+  if (!editorRef.current || !dragging && !autofillDraggingTo || cannotScrollHere) {
     return /* @__PURE__ */ jsx("div", { className: `gs-scroll-handle gs-hidden ${className}` });
   }
   return /* @__PURE__ */ jsx(
@@ -4176,6 +4183,8 @@ const Tabular = () => {
     mainRef,
     sheetWidth,
     sheetHeight,
+    fixedWidth,
+    fixedHeight,
     inputting,
     leftHeaderSelecting,
     topHeaderSelecting,
@@ -4183,6 +4192,24 @@ const Tabular = () => {
   } = store;
   const sheet = sheetReactive.current;
   const [virtualized, setVirtualized] = useState(null);
+  useEffect(() => {
+    const t = tabularRef.current;
+    const m = mainRef.current;
+    if (!t || !m) {
+      return;
+    }
+    const raf = requestAnimationFrame(() => {
+      const ox = String(t.scrollWidth > t.clientWidth + 1);
+      const oy = String(t.scrollHeight > t.clientHeight + 1);
+      if (m.getAttribute("data-overflow-x") !== ox) {
+        m.setAttribute("data-overflow-x", ox);
+      }
+      if (m.getAttribute("data-overflow-y") !== oy) {
+        m.setAttribute("data-overflow-y", oy);
+      }
+    });
+    return () => cancelAnimationFrame(raf);
+  });
   const handleMouseMove = useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -4298,8 +4325,10 @@ const Tabular = () => {
     {
       className: "gs-tabular",
       style: {
-        width: sheetWidth === -1 ? void 0 : Math.min(sheetWidth, sheet.totalWidth),
-        height: sheetHeight === -1 ? void 0 : Math.min(sheetHeight, sheet.totalHeight)
+        // When a size is explicitly configured, keep that box so a smaller grid can be
+        // centered within it (see .gs-tabular in tabular.less); otherwise shrink to fit.
+        width: sheetWidth === -1 ? void 0 : fixedWidth ? sheetWidth : Math.min(sheetWidth, sheet.totalWidth),
+        height: sheetHeight === -1 ? void 0 : fixedHeight ? sheetHeight : Math.min(sheetHeight, sheet.totalHeight)
       },
       ref: tabularRef,
       onMouseMove: handleMouseMove,
@@ -4666,7 +4695,7 @@ const FormulaBar = ({ ready }) => {
   if (!sheet) {
     return /* @__PURE__ */ jsxs("label", { className: "gs-formula-bar gs-hidden", style, children: [
       /* @__PURE__ */ jsx("div", { className: "gs-selecting-address" }),
-      /* @__PURE__ */ jsx("div", { className: "gs-fx", children: "Fx" }),
+      /* @__PURE__ */ jsx("div", { className: "gs-fx", children: "fx" }),
       /* @__PURE__ */ jsx("div", { className: "gs-formula-bar-editor-inner", children: /* @__PURE__ */ jsx("textarea", {}) })
     ] });
   }
@@ -4719,7 +4748,7 @@ const FormulaBar = ({ ready }) => {
       children: [
         /* @__PURE__ */ jsx(ScrollHandle, { style: { position: "absolute", left: 0, top: 0, zIndex: 2 }, vertical: -1 }),
         /* @__PURE__ */ jsx("div", { className: "gs-selecting-address", children: originAddress != null ? originAddress : address }),
-        /* @__PURE__ */ jsx("div", { className: "gs-fx", children: "Fx" }),
+        /* @__PURE__ */ jsx("div", { className: "gs-fx", children: "fx" }),
         /* @__PURE__ */ jsxs("div", { className: "gs-formula-bar-editor-inner", children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -5004,7 +5033,26 @@ function GridSheet({
   book: initialBook
 }) {
   var _a, _b, _c;
-  const { sheetResize, showFormulaBar = true, mode = "light" } = options;
+  const {
+    sheetResize,
+    showFormulaBar = true,
+    mode = "light",
+    density = "compact",
+    gridLines = "all",
+    formulaBarBorders = { all: true },
+    matrixBorders = { all: true }
+  } = options;
+  const bw = (b, side) => b[side] ?? b.all ?? false ? "1px" : "0";
+  const borderVars = {
+    "--gs-fb-bl": bw(formulaBarBorders, "left"),
+    "--gs-fb-bt": bw(formulaBarBorders, "top"),
+    "--gs-fb-br": bw(formulaBarBorders, "right"),
+    "--gs-fb-bb": bw(formulaBarBorders, "bottom"),
+    "--gs-mx-bl": bw(matrixBorders, "left"),
+    "--gs-mx-bt": bw(matrixBorders, "top"),
+    "--gs-mx-br": bw(matrixBorders, "right"),
+    "--gs-mx-bb": bw(matrixBorders, "bottom")
+  };
   const rootRef = useRef(null);
   const flashRef = useRef(null);
   const mainRef = useRef(null);
@@ -5069,6 +5117,8 @@ function GridSheet({
       dragging: false,
       sheetHeight: 0,
       sheetWidth: 0,
+      fixedWidth: false,
+      fixedHeight: false,
       entering: false,
       matchingCells: [],
       matchingCellIndex: 0,
@@ -5098,6 +5148,13 @@ function GridSheet({
   }, []);
   const fillWidth = typeof options.sheetWidth === "string";
   const fillHeight = typeof options.sheetHeight === "string";
+  const matrixAlignment = options.matrixAlignment ?? "none";
+  const centersWidth = matrixAlignment === "horizontal" || matrixAlignment === "both";
+  const centersHeight = matrixAlignment === "vertical" || matrixAlignment === "both";
+  const [resizedWidth, setResizedWidth] = useState(false);
+  const [resizedHeight, setResizedHeight] = useState(false);
+  const fixedWidth = centersWidth && (options.sheetWidth != null || resizedWidth);
+  const fixedHeight = centersHeight && (options.sheetHeight != null || resizedHeight);
   const [sheetHeight, setSheetHeight] = useState(
     typeof (options == null ? void 0 : options.sheetHeight) === "number" ? options.sheetHeight : estimateSheetHeight(initialCells)
   );
@@ -5111,6 +5168,12 @@ function GridSheet({
     }
     let first = true;
     const ro = new ResizeObserver(() => {
+      if (el.style.width) {
+        setResizedWidth(true);
+      }
+      if (el.style.height) {
+        setResizedHeight(true);
+      }
       if (first) {
         first = false;
         if (!fillWidth && !fillHeight) {
@@ -5160,15 +5223,19 @@ function GridSheet({
       ref: rootRef,
       "data-sheet-name": sheetName,
       "data-mode": mode,
+      "data-density": density,
+      "data-gridlines": gridLines,
+      "data-matrix-align": matrixAlignment,
       "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 ? {
+        ...borderVars,
         // 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,
+      } : borderVars,
       children: [
         /* @__PURE__ */ jsx("div", { className: "gs-flash-overlay", ref: flashRef }),
         /* @__PURE__ */ jsx(ScrollHandle, { style: { position: "fixed", top: 0, left: 0 } }),
@@ -5194,7 +5261,12 @@ function GridSheet({
             children: [
               /* @__PURE__ */ jsx(Editor, { mode }),
               /* @__PURE__ */ jsx(Tabular, {}),
-              /* @__PURE__ */ jsx(StoreObserver, { ...{ ...options, sheetHeight, sheetWidth, sheetName, sheetRef, storeRef } }),
+              /* @__PURE__ */ jsx(
+                StoreObserver,
+                {
+                  ...{ ...options, sheetHeight, sheetWidth, fixedWidth, fixedHeight, sheetName, sheetRef, storeRef }
+                }
+              ),
               /* @__PURE__ */ jsx(ContextMenu, {}),
               /* @__PURE__ */ jsx(ColumnMenu, {}),
               /* @__PURE__ */ jsx(RowMenu, {}),