@zag-js/splitter 0.10.0 → 0.10.1

package/dist/{chunk-FCVFZHPC.mjs → chunk-53T2VZ2R.mjs}

@@ -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,22 +30,18 @@ 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_SIZE", id, size: panel?.minSize, src: "collapse" });
     },
     /**
-     * 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_SIZE", id, size: panel?.maxSize, src: "expand" });
     },
     /**
      * Function to set the size of a panel.
@@ -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-X2E2LAC5.mjs}

@@ -55,7 +55,10 @@ function machine(userContext) {
           {
             actions: "setStartPanelToMin"
           }
-        ]
+        ],
+        SET_SIZE: {
+          actions: "setPanelSize"
+        }
       },
       states: {
         idle: {
@@ -202,6 +205,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.js

@@ -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,22 +234,18 @@ 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_SIZE", id, size: panel?.minSize, src: "collapse" });
     },
     /**
-     * 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_SIZE", id, size: panel?.maxSize, src: "expand" });
     },
     /**
      * Function to set the size of a panel.
@@ -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);
@@ -446,7 +435,10 @@ function machine(userContext) {
           {
             actions: "setStartPanelToMin"
           }
-        ]
+        ],
+        SET_SIZE: {
+          actions: "setPanelSize"
+        }
       },
       states: {
         idle: {
@@ -593,6 +585,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,12 +1,12 @@
 import {
   connect
-} from "./chunk-FCVFZHPC.mjs";
+} from "./chunk-53T2VZ2R.mjs";
 import {
   anatomy
 } from "./chunk-HPRMFGOY.mjs";
 import {
   machine
-} from "./chunk-64C2WGI5.mjs";
+} from "./chunk-X2E2LAC5.mjs";
 import "./chunk-3GDOPT5W.mjs";
 import "./chunk-MV44GBQY.mjs";
 export {

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,22 +141,18 @@ 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_SIZE", id, size: panel?.minSize, src: "collapse" });
     },
     /**
-     * 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_SIZE", id, size: panel?.maxSize, src: "expand" });
     },
     /**
      * Function to set the size of a panel.
@@ -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,6 +1,6 @@
 import {
   connect
-} from "./chunk-FCVFZHPC.mjs";
+} from "./chunk-53T2VZ2R.mjs";
 import "./chunk-HPRMFGOY.mjs";
 import "./chunk-3GDOPT5W.mjs";
 import "./chunk-MV44GBQY.mjs";

package/dist/splitter.machine.js

@@ -249,7 +249,10 @@ function machine(userContext) {
           {
             actions: "setStartPanelToMin"
           }
-        ]
+        ],
+        SET_SIZE: {
+          actions: "setPanelSize"
+        }
       },
       states: {
         idle: {
@@ -396,6 +399,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,6 +1,6 @@
 import {
   machine
-} from "./chunk-64C2WGI5.mjs";
+} from "./chunk-X2E2LAC5.mjs";
 import "./chunk-3GDOPT5W.mjs";
 import "./chunk-MV44GBQY.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "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.1",
+    "@zag-js/core": "0.10.1",
+    "@zag-js/types": "0.10.1",
+    "@zag-js/dom-query": "0.10.1",
+    "@zag-js/dom-event": "0.10.1",
+    "@zag-js/number-utils": "0.10.1",
+    "@zag-js/utils": "0.10.1"
   },
   "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,22 +26,18 @@ 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_SIZE", id, size: panel?.minSize, src: "collapse" })
     },
     /**
-     * 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_SIZE", id, size: panel?.maxSize, src: "expand" })
     },
     /**
      * Function to set the size of a panel.
@@ -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

@@ -52,6 +52,9 @@ export function machine(userContext: UserDefinedContext) {
             actions: "setStartPanelToMin",
           },
         ],
+        SET_SIZE: {
+          actions: "setPanelSize",
+        },
       },
       states: {
         idle: {
@@ -202,6 +205,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