@zag-js/splitter 0.10.0 → 0.10.2

package/dist/{chunk-FCVFZHPC.mjs → chunk-2ZKYBJFK.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-3GDOPT5W.mjs";
 import {
   getHandleBounds
-} from "./chunk-MV44GBQY.mjs";
+} from "./chunk-MXEXJMQ6.mjs";
 
 // src/splitter.connect.ts
 import { getEventKey, getEventStep } from "@zag-js/dom-event";
@@ -15,6 +15,7 @@ function connect(state, send, normalize) {
   const isHorizontal = state.context.isHorizontal;
   const isFocused = state.hasTag("focus");
   const isDragging = state.matches("dragging");
+  const panels = state.context.panels;
   const api = {
     /**
      * Whether the splitter is focused.
@@ -29,28 +30,24 @@ function connect(state, send, normalize) {
      */
     bounds: getHandleBounds(state.context),
     /**
-     * Function to collapse a panel.
+     * Function to set a panel to its minimum size.
      */
-    collapse(id) {
-      send({ type: "COLLAPSE", id });
+    setToMinSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" });
     },
     /**
-     * Function to expand a panel.
+     * Function to set a panel to its maximum size.
      */
-    expand(id) {
-      send({ type: "EXPAND", id });
-    },
-    /**
-     * Function to toggle a panel between collapsed and expanded.
-     */
-    toggle(id) {
-      send({ type: "TOGGLE", id });
+    setToMaxSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" });
     },
     /**
      * Function to set the size of a panel.
      */
     setSize(id, size) {
-      send({ type: "SET_SIZE", id, size });
+      send({ type: "SET_PANEL_SIZE", id, size });
     },
     /**
      * Returns the state details for a resize trigger.
@@ -59,13 +56,13 @@ function connect(state, send, normalize) {
       const { id, disabled } = props;
       const ids = id.split(":");
       const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
-      const panels = getHandleBounds(state.context, id);
+      const panels2 = getHandleBounds(state.context, id);
       return {
         isDisabled: !!disabled,
         isFocused: state.context.activeResizeId === id && isFocused,
         panelIds,
-        min: panels?.min,
-        max: panels?.max,
+        min: panels2?.min,
+        max: panels2?.max,
         value: 0
       };
     },
@@ -92,14 +89,6 @@ function connect(state, send, normalize) {
         style: dom.getPanelStyle(state.context, id)
       });
     },
-    // toggleTriggerProps: normalize.element({
-    //   ...parts.toggleButton.attrs,
-    //   id: dom.getToggleButtonId(state.context),
-    //   "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
-    //   onClick() {
-    //     send("TOGGLE")
-    //   },
-    // }),
     getResizeTriggerProps(props) {
       const { id, disabled, step = 1 } = props;
       const triggerState = api.getResizeTriggerState(props);

package/dist/{chunk-64C2WGI5.mjs → chunk-E3EBKL5P.mjs}

@@ -7,7 +7,7 @@ import {
   getHandlePanels,
   getNormalizedPanels,
   getPanelBounds
-} from "./chunk-MV44GBQY.mjs";
+} from "./chunk-MXEXJMQ6.mjs";
 
 // src/splitter.machine.ts
 import { createMachine } from "@zag-js/core";
@@ -41,21 +41,9 @@ function machine(userContext) {
         panels: (ctx2) => getNormalizedPanels(ctx2)
       },
       on: {
-        COLLAPSE: {
-          actions: "setStartPanelToMin"
-        },
-        EXPAND: {
-          actions: "setStartPanelToMax"
-        },
-        TOGGLE: [
-          {
-            guard: "isStartPanelAtMin",
-            actions: "setStartPanelToMax"
-          },
-          {
-            actions: "setStartPanelToMin"
-          }
-        ]
+        SET_PANEL_SIZE: {
+          actions: "setPanelSize"
+        }
       },
       states: {
         idle: {
@@ -202,6 +190,13 @@ function machine(userContext) {
             size: panel.size
           }));
         },
+        setPanelSize(ctx2, evt) {
+          const { id, size } = evt;
+          ctx2.size = ctx2.size.map((panel) => {
+            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
+            return panel.id === id ? { ...panel, size: panelSize } : panel;
+          });
+        },
         setStartPanelToMin(ctx2) {
           const bounds = getPanelBounds(ctx2);
           if (!bounds)

package/dist/{chunk-MV44GBQY.mjs → chunk-MXEXJMQ6.mjs}

@@ -9,7 +9,7 @@ function getNormalizedPanels(ctx) {
   let totalSize = 0;
   let totalMinSize = 0;
   const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 10;
+    const minSize = panel.minSize ?? 0;
     const maxSize = panel.maxSize ?? 100;
     totalMinSize += minSize;
     if (panel.size == null) {

package/dist/index.js

@@ -103,7 +103,7 @@ function getNormalizedPanels(ctx) {
   let totalSize = 0;
   let totalMinSize = 0;
   const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 10;
+    const minSize = panel.minSize ?? 0;
     const maxSize = panel.maxSize ?? 100;
     totalMinSize += minSize;
     if (panel.size == null) {
@@ -219,6 +219,7 @@ function connect(state, send, normalize) {
   const isHorizontal = state.context.isHorizontal;
   const isFocused = state.hasTag("focus");
   const isDragging = state.matches("dragging");
+  const panels = state.context.panels;
   const api = {
     /**
      * Whether the splitter is focused.
@@ -233,28 +234,24 @@ function connect(state, send, normalize) {
      */
     bounds: getHandleBounds(state.context),
     /**
-     * Function to collapse a panel.
+     * Function to set a panel to its minimum size.
      */
-    collapse(id) {
-      send({ type: "COLLAPSE", id });
+    setToMinSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" });
     },
     /**
-     * Function to expand a panel.
+     * Function to set a panel to its maximum size.
      */
-    expand(id) {
-      send({ type: "EXPAND", id });
-    },
-    /**
-     * Function to toggle a panel between collapsed and expanded.
-     */
-    toggle(id) {
-      send({ type: "TOGGLE", id });
+    setToMaxSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" });
     },
     /**
      * Function to set the size of a panel.
      */
     setSize(id, size) {
-      send({ type: "SET_SIZE", id, size });
+      send({ type: "SET_PANEL_SIZE", id, size });
     },
     /**
      * Returns the state details for a resize trigger.
@@ -263,13 +260,13 @@ function connect(state, send, normalize) {
       const { id, disabled } = props;
       const ids = id.split(":");
       const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
-      const panels = getHandleBounds(state.context, id);
+      const panels2 = getHandleBounds(state.context, id);
       return {
         isDisabled: !!disabled,
         isFocused: state.context.activeResizeId === id && isFocused,
         panelIds,
-        min: panels?.min,
-        max: panels?.max,
+        min: panels2?.min,
+        max: panels2?.max,
         value: 0
       };
     },
@@ -296,14 +293,6 @@ function connect(state, send, normalize) {
         style: dom.getPanelStyle(state.context, id)
       });
     },
-    // toggleTriggerProps: normalize.element({
-    //   ...parts.toggleButton.attrs,
-    //   id: dom.getToggleButtonId(state.context),
-    //   "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
-    //   onClick() {
-    //     send("TOGGLE")
-    //   },
-    // }),
     getResizeTriggerProps(props) {
       const { id, disabled, step = 1 } = props;
       const triggerState = api.getResizeTriggerState(props);
@@ -432,21 +421,9 @@ function machine(userContext) {
         panels: (ctx2) => getNormalizedPanels(ctx2)
       },
       on: {
-        COLLAPSE: {
-          actions: "setStartPanelToMin"
-        },
-        EXPAND: {
-          actions: "setStartPanelToMax"
-        },
-        TOGGLE: [
-          {
-            guard: "isStartPanelAtMin",
-            actions: "setStartPanelToMax"
-          },
-          {
-            actions: "setStartPanelToMin"
-          }
-        ]
+        SET_PANEL_SIZE: {
+          actions: "setPanelSize"
+        }
       },
       states: {
         idle: {
@@ -593,6 +570,13 @@ function machine(userContext) {
             size: panel.size
           }));
         },
+        setPanelSize(ctx2, evt) {
+          const { id, size } = evt;
+          ctx2.size = ctx2.size.map((panel) => {
+            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
+            return panel.id === id ? { ...panel, size: panelSize } : panel;
+          });
+        },
         setStartPanelToMin(ctx2) {
           const bounds = getPanelBounds(ctx2);
           if (!bounds)

package/dist/index.mjs

@@ -1,14 +1,14 @@
 import {
   connect
-} from "./chunk-FCVFZHPC.mjs";
+} from "./chunk-2ZKYBJFK.mjs";
 import {
   anatomy
 } from "./chunk-HPRMFGOY.mjs";
 import {
   machine
-} from "./chunk-64C2WGI5.mjs";
+} from "./chunk-E3EBKL5P.mjs";
 import "./chunk-3GDOPT5W.mjs";
-import "./chunk-MV44GBQY.mjs";
+import "./chunk-MXEXJMQ6.mjs";
 export {
   anatomy,
   connect,

package/dist/splitter.connect.d.ts

@@ -19,17 +19,13 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
         max: number;
     } | undefined;
     /**
-     * Function to collapse a panel.
+     * Function to set a panel to its minimum size.
      */
-    collapse(id: PanelId): void;
+    setToMinSize(id: PanelId): void;
     /**
-     * Function to expand a panel.
+     * Function to set a panel to its maximum size.
      */
-    expand(id: PanelId): void;
-    /**
-     * Function to toggle a panel between collapsed and expanded.
-     */
-    toggle(id: PanelId): void;
+    setToMaxSize(id: PanelId): void;
     /**
      * Function to set the size of a panel.
      */

package/dist/splitter.connect.js

@@ -126,6 +126,7 @@ function connect(state, send, normalize) {
   const isHorizontal = state.context.isHorizontal;
   const isFocused = state.hasTag("focus");
   const isDragging = state.matches("dragging");
+  const panels = state.context.panels;
   const api = {
     /**
      * Whether the splitter is focused.
@@ -140,28 +141,24 @@ function connect(state, send, normalize) {
      */
     bounds: getHandleBounds(state.context),
     /**
-     * Function to collapse a panel.
+     * Function to set a panel to its minimum size.
      */
-    collapse(id) {
-      send({ type: "COLLAPSE", id });
+    setToMinSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" });
     },
     /**
-     * Function to expand a panel.
+     * Function to set a panel to its maximum size.
      */
-    expand(id) {
-      send({ type: "EXPAND", id });
-    },
-    /**
-     * Function to toggle a panel between collapsed and expanded.
-     */
-    toggle(id) {
-      send({ type: "TOGGLE", id });
+    setToMaxSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" });
     },
     /**
      * Function to set the size of a panel.
      */
     setSize(id, size) {
-      send({ type: "SET_SIZE", id, size });
+      send({ type: "SET_PANEL_SIZE", id, size });
     },
     /**
      * Returns the state details for a resize trigger.
@@ -170,13 +167,13 @@ function connect(state, send, normalize) {
       const { id, disabled } = props;
       const ids = id.split(":");
       const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
-      const panels = getHandleBounds(state.context, id);
+      const panels2 = getHandleBounds(state.context, id);
       return {
         isDisabled: !!disabled,
         isFocused: state.context.activeResizeId === id && isFocused,
         panelIds,
-        min: panels?.min,
-        max: panels?.max,
+        min: panels2?.min,
+        max: panels2?.max,
         value: 0
       };
     },
@@ -203,14 +200,6 @@ function connect(state, send, normalize) {
         style: dom.getPanelStyle(state.context, id)
       });
     },
-    // toggleTriggerProps: normalize.element({
-    //   ...parts.toggleButton.attrs,
-    //   id: dom.getToggleButtonId(state.context),
-    //   "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
-    //   onClick() {
-    //     send("TOGGLE")
-    //   },
-    // }),
     getResizeTriggerProps(props) {
       const { id, disabled, step = 1 } = props;
       const triggerState = api.getResizeTriggerState(props);

package/dist/splitter.connect.mjs

@@ -1,9 +1,9 @@
 import {
   connect
-} from "./chunk-FCVFZHPC.mjs";
+} from "./chunk-2ZKYBJFK.mjs";
 import "./chunk-HPRMFGOY.mjs";
 import "./chunk-3GDOPT5W.mjs";
-import "./chunk-MV44GBQY.mjs";
+import "./chunk-MXEXJMQ6.mjs";
 export {
   connect
 };

package/dist/splitter.machine.js

@@ -96,7 +96,7 @@ function getNormalizedPanels(ctx) {
   let totalSize = 0;
   let totalMinSize = 0;
   const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 10;
+    const minSize = panel.minSize ?? 0;
     const maxSize = panel.maxSize ?? 100;
     totalMinSize += minSize;
     if (panel.size == null) {
@@ -235,21 +235,9 @@ function machine(userContext) {
         panels: (ctx2) => getNormalizedPanels(ctx2)
       },
       on: {
-        COLLAPSE: {
-          actions: "setStartPanelToMin"
-        },
-        EXPAND: {
-          actions: "setStartPanelToMax"
-        },
-        TOGGLE: [
-          {
-            guard: "isStartPanelAtMin",
-            actions: "setStartPanelToMax"
-          },
-          {
-            actions: "setStartPanelToMin"
-          }
-        ]
+        SET_PANEL_SIZE: {
+          actions: "setPanelSize"
+        }
       },
       states: {
         idle: {
@@ -396,6 +384,13 @@ function machine(userContext) {
             size: panel.size
           }));
         },
+        setPanelSize(ctx2, evt) {
+          const { id, size } = evt;
+          ctx2.size = ctx2.size.map((panel) => {
+            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
+            return panel.id === id ? { ...panel, size: panelSize } : panel;
+          });
+        },
         setStartPanelToMin(ctx2) {
           const bounds = getPanelBounds(ctx2);
           if (!bounds)

package/dist/splitter.machine.mjs

@@ -1,8 +1,8 @@
 import {
   machine
-} from "./chunk-64C2WGI5.mjs";
+} from "./chunk-E3EBKL5P.mjs";
 import "./chunk-3GDOPT5W.mjs";
-import "./chunk-MV44GBQY.mjs";
+import "./chunk-MXEXJMQ6.mjs";
 export {
   machine
 };

package/dist/splitter.utils.js

@@ -37,7 +37,7 @@ function getNormalizedPanels(ctx) {
   let totalSize = 0;
   let totalMinSize = 0;
   const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 10;
+    const minSize = panel.minSize ?? 0;
     const maxSize = panel.maxSize ?? 100;
     totalMinSize += minSize;
     if (panel.size == null) {

package/dist/splitter.utils.mjs

@@ -4,7 +4,7 @@ import {
   getHandlePanels,
   getNormalizedPanels,
   getPanelBounds
-} from "./chunk-MV44GBQY.mjs";
+} from "./chunk-MXEXJMQ6.mjs";
 export {
   clamp,
   getHandleBounds,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Core logic for the splitter widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,13 +28,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.10.0",
-    "@zag-js/core": "0.10.0",
-    "@zag-js/types": "0.10.0",
-    "@zag-js/dom-query": "0.10.0",
-    "@zag-js/dom-event": "0.10.0",
-    "@zag-js/number-utils": "0.10.0",
-    "@zag-js/utils": "0.10.0"
+    "@zag-js/anatomy": "0.10.2",
+    "@zag-js/core": "0.10.2",
+    "@zag-js/types": "0.10.2",
+    "@zag-js/dom-query": "0.10.2",
+    "@zag-js/dom-event": "0.10.2",
+    "@zag-js/number-utils": "0.10.2",
+    "@zag-js/utils": "0.10.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/splitter.connect.ts

@@ -10,6 +10,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const isHorizontal = state.context.isHorizontal
   const isFocused = state.hasTag("focus")
   const isDragging = state.matches("dragging")
+  const panels = state.context.panels
 
   const api = {
     /**
@@ -25,28 +26,24 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
      */
     bounds: getHandleBounds(state.context),
     /**
-     * Function to collapse a panel.
+     * Function to set a panel to its minimum size.
      */
-    collapse(id: PanelId) {
-      send({ type: "COLLAPSE", id })
+    setToMinSize(id: PanelId) {
+      const panel = panels.find((panel) => panel.id === id)
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" })
     },
     /**
-     * Function to expand a panel.
+     * Function to set a panel to its maximum size.
      */
-    expand(id: PanelId) {
-      send({ type: "EXPAND", id })
-    },
-    /**
-     * Function to toggle a panel between collapsed and expanded.
-     */
-    toggle(id: PanelId) {
-      send({ type: "TOGGLE", id })
+    setToMaxSize(id: PanelId) {
+      const panel = panels.find((panel) => panel.id === id)
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" })
     },
     /**
      * Function to set the size of a panel.
      */
     setSize(id: PanelId, size: number) {
-      send({ type: "SET_SIZE", id, size })
+      send({ type: "SET_PANEL_SIZE", id, size })
     },
     /**
      * Returns the state details for a resize trigger.
@@ -92,15 +89,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    // toggleTriggerProps: normalize.element({
-    //   ...parts.toggleButton.attrs,
-    //   id: dom.getToggleButtonId(state.context),
-    //   "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
-    //   onClick() {
-    //     send("TOGGLE")
-    //   },
-    // }),
-
     getResizeTriggerProps(props: ResizeTriggerProps) {
       const { id, disabled, step = 1 } = props
       const triggerState = api.getResizeTriggerState(props)

package/src/splitter.machine.ts

@@ -37,21 +37,9 @@ export function machine(userContext: UserDefinedContext) {
       },
 
       on: {
-        COLLAPSE: {
-          actions: "setStartPanelToMin",
+        SET_PANEL_SIZE: {
+          actions: "setPanelSize",
         },
-        EXPAND: {
-          actions: "setStartPanelToMax",
-        },
-        TOGGLE: [
-          {
-            guard: "isStartPanelAtMin",
-            actions: "setStartPanelToMax",
-          },
-          {
-            actions: "setStartPanelToMin",
-          },
-        ],
       },
       states: {
         idle: {
@@ -202,6 +190,13 @@ export function machine(userContext: UserDefinedContext) {
             size: panel.size,
           }))
         },
+        setPanelSize(ctx, evt) {
+          const { id, size } = evt
+          ctx.size = ctx.size.map((panel) => {
+            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100)
+            return panel.id === id ? { ...panel, size: panelSize } : panel
+          })
+        },
         setStartPanelToMin(ctx) {
           const bounds = getPanelBounds(ctx)
           if (!bounds) return

package/src/splitter.utils.ts

@@ -12,7 +12,7 @@ export function getNormalizedPanels(ctx: Ctx): NormalizedPanelData {
   let totalMinSize = 0
 
   const panels = ctx.size.map((panel) => {
-    const minSize = panel.minSize ?? 10
+    const minSize = panel.minSize ?? 0
     const maxSize = panel.maxSize ?? 100
 
     totalMinSize += minSize