@window-splitter/state 0.5.8 → 0.6.1

package/dist/commonjs/index.js

@@ -1,32 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.groupMachine = void 0;
 exports.makePercentUnit = makePercentUnit;
 exports.makePixelUnit = makePixelUnit;
 exports.getCursor = getCursor;
@@ -49,9 +25,8 @@ exports.getPanelPercentageSize = getPanelPercentageSize;
 exports.buildTemplate = buildTemplate;
 exports.prepareItems = prepareItems;
 exports.dragHandlePayload = dragHandlePayload;
-const Cookies = __importStar(require("tiny-cookie"));
+exports.groupMachine = groupMachine;
 const rafz_1 = require("@react-spring/rafz");
-const xstate_1 = require("xstate");
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const big_js_1 = __importDefault(require("big.js"));
 // #region Constants
@@ -122,9 +97,15 @@ function getCursor(context) {
     }
 }
 function prepareSnapshot(snapshot) {
-    const snapshotContext = snapshot.context;
-    snapshotContext.dragOvershoot = new big_js_1.default(snapshotContext.dragOvershoot);
-    for (const item of snapshotContext.items) {
+    // convert from old format
+    if ("context" in snapshot) {
+        snapshot = snapshot.context;
+    }
+    if (!("items" in snapshot)) {
+        return;
+    }
+    snapshot.dragOvershoot = new big_js_1.default(snapshot.dragOvershoot || 0);
+    for (const item of snapshot.items) {
         if (isPanelData(item)) {
             item.currentValue.value = new big_js_1.default(item.currentValue.value);
             item.collapsedSize.value = new big_js_1.default(item.collapsedSize.value);
@@ -888,6 +869,9 @@ function handleOverflow(context) {
 function clearLastKnownSize(items) {
     return items.map((i) => ({ ...i, lastKnownSize: undefined }));
 }
+function setCookie(name, jsonData) {
+    document.cookie = `${name}=${encodeURIComponent(`${jsonData}`)};path=/;max-age=31536000`;
+}
 function getDeltaForEvent(context, event) {
     const panel = getPanelWithId(context, event.panelId);
     if (event.type === "expandPanel") {
@@ -896,193 +880,168 @@ function getDeltaForEvent(context, event) {
     const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
     return panel.currentValue.value.minus(collapsedSize);
 }
-const animationActor = (0, xstate_1.fromPromise)(({ input: { send, context, event } }) => new Promise((resolve) => {
+function animationActor(context, event, send, abortController) {
     const panel = getPanelWithId(context, event.panelId);
     const handle = getHandleForPanelId(context, event.panelId);
     let direction = new big_js_1.default(handle.direction);
     const fullDelta = getDeltaForEvent(context, event);
-    if (event.type === "collapsePanel") {
-        panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
-        direction = direction.mul(new big_js_1.default(-1));
-    }
-    const fps = 60;
-    const { duration, ease } = getCollapseAnimation(panel);
-    const totalFrames = Math.ceil(panel.collapseAnimation ? duration / (1000 / fps) : 1);
-    let frame = 0;
-    let appliedDelta = new big_js_1.default(0);
-    function renderFrame() {
-        const progress = ++frame / totalFrames;
-        const e = new big_js_1.default(panel.collapseAnimation ? ease(progress) : 1);
-        const delta = e.mul(fullDelta).sub(appliedDelta).mul(direction);
-        send({
-            type: "applyDelta",
-            handleId: handle.item.id,
-            delta: delta.toNumber(),
+    return new Promise((resolve, reject) => {
+        abortController.signal.addEventListener("abort", () => {
+            reject(new Error("Operation was canceled"));
         });
-        appliedDelta = appliedDelta.add(delta
-            .abs()
-            .mul((delta.gt(0) && direction.lt(0)) ||
-            (delta.lt(0) && direction.gt(0))
-            ? -1
-            : 1));
-        if (e.eq(1)) {
-            const action = event.type === "expandPanel" ? "expand" : "collapse";
-            resolve({ panelId: panel.id, action });
-            return false;
+        if (event.type === "collapsePanel") {
+            panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
+            direction = direction.mul(new big_js_1.default(-1));
         }
-        return true;
+        const fps = 60;
+        const { duration, ease } = getCollapseAnimation(panel);
+        const totalFrames = Math.ceil(panel.collapseAnimation ? duration / (1000 / fps) : 1);
+        let frame = 0;
+        let appliedDelta = new big_js_1.default(0);
+        function renderFrame() {
+            const progress = ++frame / totalFrames;
+            const e = new big_js_1.default(panel.collapseAnimation ? ease(progress) : 1);
+            const delta = e.mul(fullDelta).sub(appliedDelta).mul(direction);
+            send({
+                type: "applyDelta",
+                handleId: handle.item.id,
+                delta: delta.toNumber(),
+            });
+            appliedDelta = appliedDelta.add(delta
+                .abs()
+                .mul((delta.gt(0) && direction.lt(0)) || (delta.lt(0) && direction.gt(0))
+                ? -1
+                : 1));
+            if (e.eq(1)) {
+                const action = event.type === "expandPanel" ? "expand" : "collapse";
+                resolve({ panelId: panel.id, action });
+                return false;
+            }
+            return true;
+        }
+        (0, rafz_1.raf)(renderFrame);
+    });
+}
+function assign(target, source) {
+    for (const key in source) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        target[key] = source[key];
     }
-    (0, rafz_1.raf)(renderFrame);
-}));
-exports.groupMachine = (0, xstate_1.createMachine)({
-    initial: "idle",
-    types: {
-        context: {},
-        events: {},
-        input: {},
-    },
-    context: ({ input }) => ({
+}
+let groupId = 0;
+function groupMachine(input, onUpdate) {
+    const abortController = new AbortController();
+    const state = {
+        current: "idle",
+    };
+    let locked = false;
+    const context = {
         size: { width: 0, height: 0 },
-        items: input.initialItems || [],
+        items: input.items || [],
         orientation: input.orientation || "horizontal",
         dragOvershoot: new big_js_1.default(0),
-        groupId: input.groupId,
+        groupId: input.groupId || `group-${groupId++}`,
         autosaveStrategy: input.autosaveStrategy,
-    }),
-    states: {
-        idle: {
-            entry: ["onAutosave"],
-            on: {
-                dragHandleStart: {
-                    target: "dragging",
-                    actions: ["onDragHandleStart"],
-                },
-                setPanelPixelSize: {
-                    actions: [
-                        "prepare",
-                        "onClearLastKnownSize",
-                        "onSetPanelSize",
-                        "commit",
-                        "onResize",
-                        "onAutosave",
-                    ],
-                },
-                collapsePanel: [
-                    {
-                        actions: "notifyCollapseToggle",
-                        guard: "shouldNotifyCollapseToggle",
-                    },
-                    { target: "togglingCollapse" },
-                ],
-                expandPanel: [
-                    // This will match if we can't expand and the expansion won't happen
-                    { guard: "cannotExpandPanel" },
-                    {
-                        actions: "notifyCollapseToggle",
-                        guard: "shouldNotifyCollapseToggle",
-                    },
-                    { target: "togglingCollapse" },
-                ],
-            },
+    };
+    const actions = {
+        prepare: () => {
+            context.items = prepareItems(context);
         },
-        dragging: {
-            entry: ["prepare"],
-            on: {
-                dragHandle: {
-                    actions: ["onClearLastKnownSize", "onDragHandle", "onResize"],
-                },
-                dragHandleEnd: { target: "idle" },
-                collapsePanel: {
-                    guard: "shouldCollapseToggle",
-                    actions: "runCollapseToggle",
-                },
-                expandPanel: {
-                    guard: "shouldCollapseToggle",
-                    actions: "runCollapseToggle",
-                },
-            },
-            exit: ["commit", "clearDragHandle"],
+        clearLastKnownSize: () => {
+            context.items = clearLastKnownSize(context.items);
         },
-        togglingCollapse: {
-            entry: ["prepare", "onClearLastKnownSize"],
-            invoke: {
-                src: "animation",
-                input: (i) => ({ ...i, send: i.self.send }),
-                onDone: {
-                    target: "idle",
-                    actions: ["onToggleCollapseComplete", "commit"],
-                },
-            },
-            on: {
-                applyDelta: { actions: ["onApplyDelta", "onResize"] },
-            },
+        commit: () => {
+            context.dragOvershoot = new big_js_1.default(0);
+            context.items = commitLayout(context);
         },
-    },
-    on: {
-        setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
-        registerPanel: { actions: ["assignPanelData"] },
-        rebindPanelCallbacks: {
-            actions: ["rebindPanelCallbacks"],
+        onResize: () => {
+            for (const item of context.items) {
+                if (isPanelData(item)) {
+                    const pixel = item.lastKnownSize
+                        ? new big_js_1.default(context.orientation === "horizontal"
+                            ? item.lastKnownSize.width
+                            : item.lastKnownSize.height)
+                        : clampUnit(context, item, getUnitPixelValue(context, item.currentValue));
+                    const groupSize = getGroupSize(context);
+                    item.onResize?.current?.({
+                        pixel: pixel.toNumber(),
+                        percentage: groupSize > 0 ? pixel.div(getGroupSize(context)).toNumber() : -1,
+                    });
+                }
+            }
         },
-        updateConstraints: {
-            actions: [
-                "prepare",
-                "updateConstraints",
-                "onClearLastKnownSize",
-                "commit",
-                "onResize",
-                "onAutosave",
-            ],
+        onAutosave: () => {
+            if (!context.autosaveStrategy || typeof window === "undefined") {
+                return;
+            }
+            const snapshot = { ...context };
+            snapshot.items = clearLastKnownSize(context.items);
+            snapshot.activeDragHandleId = context.activeDragHandleId;
+            const data = JSON.stringify(snapshot);
+            if (context.autosaveStrategy === "localStorage") {
+                localStorage.setItem(context.groupId, data);
+            }
+            else {
+                setCookie(context.groupId, data);
+            }
         },
-        registerDynamicPanel: {
-            actions: [
-                "prepare",
-                "onRegisterDynamicPanel",
-                "onClearLastKnownSize",
-                "commit",
-                "onResize",
-                "onAutosave",
-            ],
+        removeItem: (id) => {
+            const itemIndex = context.items.findIndex((item) => item.id === id);
+            const item = context.items[itemIndex];
+            if (!item) {
+                return;
+            }
+            const newItems = context.items.filter((i) => i.id !== id);
+            const removedSize = isPanelData(item)
+                ? item.currentValue.value
+                : item.size.value;
+            applyDeltaInBothDirections(context, newItems, itemIndex, removedSize);
+            context.items = newItems;
         },
-        unregisterPanel: {
-            actions: [
-                "prepare",
-                "removeItem",
-                "onClearLastKnownSize",
-                "commit",
-                "onResize",
-                "onAutosave",
-            ],
+        notifyCollapseToggle: (event) => {
+            isEvent(event, ["collapsePanel", "expandPanel"]);
+            const panel = getPanelWithId(context, event.panelId);
+            panel.onCollapseChange?.current?.(!panel.collapsed);
         },
-        registerPanelHandle: { actions: ["assignPanelHandleData"] },
-        unregisterPanelHandle: {
-            actions: [
-                "prepare",
-                "removeItem",
-                "onClearLastKnownSize",
-                "commit",
-                "onResize",
-                "onAutosave",
-            ],
+        runCollapseToggle: (event) => {
+            isEvent(event, ["collapsePanel", "expandPanel"]);
+            const handle = getHandleForPanelId(context, event.panelId);
+            // When collapsing a panel it will be in the opposite direction
+            // that handle assumes
+            const delta = 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 }),
+            });
+            assign(context, newContext);
         },
-        setSize: { actions: ["updateSize", "onResize"] },
-        setOrientation: {
-            actions: ["updateOrientation", "onClearLastKnownSize", "onResize"],
+        onAnimationEnd: (output) => {
+            (0, tiny_invariant_1.default)(output, "Expected output from animation actor");
+            const panel = getPanelWithId(context, output.panelId);
+            panel.collapsed = output.action === "collapse";
+            if (panel.collapsed) {
+                panel.currentValue = panel.collapsedSize;
+            }
+            actions.commit();
         },
-    },
-}, {
-    guards: {
-        shouldNotifyCollapseToggle: ({ context, event }) => {
+    };
+    actions.onAutosave();
+    const guards = {
+        shouldNotifyCollapseToggle: (event) => {
             isEvent(event, ["collapsePanel", "expandPanel"]);
             const panel = getPanelWithId(context, event.panelId);
             return !event.controlled && panel.collapseIsControlled === true;
         },
-        shouldCollapseToggle: ({ context, event }) => {
+        shouldCollapseToggle: (event) => {
             isEvent(event, ["collapsePanel", "expandPanel"]);
             const panel = getPanelWithId(context, event.panelId);
             return panel.collapseIsControlled === true;
         },
-        cannotExpandPanel: ({ context, event }) => {
+        cannotExpandPanel: (event) => {
             isEvent(event, ["expandPanel"]);
             const delta = getDeltaForEvent(context, event);
             const handle = getHandleForPanelId(context, event.panelId);
@@ -1105,166 +1064,82 @@ exports.groupMachine = (0, xstate_1.createMachine)({
                 !updatedPanel.currentValue.value.eq(updatedPanel.collapsedSize.value);
             return totalSize.gt(getGroupSize(context)) || !didExpand;
         },
-    },
-    actors: {
-        animation: animationActor,
-    },
-    actions: {
-        onDragHandleStart: (0, xstate_1.assign)({
-            activeDragHandleId: ({ event }) => {
-                isEvent(event, ["dragHandleStart"]);
-                return event.handleId;
-            },
-        }),
-        clearDragHandle: (0, xstate_1.assign)({
-            activeDragHandleId: undefined,
-        }),
-        onAutosave: ({ context, self }) => {
-            if (!context.autosaveStrategy || typeof window === "undefined") {
-                return;
-            }
-            const snapshot = self.getPersistedSnapshot();
-            snapshot.context.items = clearLastKnownSize(context.items);
-            snapshot.context.activeDragHandleId = context.activeDragHandleId;
-            snapshot.value = "idle";
-            const data = JSON.stringify(snapshot);
-            if (context.autosaveStrategy === "localStorage") {
-                localStorage.setItem(context.groupId, data);
-            }
-            else {
-                Cookies.set(context.groupId, data, {
-                    path: "/",
-                    "max-age": 31536000,
-                });
-            }
-        },
-        notifyCollapseToggle: ({ context, event }) => {
-            isEvent(event, ["collapsePanel", "expandPanel"]);
-            const panel = getPanelWithId(context, event.panelId);
-            panel.onCollapseChange?.current?.(!panel.collapsed);
-        },
-        runCollapseToggle: (0, xstate_1.enqueueActions)(({ context, event, enqueue }) => {
-            isEvent(event, ["collapsePanel", "expandPanel"]);
-            const handle = getHandleForPanelId(context, event.panelId);
-            // When collapsing a panel it will be in the opposite direction
-            // that handle assumes
-            const delta = 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 }),
-            });
-            enqueue.assign(newContext);
-        }),
-        onToggleCollapseComplete: (0, xstate_1.assign)({
-            items: ({ context, event: e }) => {
-                const { output } = e;
-                (0, tiny_invariant_1.default)(output, "Expected output from animation actor");
-                const panel = getPanelWithId(context, output.panelId);
-                panel.collapsed = output.action === "collapse";
-                if (panel.collapsed) {
-                    panel.currentValue = panel.collapsedSize;
-                }
-                return context.items;
-            },
-        }),
-        updateSize: (0, xstate_1.assign)({
-            size: ({ event }) => {
-                isEvent(event, ["setSize"]);
-                return event.size;
-            },
-        }),
-        recordActualItemSize: (0, xstate_1.assign)({
-            items: ({ context, event }) => {
-                isEvent(event, ["setActualItemsSize"]);
-                const withLastKnownSize = context.items.map((i) => {
-                    if (!isPanelData(i))
-                        return i;
-                    const lastKnownSize = event.childrenSizes[i.id] || i.lastKnownSize;
-                    return { ...i, lastKnownSize };
-                });
-                let totalSize = 0;
-                for (const item of withLastKnownSize) {
-                    if (isPanelData(item)) {
-                        const size = item.lastKnownSize?.[context.orientation === "horizontal" ? "width" : "height"];
-                        // If any size is 0 don't handle overflow
-                        if (!size) {
-                            return withLastKnownSize;
-                        }
-                        totalSize += size;
-                    }
-                    else {
-                        totalSize += item.size.value.toNumber();
-                    }
-                }
-                if (totalSize > getGroupSize(context)) {
-                    return handleOverflow({
-                        ...context,
-                        items: prepareItems({ ...context, items: withLastKnownSize }),
-                    }).items;
-                }
-                return withLastKnownSize;
-            },
-        }),
-        updateOrientation: (0, xstate_1.assign)({
-            orientation: ({ event }) => {
-                isEvent(event, ["setOrientation"]);
-                return event.orientation;
-            },
-        }),
-        onClearLastKnownSize: (0, xstate_1.assign)({
-            items: ({ context }) => clearLastKnownSize(context.items),
-        }),
-        assignPanelData: (0, xstate_1.assign)({
-            items: ({ context, event }) => {
-                isEvent(event, ["registerPanel"]);
-                return addDeDuplicatedItems(context.items, {
+    };
+    function transition(to) {
+        // exit
+        switch (state.current) {
+            case "dragging":
+                actions.commit();
+                context.activeDragHandleId = undefined;
+                break;
+        }
+        // enter
+        switch (to) {
+            case "idle":
+                actions.onAutosave();
+                break;
+            case "dragging":
+                actions.prepare();
+                break;
+            case "togglingCollapse":
+                actions.prepare();
+                actions.clearLastKnownSize();
+                break;
+        }
+        state.current = to;
+    }
+    function send(event) {
+        switch (event.type) {
+            case "lockGroup":
+                locked = true;
+                break;
+            case "unlockGroup":
+                locked = false;
+                break;
+        }
+        if (locked) {
+            return;
+        }
+        switch (event.type) {
+            case "registerPanel":
+                context.items = addDeDuplicatedItems(context.items, {
                     type: "panel",
                     currentValue: makePixelUnit(-1),
                     ...event.data,
                 });
-            },
-        }),
-        rebindPanelCallbacks: (0, xstate_1.assign)({
-            items: ({ context, event }) => {
-                isEvent(event, ["rebindPanelCallbacks"]);
-                for (const item of context.items) {
-                    if (isPanelData(item) && item.id === event.data.id) {
-                        item.onCollapseChange = event.data.onCollapseChange;
-                        item.onResize = event.data.onResize;
-                    }
-                }
-                return context.items;
-            },
-        }),
-        updateConstraints: (0, xstate_1.assign)({
-            items: ({ context, event }) => {
-                isEvent(event, ["updateConstraints"]);
-                for (const item of context.items) {
-                    if (isPanelData(item) && item.id === event.data.id) {
-                        const panel = event.data;
-                        item.min = panel.min;
-                        item.max = panel.max;
-                        item.default = panel.default;
-                        item.collapsedSize = panel.collapsedSize;
-                        item.isStaticAtRest = panel.isStaticAtRest;
-                        item.collapseAnimation = panel.collapseAnimation;
-                        item.collapsible = panel.collapsible;
-                    }
-                    else if (isPanelHandle(item) && item.id === event.data.id) {
-                        const handle = event.data;
-                        item.size = handle.size;
-                    }
-                }
-                return context.items;
-            },
-        }),
-        onRegisterDynamicPanel: (0, xstate_1.assign)({
-            items: ({ context, event }) => {
-                isEvent(event, ["registerDynamicPanel"]);
+                break;
+            case "unregisterPanel":
+                actions.prepare();
+                actions.removeItem(event.id);
+                actions.clearLastKnownSize();
+                actions.commit();
+                actions.onResize();
+                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_js_1.default(unit.value),
+                    },
+                });
+                break;
+            }
+            case "unregisterPanelHandle":
+                actions.prepare();
+                actions.removeItem(event.id);
+                actions.clearLastKnownSize();
+                actions.commit();
+                actions.onResize();
+                actions.onAutosave();
+                break;
+            case "registerDynamicPanel": {
+                actions.prepare();
                 let currentValue = makePixelUnit(0);
                 if (event.data.collapsible &&
                     event.data.collapsed &&
@@ -1293,100 +1168,196 @@ exports.groupMachine = (0, xstate_1.createMachine)({
                 }, new big_js_1.default(0))
                     .minus(getGroupSize(context));
                 applyDeltaInBothDirections(newContext, newItems, itemIndex, currentValue.value.add(overflowDueToHandles).neg());
-                return newItems;
-            },
-        }),
-        assignPanelHandleData: (0, xstate_1.assign)({
-            items: ({ context, event }) => {
-                isEvent(event, ["registerPanelHandle"]);
-                const unit = typeof event.data.size === "string"
-                    ? parseUnit(event.data.size)
-                    : event.data.size;
-                return addDeDuplicatedItems(context.items, {
-                    type: "handle",
-                    ...event.data,
-                    size: {
-                        type: "pixel",
-                        value: new big_js_1.default(unit.value),
-                    },
+                context.items = newItems;
+                actions.clearLastKnownSize();
+                actions.commit();
+                actions.onResize();
+                actions.onAutosave();
+                break;
+            }
+            case "rebindPanelCallbacks":
+                for (const item of context.items) {
+                    if (isPanelData(item) && item.id === event.data.id) {
+                        item.onCollapseChange = event.data.onCollapseChange;
+                        item.onResize = event.data.onResize;
+                    }
+                }
+                break;
+            case "updateConstraints":
+                actions.prepare();
+                for (const item of context.items) {
+                    if (isPanelData(item) && item.id === event.data.id) {
+                        const panel = event.data;
+                        item.min = panel.min;
+                        item.max = panel.max;
+                        item.default = panel.default;
+                        item.collapsedSize = panel.collapsedSize;
+                        item.isStaticAtRest = panel.isStaticAtRest;
+                        item.collapseAnimation = panel.collapseAnimation;
+                        item.collapsible = panel.collapsible;
+                    }
+                    else if (isPanelHandle(item) && item.id === event.data.id) {
+                        const handle = event.data;
+                        item.size = handle.size;
+                    }
+                }
+                actions.clearLastKnownSize();
+                actions.commit();
+                actions.onResize();
+                actions.onAutosave();
+                break;
+            case "setActualItemsSize": {
+                const withLastKnownSize = context.items.map((i) => {
+                    if (!isPanelData(i))
+                        return i;
+                    const lastKnownSize = event.childrenSizes[i.id] || i.lastKnownSize;
+                    return { ...i, lastKnownSize };
                 });
-            },
-        }),
-        removeItem: (0, xstate_1.assign)({
-            items: ({ context, event }) => {
-                isEvent(event, ["unregisterPanel", "unregisterPanelHandle"]);
-                const itemIndex = context.items.findIndex((item) => item.id === event.id);
-                const item = context.items[itemIndex];
-                if (!item) {
-                    return context.items;
+                let totalSize = 0;
+                let useLastKnownSize = false;
+                for (const item of withLastKnownSize) {
+                    if (isPanelData(item)) {
+                        const size = item.lastKnownSize?.[context.orientation === "horizontal" ? "width" : "height"];
+                        // If any size is 0 don't handle overflow
+                        if (!size) {
+                            context.items = withLastKnownSize;
+                            useLastKnownSize = true;
+                            break;
+                        }
+                        totalSize += size;
+                    }
+                    else {
+                        totalSize += item.size.value.toNumber();
+                    }
                 }
-                const newItems = context.items.filter((i) => i.id !== event.id);
-                const removedSize = isPanelData(item)
-                    ? item.currentValue.value
-                    : item.size.value;
-                applyDeltaInBothDirections(context, newItems, itemIndex, removedSize);
-                return newItems;
-            },
-        }),
-        prepare: (0, xstate_1.assign)({
-            items: ({ context }) => prepareItems(context),
-        }),
-        onDragHandle: (0, xstate_1.enqueueActions)(({ context, event, enqueue }) => {
-            isEvent(event, ["dragHandle"]);
-            enqueue.assign(updateLayout(context, event));
-        }),
-        commit: (0, xstate_1.assign)({
-            dragOvershoot: new big_js_1.default(0),
-            items: ({ context }) => commitLayout(context),
-        }),
-        onApplyDelta: (0, xstate_1.assign)(({ context, event }) => {
-            isEvent(event, ["applyDelta"]);
-            return updateLayout(context, {
-                handleId: event.handleId,
-                type: "collapsePanel",
-                disregardCollapseBuffer: true,
-                value: dragHandlePayload({
-                    delta: event.delta,
-                    orientation: context.orientation,
-                }),
-            });
-        }),
-        onSetPanelSize: (0, xstate_1.enqueueActions)(({ context, event, enqueue }) => {
-            isEvent(event, ["setPanelPixelSize"]);
-            const panel = getPanelWithId(context, event.panelId);
-            const handle = getHandleForPanelId(context, event.panelId);
-            const current = panel.currentValue.value;
-            const newSize = clampUnit(context, panel, getUnitPixelValue(context, parseUnit(event.size)));
-            const isBigger = newSize > current;
-            const delta = isBigger
-                ? newSize.minus(current)
-                : current.minus(newSize);
-            enqueue.assign(iterativelyUpdateLayout({
-                context,
-                direction: (handle.direction * (isBigger ? 1 : -1)),
-                handleId: handle.item.id,
-                delta,
-            }));
-        }),
-        onResize: ({ context }) => {
-            for (const item of context.items) {
-                if (isPanelData(item)) {
-                    const pixel = item.lastKnownSize
-                        ? new big_js_1.default(context.orientation === "horizontal"
-                            ? item.lastKnownSize.width
-                            : item.lastKnownSize.height)
-                        : clampUnit(context, item, getUnitPixelValue(context, item.currentValue));
-                    const groupSize = getGroupSize(context);
-                    item.onResize?.current?.({
-                        pixel: pixel.toNumber(),
-                        percentage: groupSize > 0
-                            ? pixel.div(getGroupSize(context)).toNumber()
-                            : -1,
-                    });
+                if (useLastKnownSize) {
+                    context.items = withLastKnownSize;
+                }
+                else if (totalSize > getGroupSize(context)) {
+                    context.items = handleOverflow({
+                        ...context,
+                        items: prepareItems({ ...context, items: withLastKnownSize }),
+                    }).items;
+                }
+                else {
+                    context.items = withLastKnownSize;
                 }
+                actions.onResize();
+                break;
             }
-        },
-    },
-});
+            case "setSize": {
+                context.size = event.size;
+                actions.onResize();
+                break;
+            }
+            case "setOrientation":
+                context.orientation = event.orientation;
+                actions.clearLastKnownSize();
+                actions.onResize();
+                break;
+            default:
+                break;
+        }
+        if (state.current === "idle") {
+            switch (event.type) {
+                case "dragHandleStart":
+                    transition("dragging");
+                    context.activeDragHandleId = event.handleId;
+                    break;
+                case "setPanelPixelSize": {
+                    actions.prepare();
+                    actions.clearLastKnownSize();
+                    const panel = getPanelWithId(context, event.panelId);
+                    const handle = getHandleForPanelId(context, event.panelId);
+                    const current = panel.currentValue.value;
+                    const newSize = clampUnit(context, panel, getUnitPixelValue(context, parseUnit(event.size)));
+                    const isBigger = newSize > current;
+                    const delta = isBigger
+                        ? newSize.minus(current)
+                        : current.minus(newSize);
+                    Object.assign(context, iterativelyUpdateLayout({
+                        context,
+                        direction: (handle.direction * (isBigger ? 1 : -1)),
+                        handleId: handle.item.id,
+                        delta,
+                    }));
+                    actions.commit();
+                    actions.onResize();
+                    actions.onAutosave();
+                    break;
+                }
+                case "collapsePanel":
+                    if (guards.shouldNotifyCollapseToggle(event)) {
+                        actions.notifyCollapseToggle(event);
+                    }
+                    else {
+                        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 {
+                            transition("togglingCollapse");
+                            abortController.abort();
+                            animationActor(context, event, send, abortController).then((output) => {
+                                actions.onAnimationEnd(output);
+                                transition("idle");
+                            });
+                        }
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+        else if (state.current === "dragging") {
+            switch (event.type) {
+                case "dragHandle":
+                    actions.clearLastKnownSize();
+                    assign(context, updateLayout(context, event));
+                    actions.onResize();
+                    break;
+                case "dragHandleEnd":
+                    transition("idle");
+                    break;
+                case "expandPanel":
+                case "collapsePanel":
+                    if (guards.shouldCollapseToggle(event)) {
+                        actions.runCollapseToggle(event);
+                    }
+                    break;
+            }
+        }
+        else if (state.current === "togglingCollapse") {
+            switch (event.type) {
+                case "applyDelta":
+                    assign(context, updateLayout(context, {
+                        handleId: event.handleId,
+                        type: "collapsePanel",
+                        disregardCollapseBuffer: true,
+                        value: dragHandlePayload({
+                            delta: event.delta,
+                            orientation: context.orientation,
+                        }),
+                    }));
+                    actions.onResize();
+                    break;
+            }
+        }
+        onUpdate?.(context);
+    }
+    return [context, send, state];
+}
 // #endregion
 //# sourceMappingURL=index.js.map