feat: split gridSize from enabled state & support custom gridStep (#8364)

packages/excalidraw/tests/excalidraw.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { fireEvent, GlobalTestState, toggleMenu, render } from "./test-utils";
 import { Excalidraw, Footer, MainMenu } from "../index";
 import { queryByText, queryByTestId } from "@testing-library/react";
-import { GRID_SIZE, THEME } from "../constants";
+import { THEME } from "../constants";
 import { t } from "../i18n";
 import { useMemo } from "react";
 
@@ -91,7 +91,7 @@ describe("<Excalidraw/>", () => {
   describe("Test gridModeEnabled prop", () => {
     it('should show grid mode in context menu when gridModeEnabled is "undefined"', async () => {
       const { container } = await render(<Excalidraw />);
-      expect(h.state.gridSize).toBe(null);
+      expect(h.state.gridModeEnabled).toBe(false);
 
       expect(
         container.getElementsByClassName("disable-zen-mode--visible").length,
@@ -103,14 +103,14 @@ describe("<Excalidraw/>", () => {
       });
       const contextMenu = document.querySelector(".context-menu");
       fireEvent.click(queryByText(contextMenu as HTMLElement, "Toggle grid")!);
-      expect(h.state.gridSize).toBe(GRID_SIZE);
+      expect(h.state.gridModeEnabled).toBe(true);
     });
 
     it('should not show grid mode in context menu when gridModeEnabled is not "undefined"', async () => {
       const { container } = await render(
         <Excalidraw gridModeEnabled={false} />,
       );
-      expect(h.state.gridSize).toBe(null);
+      expect(h.state.gridModeEnabled).toBe(false);
 
       expect(
         container.getElementsByClassName("disable-zen-mode--visible").length,
@@ -122,7 +122,7 @@ describe("<Excalidraw/>", () => {
       });
       const contextMenu = document.querySelector(".context-menu");
       expect(queryByText(contextMenu as HTMLElement, "Show grid")).toBe(null);
-      expect(h.state.gridSize).toBe(null);
+      expect(h.state.gridModeEnabled).toBe(false);
     });
   });