@window-splitter/state 0.3.1 → 0.3.2

package/src/index.ts

@@ -498,7 +498,7 @@ export function parseUnit(unit: Unit | "1fr"): ParsedUnit {
   }
 
   if (unit.endsWith("%")) {
-    return makePercentUnit(parseFloat(unit));
+    return makePercentUnit(parseFloat(unit) / 100);
   }
 
   throw new Error(`Invalid unit: ${unit}`);
@@ -527,7 +527,7 @@ function getUnitPixelValue(
   const parsed = unit === "1fr" ? parseUnit(unit) : unit;
   return parsed.type === "pixel"
     ? parsed.value
-    : new Big(parsed.value).div(100).mul(getGroupSize(context));
+    : parsed.value.mul(getGroupSize(context));
 }
 
 /** Clamp a new `currentValue` given the panel's constraints. */
@@ -743,7 +743,7 @@ function formatUnit(unit: ParsedUnit): Unit {
     return `${unit.value.toNumber()}px`;
   }
 
-  return `${unit.value.toNumber()}%`;
+  return `${unit.value.mul(100).toNumber()}%`;
 }
 
 export function getPanelGroupPixelSizes(context: GroupMachineContextValue) {
@@ -812,11 +812,28 @@ export function buildTemplate(context: GroupMachineContextValue) {
         } else if (item.collapsible && item.collapsed) {
           return formatUnit(item.collapsedSize);
         } else if (item.default) {
-          return formatUnit(item.default);
-        }
+          const siblingHasFill = context.items.some(
+            (i) =>
+              isPanelData(i) &&
+              i.id !== item.id &&
+              !i.collapsed &&
+              (i.max === "1fr" ||
+                (i.max.type === "percent" && i.max.value.eq(100)))
+          );
+
+          // If a sibling has a fill, this item doesn't need to expand
+          // So we can just use the default value
+          if (siblingHasFill) {
+            return formatUnit(item.default);
+          }
 
-        const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
-        return `minmax(${min}, ${max})`;
+          // Use 1fr so that panel fills ths space if needed
+          const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
+          return `minmax(${formatUnit(item.default)}, ${max})`;
+        } else {
+          const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
+          return `minmax(${min}, ${max})`;
+        }
       }
 
       return formatUnit(item.size);
@@ -1421,7 +1438,7 @@ export const groupMachine = createMachine(
     states: {
       idle: {
         on: {
-          setActualItemsSize: { actions: ["recordActualItemSize"] },
+          setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
           dragHandleStart: { target: "dragging" },
           setPanelPixelSize: {
             actions: [
@@ -1741,12 +1758,15 @@ export const groupMachine = createMachine(
       onResize: ({ context }) => {
         for (const item of context.items) {
           if (isPanelData(item)) {
+            const pixel = clampUnit(
+              context,
+              item,
+              getUnitPixelValue(context, item.currentValue)
+            );
+
             item.onResize?.current?.({
-              pixel: getUnitPixelValue(context, item.currentValue).toNumber(),
-              percentage: getUnitPercentageValue(
-                getGroupSize(context),
-                item.currentValue
-              ),
+              pixel: pixel.toNumber(),
+              percentage: pixel.div(getGroupSize(context)).toNumber(),
             });
           }
         }

package/src/machine.test.ts

@@ -372,7 +372,12 @@ describe("constraints", () => {
         ],
       },
     }).start();
+
     initializeSizes(actor, { width: 500, height: 200 });
+    expect(spy).toHaveBeenCalledWith({
+      percentage: 0.5,
+      pixel: 250,
+    });
 
     capturePixelValues(actor, () => {
       dragHandle(actor, { id: "resizer-1", delta: 100 });
@@ -464,7 +469,7 @@ describe("constraints", () => {
     }).start();
 
     expect(getTemplate(actor)).toMatchInlineSnapshot(
-      `"minmax(0px, 90%) 10px 30%"`
+      `"minmax(0px, 90%) 10px minmax(30%, 1fr)"`
     );
     initializeSizes(actor, { width: 500, height: 200 });
 
@@ -474,6 +479,29 @@ describe("constraints", () => {
     });
   });
 
+  test("supports 1 panel being collapsed with another panel expanding to fill", () => {
+    const actor = createActor(groupMachine, {
+      input: {
+        groupId: "group",
+        initialItems: [
+          initializePanel({ id: "panel-1", default: "200px", min: "200px" }),
+          initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+          initializePanel({
+            id: "panel-2",
+            min: "200px",
+            collapsible: true,
+            collapsedSize: "60px",
+            defaultCollapsed: true,
+          }),
+        ],
+      },
+    }).start();
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"minmax(200px, 1fr) 10px 60px"`
+    );
+  });
+
   test("panel can have a min", () => {
     const actor = createActor(groupMachine, {
       input: { groupId: "group" },
@@ -727,7 +755,7 @@ describe("collapsible panel", () => {
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toBe("490px 10px 0px");
 
-      // Stays oollapsed in the buffer
+      // Stays collapsed in the buffer
       dragHandle(actor, { id: "resizer-1", delta: -30 });
       expect(getTemplate(actor)).toBe("490px 10px 0px");