@zag-js/collapsible - npm Package Compare versions

Comparing version 0.0.0-dev-20240225083948 to 0.0.0-dev-20240226122439

dist/index.d.ts

@@ -22,2 +22,6 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
     /**
+     * Function called when the animation ends in the closed state.
+     */
+    onExitComplete?: () => void;
+    /**
      * Function called when the popup is opened
@@ -80,5 +84,5 @@ */
 
-declare const props: ("dir" | "open" | "disabled" | "id" | "ids" | "onOpenChange" | "open.controlled" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "open" | "disabled" | "id" | "ids" | "onOpenChange" | "open.controlled" | "getRootNode">];
+declare const props: ("dir" | "open" | "disabled" | "id" | "ids" | "onExitComplete" | "onOpenChange" | "open.controlled" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "open" | "disabled" | "id" | "ids" | "onExitComplete" | "onOpenChange" | "open.controlled" | "getRootNode">];
 
 export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, anatomy, connect, machine, props, splitProps };

dist/index.js

@@ -149,3 +149,6 @@ "use strict";
           on: {
-            "CONTROLLED.CLOSE": "closed",
+            "CONTROLLED.CLOSE": {
+              target: "closed",
+              actions: ["invokeOnExitComplete"]
+            },
             "CONTROLLED.OPEN": "open",
@@ -169,6 +172,9 @@ OPEN: [
                 target: "closed",
-                actions: ["allowAnimation", "computeSize"]
+                actions: ["allowAnimation", "computeSize", "invokeOnExitComplete"]
               }
             ],
-            "ANIMATION.END": "closed"
+            "ANIMATION.END": {
+              target: "closed",
+              actions: ["invokeOnExitComplete"]
+            }
           }
@@ -265,2 +271,5 @@ },
         },
+        invokeOnExitComplete(ctx2) {
+          ctx2.onExitComplete?.();
+        },
         toggleVisibility: (ctx2, _evt, { send }) => {
@@ -283,2 +292,3 @@ send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" });
   "ids",
+  "onExitComplete",
   "onOpenChange",
@@ -285,0 +295,0 @@ "open.controlled",

package.json

 {
   "name": "@zag-js/collapsible",
-  "version": "0.0.0-dev-20240225083948",
+  "version": "0.0.0-dev-20240226122439",
   "description": "Core logic for the collapsible widget implemented as a state machine",
@@ -31,7 +31,7 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "0.0.0-dev-20240225083948",
-    "@zag-js/core": "0.0.0-dev-20240225083948",
-    "@zag-js/dom-query": "0.0.0-dev-20240225083948",
-    "@zag-js/utils": "0.0.0-dev-20240225083948",
-    "@zag-js/types": "0.0.0-dev-20240225083948"
+    "@zag-js/anatomy": "0.0.0-dev-20240226122439",
+    "@zag-js/core": "0.0.0-dev-20240226122439",
+    "@zag-js/dom-query": "0.0.0-dev-20240226122439",
+    "@zag-js/utils": "0.0.0-dev-20240226122439",
+    "@zag-js/types": "0.0.0-dev-20240226122439"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

src/collapsible.machine.ts

@@ -54,3 +54,6 @@ import { createMachine, ref } from "@zag-js/core"
           on: {
-            "CONTROLLED.CLOSE": "closed",
+            "CONTROLLED.CLOSE": {
+              target: "closed",
+              actions: ["invokeOnExitComplete"],
+            },
             "CONTROLLED.OPEN": "open",
@@ -74,9 +77,11 @@ OPEN: [
                 target: "closed",
-                actions: ["allowAnimation", "computeSize"],
+                actions: ["allowAnimation", "computeSize", "invokeOnExitComplete"],
               },
             ],
-            "ANIMATION.END": "closed",
+            "ANIMATION.END": {
+              target: "closed",
+              actions: ["invokeOnExitComplete"],
+            },
           },
         },
-
         open: {
@@ -183,2 +188,5 @@ tags: ["open"],
         },
+        invokeOnExitComplete(ctx) {
+          ctx.onExitComplete?.()
+        },
         toggleVisibility: (ctx, _evt, { send }) => {
@@ -185,0 +193,0 @@ send({ type: ctx.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" })

src/collapsible.props.ts

@@ -11,2 +11,3 @@ import { createProps } from "@zag-js/types"
   "ids",
+  "onExitComplete",
   "onOpenChange",
@@ -13,0 +14,0 @@ "open.controlled",

src/collapsible.types.ts

@@ -28,2 +28,6 @@ import type { StateMachine as S } from "@zag-js/core"
   /**
+   * Function called when the animation ends in the closed state.
+   */
+  onExitComplete?: () => void
+  /**
    * Function called when the popup is opened
@@ -30,0 +34,0 @@ */

No alert changes

Improved metrics

Total package byte prevSize

68621

increased by3.49%

Lines of code

1011

increased by3.91%

Dependency changes

• + Added@zag-js/anatomy@0.0.0-dev-20240226122439(transitive)

• + Added@zag-js/core@0.0.0-dev-20240226122439(transitive)

• + Added@zag-js/dom-query@0.0.0-dev-20240226122439(transitive)

• + Added@zag-js/store@0.0.0-dev-20240226122439(transitive)

• + Added@zag-js/types@0.0.0-dev-20240226122439(transitive)

• + Added@zag-js/utils@0.0.0-dev-20240226122439(transitive)

• - Removed@zag-js/anatomy@0.0.0-dev-20240225083948(transitive)

• - Removed@zag-js/core@0.0.0-dev-20240225083948(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20240225083948(transitive)

• - Removed@zag-js/store@0.0.0-dev-20240225083948(transitive)

• - Removed@zag-js/types@0.0.0-dev-20240225083948(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20240225083948(transitive)

• Updated@zag-js/anatomy@0.0.0-dev-20240226122439

• Updated@zag-js/core@0.0.0-dev-20240226122439

• Updated@zag-js/dom-query@0.0.0-dev-20240226122439

• Updated@zag-js/types@0.0.0-dev-20240226122439

• Updated@zag-js/utils@0.0.0-dev-20240226122439