@window-splitter/state 1.1.1 → 1.1.3

package/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@window-splitter/state",
   "sideEffects": false,
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A state machine for a WAI-ARIA compliant window splitter",
   "homepage": "https://react-window-splitter-six.vercel.app",
   "repository": {
@@ -19,29 +19,21 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "scripts": {
-    "build": "tshy",
-    "dev": "tshy -w",
-    "lint": "eslint .",
-    "test": "vitest",
-    "test:browser": "vitest",
-    "clean": "rm -rf dist .turbo .tshy .tshy-build"
-  },
   "license": "MIT",
   "devDependencies": {
-    "@internal/eslint-config": "1.1.1",
+    "@internal/eslint-config": "1.1.3",
     "@testing-library/react": "^16.0.0",
     "@types/big.js": "^6.2.2",
-    "@vitest/browser": "catalog:",
-    "@vitest/coverage-istanbul": "catalog:",
-    "eslint": "catalog:",
+    "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-istanbul": "^3.1.2",
+    "eslint": "^9.9.0",
     "framer-motion": "^11.3.28",
     "jsdom": "^24.1.1",
-    "playwright": "catalog:",
+    "playwright": "^1.46.0",
     "tiny-cookie": "^2.5.1",
-    "tshy": "catalog:",
-    "typescript": "catalog:",
-    "vitest": "catalog:"
+    "tshy": "^3.0.2",
+    "typescript": "^5.5.4",
+    "vitest": "^3.1.2"
   },
   "dependencies": {
     "big.js": "^6.2.1"
@@ -77,5 +69,13 @@
     "window"
   ],
   "types": "./dist/commonjs/index.d.ts",
-  "gitHead": "a7f123555c7e5ef966007731aba4dfae73cd19a2"
-}
+  "gitHead": "0fae9dff0a45d9423c1327667de042b70774b8bc",
+  "scripts": {
+    "build": "tshy",
+    "dev": "tshy -w",
+    "lint": "eslint .",
+    "test": "vitest",
+    "test:browser": "vitest",
+    "clean": "rm -rf dist .turbo .tshy .tshy-build"
+  }
+}

package/src/index.ts

@@ -290,6 +290,15 @@ interface ExpandPanelEvent extends ControlledCollapseToggle {
   resolve?: () => void;
 }
 
