@zag-js/splitter 1.3.3 → 1.4.0

package/dist/index.d.mts

@@ -142,6 +142,14 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
      * Function to set the size of a panel.
      */
     setSize(id: PanelId, size: number): void;
+    /**
+     * Function to set the size of multiple panels.
+     */
+    setSizes(sizes: PanelSizeData[]): void;
+    /**
+     * Returns the size of a panel.
+     */
+    getSize(id: PanelId): number;
     /**
      * Returns the state details for a resize trigger.
      */

package/dist/index.d.ts

@@ -142,6 +142,14 @@ interface SplitterApi<T extends PropTypes = PropTypes> {
      * Function to set the size of a panel.
      */
     setSize(id: PanelId, size: number): void;
+    /**
+     * Function to set the size of multiple panels.
+     */
+    setSizes(sizes: PanelSizeData[]): void;
+    /**
+     * Returns the size of a panel.
+     */
+    getSize(id: PanelId): number;
     /**
      * Returns the state details for a resize trigger.
      */

package/dist/index.js

@@ -2,8 +2,8 @@
 
 var anatomy$1 = require('@zag-js/anatomy');
 var domQuery = require('@zag-js/dom-query');
-var core = require('@zag-js/core');
 var utils = require('@zag-js/utils');
+var core = require('@zag-js/core');
 var types = require('@zag-js/types');
 
 // src/splitter.anatomy.ts
@@ -189,14 +189,22 @@ function connect(service, normalize) {
     bounds: getHandleBounds(computed("panels"), activeResizeId),
     setToMinSize(id) {
       const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" });
+      send({ type: "SIZE.SET", id, size: panel?.minSize, src: "setToMinSize" });
     },
     setToMaxSize(id) {
       const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" });
+      send({ type: "SIZE.SET", id, size: panel?.maxSize, src: "setToMaxSize" });
     },
     setSize(id, size) {
-      send({ type: "SET_PANEL_SIZE", id, size });
+      send({ type: "SIZE.SET", id, size });
+    },
+    setSizes(sizes) {
+      send({ type: "SIZES.SET", sizes });
+    },
+    getSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      utils.ensure(panel, `Panel with id ${id} not found`);
+      return panel.size;
     },
     getRootProps() {
       return normalize.element({
@@ -376,8 +384,11 @@ var machine = core.createMachine({
     panels: ({ context }) => getNormalizedPanels(context.get("size"))
   },
   on: {
-    SET_PANEL_SIZE: {
+    "SIZE.SET": {
       actions: ["setPanelSize"]
+    },
+    "SIZES.SET": {
+      actions: ["setPanelSizes"]
     }
   },
   states: {
@@ -545,6 +556,9 @@ var machine = core.createMachine({
           })
         );
       },
+      setPanelSizes({ context, event }) {
+        context.set("size", event.sizes);
+      },
       setStartPanelToMin({ context, computed }) {
         const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
         if (!bounds) return;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { getRelativePoint, raf, trackPointerMove, dataAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
+import { setRafTimeout, createSplitProps, ensure } from '@zag-js/utils';
 import { createMachine } from '@zag-js/core';
-import { setRafTimeout, createSplitProps } from '@zag-js/utils';
 import { createProps } from '@zag-js/types';
 
 // src/splitter.anatomy.ts
@@ -187,14 +187,22 @@ function connect(service, normalize) {
     bounds: getHandleBounds(computed("panels"), activeResizeId),
     setToMinSize(id) {
       const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" });
+      send({ type: "SIZE.SET", id, size: panel?.minSize, src: "setToMinSize" });
     },
     setToMaxSize(id) {
       const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" });
+      send({ type: "SIZE.SET", id, size: panel?.maxSize, src: "setToMaxSize" });
     },
     setSize(id, size) {
-      send({ type: "SET_PANEL_SIZE", id, size });
+      send({ type: "SIZE.SET", id, size });
+    },
+    setSizes(sizes) {
+      send({ type: "SIZES.SET", sizes });
+    },
+    getSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      ensure(panel, `Panel with id ${id} not found`);
+      return panel.size;
     },
     getRootProps() {
       return normalize.element({
@@ -374,8 +382,11 @@ var machine = createMachine({
     panels: ({ context }) => getNormalizedPanels(context.get("size"))
   },
   on: {
-    SET_PANEL_SIZE: {
+    "SIZE.SET": {
       actions: ["setPanelSize"]
+    },
+    "SIZES.SET": {
+      actions: ["setPanelSizes"]
     }
   },
   states: {
@@ -543,6 +554,9 @@ var machine = createMachine({
           })
         );
       },
+      setPanelSizes({ context, event }) {
+        context.set("size", event.sizes);
+      },
       setStartPanelToMin({ context, computed }) {
         const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
         if (!bounds) return;

package/package.json

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