@window-splitter/state 0.6.4 → 0.7.0

package/src/index.ts

@@ -25,7 +25,7 @@ export interface ParsedPixelUnit {
   value: Big.Big;
 }
 
-type ParsedUnit = ParsedPercentUnit | ParsedPixelUnit;
+export type ParsedUnit = ParsedPercentUnit | ParsedPixelUnit;
 
 export function makePercentUnit(value: number): ParsedPercentUnit {
   return { type: "percent", value: new Big(value) };
@@ -205,7 +205,7 @@ export type InitializePanelHandleData = Omit<
 interface RegisterPanelHandleEvent {
   /** Register a new panel handle with the state machine */
   type: "registerPanelHandle";
-  data: InitializePanelHandleData;
+  data: PanelHandleData;
 }
 
 interface UnregisterPanelHandleEvent {
@@ -849,7 +849,7 @@ function getStaticWidth(context: GroupMachineContextValue) {
   return width;
 }
 
-function formatUnit(unit: ParsedUnit): Unit {
+export function formatUnit(unit: ParsedUnit): Unit {
   if (unit.type === "pixel") {
     return `${unit.value.toNumber()}px`;
   }
@@ -1685,7 +1685,7 @@ export function groupMachine(
   let locked = false;
 
   const context: GroupMachineContextValue = {
-    size: { width: 0, height: 0 },
+    size: input.size || { width: 0, height: 0 },
     items: input.items || [],
     orientation: input.orientation || "horizontal",
     dragOvershoot: new Big(0),
@@ -1776,11 +1776,15 @@ export function groupMachine(
         event.type === "collapsePanel"
           ? handle.direction * -1
           : handle.direction;
+
       const newContext = updateLayout(context, {
         handleId: handle.item.id,
         type: "dragHandle",
         controlled: event.controlled,
-        value: dragHandlePayload({ delta, orientation: context.orientation }),
+        value: dragHandlePayload({
+          delta: delta,
+          orientation: context.orientation,
+        }),
       });
 
       assign(context, newContext);
@@ -1903,19 +1907,7 @@ export function groupMachine(
         actions.onAutosave();
         break;
       case "registerPanelHandle": {
-        const unit =
-          typeof event.data.size === "string"
-            ? parseUnit(event.data.size)
-            : event.data.size;
-
-        context.items = addDeDuplicatedItems(context.items, {
-          type: "handle",
-          ...event.data,
-          size: {
-            type: "pixel",
-            value: new Big(unit.value),
-          },
-        });
+        context.items = addDeDuplicatedItems(context.items, event.data);
         break;
       }
       case "unregisterPanelHandle":
@@ -2109,23 +2101,29 @@ export function groupMachine(
           if (guards.shouldNotifyCollapseToggle(event)) {
             actions.notifyCollapseToggle(event);
           } else {
-            transition("togglingCollapse");
-            abortController.abort();
-            animationActor(context, event, send, abortController).then(
-              (output) => {
-                actions.onAnimationEnd(output);
-                transition("idle");
-              }
-            );
+            const panel = getPanelWithId(context, event.panelId);
+
+            if (!panel.collapsed) {
+              transition("togglingCollapse");
+              abortController.abort();
+              animationActor(context, event, send, abortController).then(
+                (output) => {
+                  actions.onAnimationEnd(output);
+                  transition("idle");
+                }
+              );
+            }
           }
           break;
         case "expandPanel":
           if (guards.cannotExpandPanel(event)) {
             break;
+          } else if (guards.shouldNotifyCollapseToggle(event)) {
+            actions.notifyCollapseToggle(event);
           } else {
-            if (guards.shouldNotifyCollapseToggle(event)) {
-              actions.notifyCollapseToggle(event);
-            } else {
+            const panel = getPanelWithId(context, event.panelId);
+
+            if (panel.collapsed) {
               transition("togglingCollapse");
               abortController.abort();
               animationActor(context, event, send, abortController).then(

package/src/machine.test.ts

@@ -17,7 +17,6 @@ import {
   prepareSnapshot,
 } from "./index.js";
 import { spring } from "framer-motion";
-import Big from "big.js";
 import * as Cookies from "tiny-cookie";
 import { Actor, createActor } from "./test-utils.js";
 
@@ -135,7 +134,7 @@ describe("constraints", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
     ]);
@@ -186,8 +185,7 @@ describe("constraints", () => {
       },
       {
         type: "registerPanelHandle",
-        // @ts-expect-error The types were hard and i wanted to keep the public API simple
-        data: { id: "resizer-1", size: { type: "pixel", value: new Big(10) } },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
     ]);
@@ -231,8 +229,7 @@ describe("constraints", () => {
       },
       {
         type: "registerPanelHandle",
-        // @ts-expect-error The types were hard and i wanted to keep the public API simple
-        data: { id: "resizer-1", size: { type: "pixel", value: new Big(10) } },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
     ]);
@@ -259,7 +256,7 @@ describe("constraints", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
     ]);
@@ -495,7 +492,7 @@ describe("constraints", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -526,7 +523,7 @@ describe("constraints", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -559,7 +556,7 @@ describe("constraints", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -586,7 +583,7 @@ describe("constraints", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -598,7 +595,7 @@ describe("constraints", () => {
       },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-2", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-2", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -662,7 +659,7 @@ describe("constraints", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
     ]);
@@ -708,7 +705,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -785,7 +782,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -842,7 +839,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -891,7 +888,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -932,7 +929,7 @@ describe("collapsible panel", () => {
       },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
     ]);
@@ -980,7 +977,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1033,7 +1030,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1107,7 +1104,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1150,7 +1147,7 @@ describe("collapsible panel", () => {
     });
   });
 
-  test("panel collapse can be controlled ", async () => {
+  test("panel collapse can be controlled", async () => {
     const actor = createActor({ groupId: "group" });
 
     const spy = vi.fn();
@@ -1159,7 +1156,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1271,7 +1268,7 @@ describe("collapsible panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1354,7 +1351,7 @@ describe("collapsible panel", () => {
         },
         {
           type: "registerPanelHandle",
-          data: { id: "resizer-1", size: "10px" },
+          data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
         },
         {
           type: "registerPanel",
@@ -1385,7 +1382,7 @@ describe("collapsible panel", () => {
         },
         {
           type: "registerPanelHandle",
-          data: { id: "resizer-1", size: "10px" },
+          data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
         },
         {
           type: "registerPanel",
@@ -1427,7 +1424,7 @@ describe("collapsible panel", () => {
         },
         {
           type: "registerPanelHandle",
-          data: { id: "resizer-1", size: "10px" },
+          data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
         },
         {
           type: "registerPanel",
@@ -1471,7 +1468,7 @@ describe("collapsible panel", () => {
         },
         {
           type: "registerPanelHandle",
-          data: { id: "resizer-1", size: "10px" },
+          data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
         },
         {
           type: "registerPanel",
@@ -1513,7 +1510,7 @@ describe("conditional panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
     ]);
@@ -1529,7 +1526,7 @@ describe("conditional panel", () => {
     sendAll(actor, [
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-2", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-2", size: "10px" }),
       },
       {
         type: "registerDynamicPanel",
@@ -1562,7 +1559,7 @@ describe("conditional panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1581,7 +1578,7 @@ describe("conditional panel", () => {
     sendAll(actor, [
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-2", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-2", size: "10px" }),
       },
       {
         type: "registerDynamicPanel",
@@ -1619,7 +1616,7 @@ describe("conditional panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1638,7 +1635,7 @@ describe("conditional panel", () => {
     sendAll(actor, [
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-2", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-2", size: "10px" }),
       },
       {
         type: "registerDynamicPanel",
@@ -1674,7 +1671,7 @@ describe("conditional panel", () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
     ]);
@@ -1690,7 +1687,11 @@ describe("conditional panel", () => {
     sendAll(actor, [
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-2", size: "10px", order: 1 },
+        data: initializePanelHandleData({
+          id: "resizer-2",
+          size: "10px",
+          order: 1,
+        }),
       },
       {
         type: "registerDynamicPanel",
@@ -1832,7 +1833,7 @@ describe("utils", async () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1852,7 +1853,7 @@ describe("utils", async () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1874,7 +1875,7 @@ describe("utils", async () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1894,7 +1895,7 @@ describe("utils", async () => {
       { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",
@@ -1917,7 +1918,7 @@ describe("utils", async () => {
       },
       {
         type: "registerPanelHandle",
-        data: { id: "resizer-1", size: "10px" },
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
       },
       {
         type: "registerPanel",

package/.turbo/turbo-test.log

@@ -1,136 +0,0 @@
-
-
-> @window-splitter/state@0.6.1 test /Users/andrew/Documents/react-window-splitter/packages/state
-> vitest
-
-[?25l Vitest  No browser "instances" were defined. Running tests in "chromium" browser. The "browser.name" field is deprecated since Vitest 3. Read more: https://vitest.dev/guide/browser/config#browser-instances
- Vitest  "providerOptions" is ignored because it's overridden by the configs. To hide this warning, remove the "providerOptions" property from the browser configuration.
-
- DEV  v3.1.2 /Users/andrew/Documents/react-window-splitter/packages/state
-
-[?2026h
- Test Files 0 passed (2)
-      Tests 0 passed (0)
-   Start at 11:25:31
-   Duration 960ms
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts [queued]
-
- Test Files 0 passed (2)
-      Tests 0 passed (0)
-   Start at 11:25:31
-   Duration 1.58s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 0/53
-
- Test Files 0 passed (2)
-      Tests 0 passed (53)
-   Start at 11:25:31
-   Duration 1.78s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 1/53
-
- Test Files 0 passed (2)
-      Tests 1 passed (53)
-   Start at 11:25:31
-   Duration 1.89s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 20/53
-
- Test Files 0 passed (2)
-      Tests 20 passed (53)
-   Start at 11:25:31
-   Duration 2.19s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 21/53
-
- Test Files 0 passed (2)
-      Tests 21 passed (53)
-   Start at 11:25:31
-   Duration 2.49s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 21/53
-
- Test Files 0 passed (2)
-      Tests 21 passed (53)
-   Start at 11:25:31
-   Duration 2.90s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 23/53
-
- Test Files 0 passed (2)
-      Tests 23 passed (53)
-   Start at 11:25:31
-   Duration 3.60s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 24/53
-
- Test Files 0 passed (2)
-      Tests 24 passed (53)
-   Start at 11:25:31
-   Duration 3.70s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 28/53
-
- Test Files 0 passed (2)
-      Tests 28 passed (53)
-   Start at 11:25:31
-   Duration 3.91s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 30/53
-
- Test Files 0 passed (2)
-      Tests 30 passed (53)
-   Start at 11:25:31
-   Duration 4.11s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 32/53
-
- Test Files 0 passed (2)
-      Tests 32 passed (53)
-   Start at 11:25:31
-   Duration 4.41s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 33/53
-
- Test Files 0 passed (2)
-      Tests 33 passed (53)
-   Start at 11:25:31
-   Duration 4.82s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 34/53
-
- Test Files 0 passed (2)
-      Tests 34 passed (53)
-   Start at 11:25:31
-   Duration 4.92s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 37/53
-
- Test Files 0 passed (2)
-      Tests 37 passed (53)
-   Start at 11:25:31
-   Duration 5.02s
-[?2026l[?2026h
- ❯  chromium  src/machine.test.ts 53/53
-
- Test Files 0 passed (2)
-      Tests 53 passed (53)
-   Start at 11:25:31
-   Duration 5.12s
-[?2026l ✓  chromium  src/machine.test.ts (53 tests) 3384ms
-   ✓ collapsible panel > panel can be collapsible: ease-in-out  305ms
-   ✓ collapsible panel > panel can be collapsible: bounce  304ms
-   ✓ collapsible panel > panel can be collapsible: { duration: 500, easing: 'linear' }  511ms
-   ✓ collapsible panel > panel can be collapsible: { duration: 1000, easing: [Function springEasing] }  607ms
-   ✓ collapsible panel > panel collapse can be controlled - event  419ms
- ✓  chromium  src/utils.test.ts (15 tests) 2ms
-
- Test Files  2 passed (2)
-      Tests  68 passed (68)
-   Start at  11:25:31
-   Duration  5.27s (transform 0ms, setup 0ms, collect 121ms, tests 3.39s, environment 0ms, prepare 33ms)
-
- PASS  Waiting for file changes...
-       press h to show help, press q to quit
-[?25h[?25h ELIFECYCLE  Test failed. See above for more details.