+interface UpdateItemIndexEvent {
+  /** Update the index of a panel */
+  type: "updateItemIndex";
+  /** The panel to update */
+  itemId: string;
+  /** The new index of the panel */
+  index: number;
+}
+
 interface SetPanelPixelSizeEvent {
   /**
    * This event is used by the imperative panel API.
@@ -354,7 +363,8 @@ export type GroupMachineEvent =
   | RebindPanelCallbacksEvent
   | UpdateConstraintsEvent
   | LockGroupEvent
-  | UnlockGroupEvent;
+  | UnlockGroupEvent
+  | UpdateItemIndexEvent;
 
 type EventForType<T extends GroupMachineEvent["type"]> = Extract<
   GroupMachineEvent,
@@ -1175,7 +1185,11 @@ function updateLayout(
 ): Partial<GroupMachineContextValue> {
   const handleIndex = getPanelHandleIndex(context, dragEvent.handleId);
   const handle = context.items[handleIndex] as PanelHandleData;
-  const newItems = [...context.items];
+  // Check if items need to be prepared (have non-pixel values)
+  const needsPrepare = context.items.some(
+    (item) => isPanelData(item) && item.currentValue.type !== "pixel"
+  );
+  const newItems = needsPrepare ? prepareItems(context) : [...context.items];
 
   let moveAmount =
     context.orientation === "horizontal"
@@ -2042,6 +2056,13 @@ export function groupMachine(
     }
 
     switch (event.type) {
+      case "updateItemIndex":
+        context.items = sortWithOrder(
+          context.items.map((item) =>
+            item.id === event.itemId ? { ...item, order: event.index } : item
+          )
+        );
+        break;
       case "registerPanel":
         context.items = addDeDuplicatedItems(context.items, {
           type: "panel",
@@ -2079,11 +2100,20 @@ export function groupMachine(
           event.data.collapsed &&
           event.data.collapsedSize
         ) {
-          currentValue = event.data.collapsedSize;
+          currentValue = {
+            type: "pixel",
+            value: getUnitPixelValue(context, event.data.collapsedSize),
+          };
         } else if (event.data.default) {
-          currentValue = event.data.default;
+          currentValue = {
+            type: "pixel",
+            value: getUnitPixelValue(context, event.data.default),
+          };
         } else {
-          currentValue = event.data.min;
+          currentValue = {
+            type: "pixel",
+            value: getUnitPixelValue(context, event.data.min),
+          };
         }
 
         const newItems = addDeDuplicatedItems(context.items, {
@@ -2231,7 +2261,7 @@ export function groupMachine(
             panel,
             getUnitPixelValue(context, parseUnit(event.size))
           );
-          const isBigger = newSize > current;
+          const isBigger = newSize.gt(current);
           const delta = isBigger
             ? newSize.minus(current)
             : current.minus(newSize);

package/src/machine.test.ts

@@ -13,9 +13,11 @@ import {
   GroupMachineEvent,
   initializePanel,
   initializePanelHandleData,
+  isPanelData,
   isPanelHandle,
   prepareSnapshot,
 } from "./index.js";
+import Big from "big.js";
 import { spring } from "framer-motion";
 import * as Cookies from "tiny-cookie";
 import { Actor, createActor } from "./test-utils.js";
@@ -464,6 +466,77 @@ describe("constraints", () => {
     });
   });
 
+  // Test for https://github.com/hipstersmoothie/window-splitter/issues/79
+  // The bug: applyDelta in togglingCollapse state calls updateLayout without 
+  // ensuring items are in pixel format first. If items somehow end up in 
+  // percentage format during the animation, it fails.
+  test("applyDelta should handle percentage format items during animation", async () => {
+    const actor = createActor({ groupId: "group" });
+
+    sendAll(actor, [
+      { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
+      {
+        type: "registerPanelHandle",
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+      },
+      {
+        type: "registerPanel",
+        data: initializePanel({
+          id: "panel-2",
+          collapsible: true,
+          min: "100px",
+          default: "200px",
+          collapseAnimation: {
+            easing: "ease-in-out",
+            duration: 5000, // Long animation so we can intercept
+          },
+        }),
+      },
+    ]);
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    // Start the collapse animation - this transitions to togglingCollapse
+    actor.send({
+      type: "collapsePanel",
+      panelId: "panel-2",
+    });
+
+    // Wait a tick for the animation to start
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Verify we're in togglingCollapse state
+    expect(actor.state.current).toBe("togglingCollapse");
+
+    // Now simulate a scenario where items got back into percentage format
+    // (e.g., from autosave restoration or some edge case)
+    const groupSize = 500;
+    const staticWidth = 10;
+    const availableSpace = groupSize - staticWidth;
+    
+    for (const item of actor.value.items) {
+      if (isPanelData(item) && !item.collapsed) {
+        const pixelValue = item.currentValue.value.toNumber();
+        item.currentValue = {
+          type: "percent",
+          value: new Big(pixelValue).div(availableSpace),
+        };
+      }
+    }
+
+    // Send an applyDelta event - this is what the animation actor sends
+    // Before the fix, this should throw because updateLayout is called
+    // with percentage items
+    actor.send({
+      type: "applyDelta",
+      handleId: "resizer-1",
+      panelId: "panel-2",
+      delta: 10,
+    });
+
+    await waitForIdle(actor);
+  });
+
   test("supports 1 panel being collapsed with another panel expanding to fill", () => {
     const actor = createActor({
       groupId: "group",