@window-splitter/state 1.1.1--canary.9d2f98a.0 → 1.1.2

package/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@window-splitter/state",
   "sideEffects": false,
-  "version": "1.1.1--canary.9d2f98a.0",
+  "version": "1.1.2",
   "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.1--canary.9d2f98a.0",
+    "@internal/eslint-config": "1.1.2",
     "@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": "9d2f98a3d6226018c598018cea829d6412b60cd0"
+  "gitHead": "d9d2440aa94cb486fa4334f69a7e4717926f3192"
 }

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,
@@ -405,6 +415,10 @@ export function prepareSnapshot(snapshot: GroupMachineContextValue) {
       item.collapsedSize.value = new Big(item.collapsedSize.value);
       item.min.value = new Big(item.min.value);
 
+      if (item.default) {
+        item.default.value = new Big(item.default.value);
+      }
+
       if (item.max && item.max !== "1fr") {
         item.max.value = new Big(item.max.value);
       }
@@ -2038,6 +2052,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",
@@ -2075,11 +2096,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, {

package/src/utils.test.ts

@@ -1,4 +1,4 @@
-import { expect, test, describe } from "vitest";
+import { expect, test, describe, assert } from "vitest";
 
 import {
   getUnitPercentageValue,
@@ -6,6 +6,8 @@ import {
   initializePanel,
   getCursor,
   initializePanelHandleData,
+  prepareSnapshot,
+  type Item,
 } from "./index.js";
 import Big from "big.js";
 import { createActor } from "./test-utils.js";
@@ -190,3 +192,28 @@ describe("initializePanelHandleData", () => {
     `);
   });
 });
+
+describe('prepareSnapshot', () => {
+  test('converts sizes to Big', () => {
+    const item: Item = initializePanel({ id: 'panel-1', min: '100px', max: '300px', default: '200px' });
+
+    prepareSnapshot({
+      size: { width: 500, height: 300 },
+      items: [item, initializePanel({ id: 'panel-2', min: '100px' })],
+      groupId: 'group-1',
+      orientation: 'horizontal',
+      dragOvershoot: new Big(0),
+    });
+
+    expect(item.currentValue.value).toBeInstanceOf(Big);
+    expect(item.collapsedSize.value).toBeInstanceOf(Big);
+
+    expect(item.min.value).toBeInstanceOf(Big);
+
+    assert(typeof item.max === 'object');
+    expect(item.max.value).toBeInstanceOf(Big);
+
+    assert(typeof item.default === 'object');
+    expect(item.default.value).toBeInstanceOf(Big);
+  });
+});