@window-splitter/state 1.1.5--canary.f61d2d9.0 → 1.2.0

package/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@window-splitter/state",
   "sideEffects": false,
-  "version": "1.1.5--canary.f61d2d9.0",
+  "version": "1.2.0",
   "description": "A state machine for a WAI-ARIA compliant window splitter",
   "homepage": "https://react-window-splitter-six.vercel.app",
   "repository": {
@@ -29,7 +29,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@internal/eslint-config": "1.1.5--canary.f61d2d9.0",
+    "@internal/eslint-config": "1.2.0",
     "@testing-library/react": "^16.0.0",
     "@types/big.js": "^6.2.2",
     "@vitest/browser": "catalog:",
@@ -77,5 +77,5 @@
     "window"
   ],
   "types": "./dist/commonjs/index.d.ts",
-  "gitHead": "f61d2d9e76797f8d8a4061be8952e8ad6ca2f7be"
+  "gitHead": "0349b0b301c05e2a1a9b281abe7b93cccc9d9b9b"
 }

package/src/index.ts

@@ -2021,7 +2021,7 @@ export function groupMachine(
     },
   };
 
-  function transition(to: State) {
+  function transition(to: State): boolean {
     // exit
     switch (state.current) {
       case "dragging":
@@ -2031,6 +2031,7 @@ export function groupMachine(
     }
 
     // enter
+    let skipOnUpdate = false;
     switch (to) {
       case "idle":
         actions.onAutosave();
@@ -2041,12 +2042,34 @@ export function groupMachine(
       case "togglingCollapse":
         actions.prepare();
         actions.clearLastKnownSize();
+        // Write post-prepare template to DOM instead of routing through React.
+        // `prepare()` converts % to px (same rendered width) — committing
+        // through React fires a Layout pass before the raf loop starts,
+        // producing a visible hitch on frame 0. Callers propagate the
+        // returned flag into send()'s skipOnUpdate so the trailing onUpdate
+        // there is suppressed too.
+        if (getGroupElement) {
+          const el = getGroupElement();
+          if (el) {
+            const template = buildTemplate(context);
+            if (context.orientation === "horizontal") {
+              el.style.gridTemplateColumns = template;
+            } else {
+              el.style.gridTemplateRows = template;
+            }
+            skipOnUpdate = true;
+          }
+        }
         break;
     }
 
     state.current = to;
 
-    onUpdate?.(context);
+    if (!skipOnUpdate) {
+      onUpdate?.(context);
+    }
+
+    return skipOnUpdate;
   }
 
   function send(event: GroupMachineEvent) {
@@ -2309,7 +2332,7 @@ export function groupMachine(
             const panel = getPanelWithId(context, event.panelId);
 
             if (!panel.collapsed) {
-              transition("togglingCollapse");
+              if (transition("togglingCollapse")) skipOnUpdate = true;
               abortController.abort();
               animationActor(context, event, send, abortController).then(
                 (output) => {
@@ -2332,7 +2355,7 @@ export function groupMachine(
             const panel = getPanelWithId(context, event.panelId);
 
             if (panel.collapsed) {
-              transition("togglingCollapse");
+              if (transition("togglingCollapse")) skipOnUpdate = true;
               abortController.abort();
               animationActor(context, event, send, abortController).then(
                 (output) => {

package/src/machine.test.ts

@@ -627,6 +627,34 @@ describe("constraints", () => {
       document.body.removeChild(groupEl);
     });
 
+    test("collapsePanel does not fire onUpdate when getGroupElement is provided (frame-0 hitch)", async () => {
+      const groupEl = document.createElement("div");
+      groupEl.style.display = "grid";
+      document.body.appendChild(groupEl);
+
+      let updateCount = 0;
+      const actor = setupCollapsibleActor(groupEl, () => {
+        updateCount++;
+      });
+      registerCollapsibleLayout(actor);
+
+      const updatesBeforeCollapse = updateCount;
+
+      actor.send({ type: "collapsePanel", panelId: "panel-2" });
+
+      expect(actor.state.current).toBe("togglingCollapse");
+      // Neither transition() nor send()'s trailing onUpdate should fire —
+      // otherwise React commits + Layout runs before frame 1 of the animation.
+      expect(updateCount).toBe(updatesBeforeCollapse);
+
+      // DOM template must be written synchronously so the animation actor
+      // starts against pixel-form values.
+      expect(groupEl.style.gridTemplateColumns).toBeTruthy();
+
+      await waitForIdle(actor);
+      document.body.removeChild(groupEl);
+    });
+
     test("onUpdate IS called after animation ends (final sync)", async () => {
       const groupEl = document.createElement("div");
       document.body.appendChild(groupEl);