@gridsheet/preact-core 3.0.2 → 3.0.4

package/dist/index.js

@@ -2901,6 +2901,7 @@ const safePreventDefault = (e) => {
   }
 };
 const Cell = memo(({ y, x }) => {
+  var _a;
   const rowId = y2r(y);
   const colId = x2c(x);
   const address = `${colId}${rowId}`;
@@ -2926,8 +2927,8 @@ const Cell = memo(({ y, x }) => {
   const editing = editingAddress === address;
   const pointed = choosing.y === y && choosing.x === x;
   const _setEditorRect = useCallback(() => {
-    var _a;
-    const rect = (_a = cellRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    var _a2;
+    const rect = (_a2 = cellRef.current) == null ? void 0 : _a2.getBoundingClientRect();
     if (rect == null) {
       return null;
     }
@@ -3104,8 +3105,8 @@ const Cell = memo(({ y, x }) => {
     [dispatch, x, y]
   );
   const handleErrorTriangleEnter = useCallback(() => {
-    var _a;
-    const rect = (_a = cellRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    var _a2;
+    const rect = (_a2 = cellRef.current) == null ? void 0 : _a2.getBoundingClientRect();
     if (!rect) {
       return;
     }
@@ -3184,7 +3185,7 @@ const Cell = memo(({ y, x }) => {
                 className: "gs-cell-inner",
                 style: {
                   ...cell == null ? void 0 : cell.style,
-                  justifyContent: (cell == null ? void 0 : cell.justifyContent) || "left",
+                  textAlign: ((_a = cell == null ? void 0 : cell.style) == null ? void 0 : _a.textAlign) || (cell == null ? void 0 : cell.justifyContent) || "left",
                   alignItems: (cell == null ? void 0 : cell.alignItems) || "start"
                 },
                 children: [
@@ -3196,7 +3197,18 @@ const Cell = memo(({ y, x }) => {
                       onMouseLeave: handleErrorTriangleLeave
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "gs-cell-rendered", children: rendered })
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "gs-cell-rendered",
+                      style: (cell == null ? void 0 : cell.alignItems) ? {
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: cell.alignItems === "center" ? "center" : cell.alignItems === "end" ? "flex-end" : void 0
+                      } : void 0,
+                      children: rendered
+                    }
+                  )
                 ]
               }
             ),
@@ -3607,7 +3619,6 @@ const HeaderCellTop = memo(({ x }) => {
                     dispatch(setColumnMenu({ x, position: { y: rect.bottom, x: rect.left } }));
                   }
                 },
-                title: "Sort & Filter",
                 children: "⋮"
               }
             ),
@@ -3837,7 +3848,6 @@ const HeaderCellLeft = memo(({ y }) => {
                     dispatch(setRowMenu({ y, position: { y: rect.bottom, x: rect.right } }));
                   }
                 },
-                title: "Row menu",
                 children: "⋮"
               }
             ),
@@ -4101,10 +4111,13 @@ const CellStateOverlay = ({ refs = {} }) => {
       return;
     }
     container.addEventListener("scroll", handleScroll);
+    const ro = new ResizeObserver(() => drawCanvas());
+    ro.observe(container);
     return () => {
       container.removeEventListener("scroll", handleScroll);
+      ro.disconnect();
     };
-  }, [tabularRef, handleScroll]);
+  }, [tabularRef, handleScroll, drawCanvas]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4264,8 +4277,9 @@ const Tabular = () => {
         {
           className: "gs-tabular-inner",
           style: {
-            width: sheet.totalWidth + 1,
-            height: sheet.totalHeight + 1
+            width: sheet.totalWidth,
+            height: sheet.totalHeight,
+            overflow: "clip"
           },
           children: [
             /* @__PURE__ */ jsx(CellStateOverlay, { refs: mergedRefs }),
@@ -4291,7 +4305,6 @@ const Tabular = () => {
                         "button",
                         {
                           className: "gs-menu-btn gs-corner-menu-btn",
-                          title: "Menu",
                           onClick: (e) => e.stopPropagation(),
                           onMouseDown: (e) => {
                             e.preventDefault();
@@ -5042,12 +5055,25 @@ function GridSheet({
   const [sheetHeight, setSheetHeight] = useState((options == null ? void 0 : options.sheetHeight) || estimateSheetHeight(initialCells));
   const [sheetWidth, setSheetWidth] = useState((options == null ? void 0 : options.sheetWidth) || estimateSheetWidth(initialCells));
   useEffect(() => {
-    const intervalId = window.setInterval(() => {
-      var _a2, _b2;
-      setSheetHeight(((_a2 = mainRef.current) == null ? void 0 : _a2.clientHeight) || 0);
-      setSheetWidth(((_b2 = mainRef.current) == null ? void 0 : _b2.clientWidth) || 0);
-    }, 1e3);
-    return () => window.clearInterval(intervalId);
+    const el = mainRef.current;
+    if (!el) {
+      return;
+    }
+    let first = true;
+    const ro = new ResizeObserver(() => {
+      if (first) {
+        first = false;
+        return;
+      }
+      if (!options.sheetHeight) {
+        setSheetHeight(el.clientHeight);
+      }
+      if (!options.sheetWidth) {
+        setSheetWidth(el.clientWidth);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
   }, []);
   useEffect(() => {
     if (options.sheetHeight) {
@@ -5083,7 +5109,6 @@ function GridSheet({
               //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,
-              overflow: "auto",
               resize: sheetResize,
               ...style
             },