@zag-js/splitter 1.40.0 → 1.41.1

package/dist/splitter.machine.js

@@ -40,7 +40,9 @@ var dom = __toESM(require("./splitter.dom.js"));
 var import_aria = require("./utils/aria.js");
 var import_fuzzy = require("./utils/fuzzy.js");
 var import_panel = require("./utils/panel.js");
+var import_preserve_fixed_panel_sizes = require("./utils/preserve-fixed-panel-sizes.js");
 var import_resize_by_delta = require("./utils/resize-by-delta.js");
+var import_size = require("./utils/size.js");
 var import_validate_sizes = require("./utils/validate-sizes.js");
 var machine = (0, import_core.createMachine)({
   props({ props }) {
@@ -58,15 +60,18 @@ var machine = (0, import_core.createMachine)({
   },
   context({ prop, bindable, getContext, getRefs }) {
     return {
+      panels: bindable(() => ({
+        defaultValue: (0, import_size.normalizePanels)(prop("panels"), null, prop("orientation"))
+      })),
       size: bindable(() => ({
-        value: prop("size"),
-        defaultValue: prop("defaultSize"),
+        defaultValue: [],
         isEqual(a, b) {
           return b != null && (0, import_fuzzy.fuzzySizeEqual)(a, b);
         },
         onChange(value) {
           const ctx = getContext();
           const refs = getRefs();
+          if (refs.get("suppressOnResize")) return;
           const sizesBeforeCollapse = refs.get("panelSizeBeforeCollapse");
           const expandToSizes = Object.fromEntries(sizesBeforeCollapse.entries());
           const resizeTriggerId = ctx.get("dragState")?.resizeTriggerId ?? null;
@@ -88,15 +93,27 @@ var machine = (0, import_core.createMachine)({
     };
   },
   watch({ track, action, prop }) {
-    track([() => (0, import_panel.serializePanels)(prop("panels"))], () => {
-      action(["syncSize"]);
-    });
+    track(
+      [
+        () => (0, import_panel.serializePanels)(prop("panels")),
+        () => JSON.stringify(prop("size") ?? []),
+        () => JSON.stringify(prop("defaultSize") ?? [])
+      ],
+      () => {
+        action(["syncSize"]);
+      }
+    );
   },
   refs() {
     return {
       panelSizeBeforeCollapse: /* @__PURE__ */ new Map(),
       prevDelta: 0,
-      panelIdToLastNotifiedSizeMap: /* @__PURE__ */ new Map()
+      panelIdToLastNotifiedSizeMap: /* @__PURE__ */ new Map(),
+      initialSize: null,
+      prevInitialLayout: null,
+      prevGroupSize: null,
+      lastRequestedSize: null,
+      suppressOnResize: false
     };
   },
   computed: {
@@ -108,6 +125,9 @@ var machine = (0, import_core.createMachine)({
     "SIZE.SET": {
       actions: ["setSize"]
     },
+    "SIZE.RESET": {
+      actions: ["resetSize"]
+    },
     "PANEL.COLLAPSE": {
       actions: ["collapsePanel"]
     },
@@ -116,11 +136,14 @@ var machine = (0, import_core.createMachine)({
     },
     "PANEL.RESIZE": {
       actions: ["resizePanel"]
+    },
+    "ROOT.RESIZE": {
+      actions: ["syncSize"]
     }
   },
   entry: ["syncSize"],
   exit: ["clearGlobalCursor"],
-  effects: ["trackResizeHandles"],
+  effects: ["trackResizeHandles", "trackRootResize"],
   states: {
     idle: {
       entry: ["clearDraggingState", "clearKeyboardState"],
@@ -195,14 +218,27 @@ var machine = (0, import_core.createMachine)({
         POINTER_MOVE: {
           actions: ["setPointerValue", "setGlobalCursor"]
         },
-        POINTER_UP: {
-          target: "idle",
-          actions: ["invokeOnResizeEnd", "clearGlobalCursor"]
-        }
+        POINTER_UP: [
+          {
+            guard: "isResizeTriggerFocused",
+            target: "focused",
+            actions: ["invokeOnResizeEnd", "setKeyboardState", "clearDraggingState", "clearGlobalCursor"]
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnResizeEnd", "clearGlobalCursor"]
+          }
+        ]
       }
     }
   },
   implementations: {
+    guards: {
+      isResizeTriggerFocused({ context, scope }) {
+        const dragState = context.get("dragState");
+        return scope.isActiveElement(dom.getResizeTriggerEl(scope, dragState?.resizeTriggerId));
+      }
+    },
     effects: {
       trackResizeHandles: ({ prop, scope, send }) => {
         const registry = prop("registry");
@@ -235,6 +271,13 @@ var machine = (0, import_core.createMachine)({
           observeCleanup?.();
         };
       },
+      trackRootResize: ({ scope, send }) => {
+        const rootEl = dom.getRootEl(scope);
+        if (!rootEl) return;
+        return import_dom_query.resizeObserverBorderBox.observe(rootEl, () => {
+          send({ type: "ROOT.RESIZE" });
+        });
+      },
       waitForHoverDelay: ({ send }) => {
         return (0, import_utils.setRafTimeout)(() => {
           send({ type: "HOVER_DELAY" });
@@ -254,40 +297,85 @@ var machine = (0, import_core.createMachine)({
     },
     actions: {
       setSize(params) {
-        const { context, event, prop } = params;
+        const { context, event, prop, scope } = params;
         const unsafeSize = event.size;
         const prevSize = context.get("size");
-        const panels = prop("panels");
+        const panels = context.get("panels");
         const safeSize = (0, import_validate_sizes.validateSizes)({
-          size: unsafeSize,
+          size: (0, import_size.resolvePanelSizes)({
+            sizes: unsafeSize,
+            panels: prop("panels"),
+            rootEl: dom.getRootEl(scope),
+            orientation: prop("orientation")
+          }),
           panels
         });
         if (!(0, import_utils.isEqual)(prevSize, safeSize)) {
           setSize(params, safeSize);
         }
       },
-      syncSize({ context, prop }) {
-        const panels = prop("panels");
-        let prevSize = context.get("size");
-        let unsafeSize = null;
-        if (prevSize.length === 0) {
-          unsafeSize = (0, import_panel.getUnsafeDefaultSize)({
-            panels,
-            size: context.initial("size")
-          });
-        }
-        const nextSize = (0, import_validate_sizes.validateSizes)({
-          size: unsafeSize ?? prevSize,
+      resetSize(params) {
+        const { refs, context, prop, scope } = params;
+        const initialSize = refs.get("initialSize");
+        const nextSize = initialSize ?? (0, import_validate_sizes.validateSizes)({
+          size: (0, import_size.resolvePanelSizes)({
+            sizes: prop("size") ?? prop("defaultSize"),
+            panels: prop("panels"),
+            rootEl: dom.getRootEl(scope),
+            orientation: prop("orientation")
+          }),
+          panels: context.get("panels")
+        });
+        setSize(params, nextSize);
+      },
+      syncSize(params) {
+        const { context, scope, prop, refs } = params;
+        const rootEl = dom.getRootEl(scope);
+        if (!rootEl) return;
+        const orientation = prop("orientation");
+        const nextGroupSize = (0, import_size.getGroupSize)(rootEl, orientation);
+        if (nextGroupSize <= 0) return;
+        const panels = (0, import_size.normalizePanels)(prop("panels"), rootEl, prop("orientation"));
+        context.set("panels", panels);
+        const sizeSpec = prop("size") ?? prop("defaultSize");
+        const initialLayout = `${(0, import_panel.getPanelLayout)(prop("panels"))}:${JSON.stringify(prop("size") ?? [])}:${JSON.stringify(prop("defaultSize") ?? [])}`;
+        const prevGroupSize = refs.get("prevGroupSize");
+        const currentSize = context.get("size");
+        const nextResolvedSize = (0, import_size.resolvePanelSizes)({
+          sizes: sizeSpec,
+          panels: prop("panels"),
+          rootEl,
+          orientation
+        });
+        const canPreserveLayout = prevGroupSize != null && prevGroupSize !== nextGroupSize && currentSize.length === panels.length;
+        const nextSize = canPreserveLayout ? (0, import_preserve_fixed_panel_sizes.preserveFixedPanelSizes)({
+          panels,
+          prevLayout: currentSize,
+          prevGroupSize,
+          nextGroupSize
+        }) : nextResolvedSize;
+        const safeSize = (0, import_validate_sizes.validateSizes)({
+          size: nextSize,
           panels
         });
-        if (!(0, import_utils.isEqual)(prevSize, nextSize)) {
-          context.set("size", nextSize);
+        if (refs.get("prevInitialLayout") !== initialLayout) {
+          refs.set("initialSize", safeSize);
+          refs.set("prevInitialLayout", initialLayout);
+        }
+        const prevSize = context.get("size");
+        if (!(0, import_utils.isEqual)(prevSize, safeSize)) {
+          refs.set("suppressOnResize", prop("size") != null || prevSize.length === 0);
+          context.set("size", safeSize);
+          refs.set("suppressOnResize", false);
         }
+        refs.set("prevGroupSize", nextGroupSize);
       },
       setDraggingState({ context, event, prop, scope }) {
         const orientation = prop("orientation");
         const size = context.get("size");
         const resizeTriggerId = event.id;
+        const resolvedResizeTriggerId = dom.resolveResizeTriggerId(scope, resizeTriggerId);
+        if (!resolvedResizeTriggerId) return;
         const panelGroupEl = dom.getRootEl(scope);
         if (!panelGroupEl) return;
         const handleElement = dom.getResizeTriggerEl(scope, resizeTriggerId);
@@ -295,6 +383,7 @@ var machine = (0, import_core.createMachine)({
         const initialCursorPosition = orientation === "horizontal" ? event.point.x : event.point.y;
         context.set("dragState", {
           resizeTriggerId: event.id,
+          resolvedResizeTriggerId,
           resizeTriggerRect: handleElement.getBoundingClientRect(),
           initialCursorPosition,
           initialSize: size
@@ -303,23 +392,26 @@ var machine = (0, import_core.createMachine)({
       clearDraggingState({ context }) {
         context.set("dragState", null);
       },
-      setKeyboardState({ context, event }) {
+      setKeyboardState({ context, event, scope }) {
+        const id = event.id ?? context.get("dragState")?.resizeTriggerId;
+        if (id == null) return;
         context.set("keyboardState", {
-          resizeTriggerId: event.id
+          resizeTriggerId: id,
+          resolvedResizeTriggerId: dom.resolveResizeTriggerId(scope, id)
         });
       },
       clearKeyboardState({ context }) {
         context.set("keyboardState", null);
       },
       collapsePanel(params) {
-        const { context, prop, event, refs } = params;
+        const { context, event, refs } = params;
         const prevSize = context.get("size");
-        const panels = prop("panels");
+        const panels = context.get("panels");
         const panel = panels.find((panel2) => panel2.id === event.id);
         (0, import_utils.ensure)(panel, () => `Panel data not found for id "${event.id}"`);
         if (panel.collapsible) {
           const { collapsedSize = 0, panelSize, pivotIndices } = (0, import_panel.panelDataHelper)(panels, panel, prevSize);
-          (0, import_utils.ensure)(panelSize, () => `Panel size not found for panel "${panel.id}"`);
+          (0, import_utils.ensure)(panelSize != null, () => `Panel size not found for panel "${panel.id}"`);
           if (!(0, import_fuzzy.fuzzyNumbersEqual)(panelSize, collapsedSize)) {
             refs.get("panelSizeBeforeCollapse").set(panel.id, panelSize);
             const isLastPanel = (0, import_panel.findPanelDataIndex)(panels, panel) === panels.length - 1;
@@ -339,8 +431,8 @@ var machine = (0, import_core.createMachine)({
         }
       },
       expandPanel(params) {
-        const { context, prop, event, refs } = params;
-        const panels = prop("panels");
+        const { context, event, refs } = params;
+        const panels = context.get("panels");
         const prevSize = context.get("size");
         const panel = panels.find((panel2) => panel2.id === event.id);
         (0, import_utils.ensure)(panel, () => `Panel data not found for id "${event.id}"`);
@@ -372,13 +464,13 @@ var machine = (0, import_core.createMachine)({
         }
       },
       resizePanel(params) {
-        const { context, prop, event } = params;
+        const { context, event } = params;
         const prevSize = context.get("size");
-        const panels = prop("panels");
+        const panels = context.get("panels");
         const panel = (0, import_panel.getPanelById)(panels, event.id);
         const unsafePanelSize = event.size;
         const { panelSize, pivotIndices } = (0, import_panel.panelDataHelper)(panels, panel, prevSize);
-        (0, import_utils.ensure)(panelSize, () => `Panel size not found for panel "${panel.id}"`);
+        (0, import_utils.ensure)(panelSize != null, () => `Panel size not found for panel "${panel.id}"`);
         const isLastPanel = (0, import_panel.findPanelDataIndex)(panels, panel) === panels.length - 1;
         const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
         const nextSize = (0, import_resize_by_delta.resizeByDelta)({
@@ -397,11 +489,11 @@ var machine = (0, import_core.createMachine)({
         const { context, event, prop, scope } = params;
         const dragState = context.get("dragState");
         if (!dragState) return;
-        const { resizeTriggerId, initialSize, initialCursorPosition } = dragState;
-        const panels = prop("panels");
+        const { resolvedResizeTriggerId, initialSize, initialCursorPosition } = dragState;
+        const panels = context.get("panels");
         const panelGroupElement = dom.getRootEl(scope);
         (0, import_utils.ensure)(panelGroupElement, () => `Panel group element not found`);
-        const pivotIndices = resizeTriggerId.split(":").map((id) => panels.findIndex((panel) => panel.id === id));
+        const pivotIndices = resolvedResizeTriggerId.split(":").map((id) => panels.findIndex((panel) => panel.id === id));
         const horizontal = prop("orientation") === "horizontal";
         const cursorPosition = horizontal ? event.point.x : event.point.y;
         const groupRect = panelGroupElement.getBoundingClientRect();
@@ -422,9 +514,10 @@ var machine = (0, import_core.createMachine)({
         }
       },
       setKeyboardValue(params) {
-        const { context, event, prop } = params;
-        const panelDataArray = prop("panels");
-        const resizeTriggerId = event.id;
+        const { context, event } = params;
+        const panelDataArray = context.get("panels");
+        const resizeTriggerId = dom.resolveResizeTriggerId(params.scope, event.id);
+        if (!resizeTriggerId) return;
         const delta = event.delta;
         const pivotIndices = resizeTriggerId.split(":").map((id) => panelDataArray.findIndex((panelData) => panelData.id === id));
         const prevSize = context.get("size");
@@ -440,11 +533,11 @@ var machine = (0, import_core.createMachine)({
           setSize(params, nextSize);
         }
       },
-      invokeOnResizeEnd({ context, prop }) {
+      invokeOnResizeEnd({ context, prop, refs }) {
         queueMicrotask(() => {
           const dragState = context.get("dragState");
           prop("onResizeEnd")?.({
-            size: context.get("size"),
+            size: refs.get("lastRequestedSize") ?? context.get("size"),
             resizeTriggerId: dragState?.resizeTriggerId ?? null
           });
         });
@@ -455,10 +548,10 @@ var machine = (0, import_core.createMachine)({
         });
       },
       collapseOrExpandPanel(params) {
-        const { context, prop } = params;
-        const panelDataArray = prop("panels");
+        const { context, refs } = params;
+        const panelDataArray = context.get("panels");
         const sizes = context.get("size");
-        const resizeTriggerId = context.get("keyboardState")?.resizeTriggerId;
+        const resizeTriggerId = context.get("keyboardState")?.resolvedResizeTriggerId;
         const [idBefore, idAfter] = resizeTriggerId?.split(":") ?? [];
         const index = panelDataArray.findIndex((panelData2) => panelData2.id === idBefore);
         if (index === -1) return;
@@ -472,7 +565,7 @@ var machine = (0, import_core.createMachine)({
           );
           const nextSize = (0, import_resize_by_delta.resizeByDelta)({
             delta: (0, import_fuzzy.fuzzyNumbersEqual)(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-            initialSize: context.initial("size"),
+            initialSize: refs.get("initialSize") ?? sizes,
             panels: panelDataArray,
             pivotIndices,
             prevSize: sizes,
@@ -483,18 +576,19 @@ var machine = (0, import_core.createMachine)({
           }
         }
       },
-      setGlobalCursor({ context, scope, prop }) {
+      setGlobalCursor(params) {
+        const { context, scope, prop } = params;
         const registry = prop("registry");
         if (registry) return;
         const dragState = context.get("dragState");
         if (!dragState) return;
-        const panels = prop("panels");
+        const panels = context.get("panels");
         const horizontal = prop("orientation") === "horizontal";
-        const [idBefore] = dragState.resizeTriggerId.split(":");
+        const [idBefore] = dragState.resolvedResizeTriggerId.split(":");
         const indexBefore = panels.findIndex((panel2) => panel2.id === idBefore);
         const panel = panels[indexBefore];
         const size = context.get("size");
-        const aria = (0, import_aria.getAriaValue)(size, panels, dragState.resizeTriggerId);
+        const aria = (0, import_aria.getAriaValue)(size, panels, dragState.resolvedResizeTriggerId);
         const isAtMin = (0, import_fuzzy.fuzzyNumbersEqual)(aria.valueNow, aria.valueMin) || (0, import_fuzzy.fuzzyNumbersEqual)(aria.valueNow, panel.collapsedSize);
         const isAtMax = (0, import_fuzzy.fuzzyNumbersEqual)(aria.valueNow, aria.valueMax);
         const cursorState = { isAtMin, isAtMax };
@@ -514,21 +608,36 @@ var machine = (0, import_core.createMachine)({
 });
 function setSize(params, sizes) {
   const { refs, prop, context } = params;
-  const panelsArray = prop("panels");
+  const panelsArray = context.get("panels");
   const onCollapse = prop("onCollapse");
   const onExpand = prop("onExpand");
+  const onResize = prop("onResize");
   const onResizeStart = prop("onResizeStart");
   const onResizeEnd = prop("onResizeEnd");
   const panelIdToLastNotifiedSizeMap = refs.get("panelIdToLastNotifiedSizeMap");
   const dragState = context.get("dragState");
   const keyboardState = context.get("keyboardState");
   const isProgrammatic = dragState === null && keyboardState === null;
+  refs.set("lastRequestedSize", sizes);
   if (isProgrammatic && onResizeStart) {
     queueMicrotask(() => {
       onResizeStart();
     });
   }
-  context.set("size", sizes);
+  if (prop("size") == null) {
+    context.set("size", sizes);
+  } else if (onResize) {
+    const sizesBeforeCollapse = refs.get("panelSizeBeforeCollapse");
+    const expandToSizes = Object.fromEntries(sizesBeforeCollapse.entries());
+    const resizeTriggerId = dragState?.resizeTriggerId ?? null;
+    const layout = (0, import_panel.getPanelLayout)(prop("panels"));
+    onResize({
+      size: sizes,
+      layout,
+      resizeTriggerId,
+      expandToSizes
+    });
+  }
   sizes.forEach((size, index) => {
     const panelData = panelsArray[index];
     (0, import_utils.ensure)(panelData, () => `Panel data not found for index ${index}`);
@@ -536,11 +645,11 @@ function setSize(params, sizes) {
     const lastNotifiedSize = panelIdToLastNotifiedSizeMap.get(panelId);
     if (lastNotifiedSize == null || size !== lastNotifiedSize) {
       panelIdToLastNotifiedSizeMap.set(panelId, size);
-      if (collapsible && (onCollapse || onExpand)) {
-        if ((lastNotifiedSize == null || (0, import_fuzzy.fuzzyNumbersEqual)(lastNotifiedSize, collapsedSize)) && !(0, import_fuzzy.fuzzyNumbersEqual)(size, collapsedSize)) {
+      if (collapsible && lastNotifiedSize != null && (onCollapse || onExpand)) {
+        if ((0, import_fuzzy.fuzzyNumbersEqual)(lastNotifiedSize, collapsedSize) && !(0, import_fuzzy.fuzzyNumbersEqual)(size, collapsedSize)) {
           onExpand?.({ panelId, size });
         }
-        if (onCollapse && (lastNotifiedSize == null || !(0, import_fuzzy.fuzzyNumbersEqual)(lastNotifiedSize, collapsedSize)) && (0, import_fuzzy.fuzzyNumbersEqual)(size, collapsedSize)) {
+        if (!(0, import_fuzzy.fuzzyNumbersEqual)(lastNotifiedSize, collapsedSize) && (0, import_fuzzy.fuzzyNumbersEqual)(size, collapsedSize)) {
           onCollapse?.({ panelId, size });
         }
       }