Merge branch 'main' of https://github.com/chakra-ui/zag into cascader

.xstate/collapsible.js

@@ -40,7 +40,7 @@ const fetchMachine = createMachine({
     },
     closing: {
       tags: ["open"],
-      activities: ["trackAnimationEvents"],
+      activities: ["trackExitAnimation"],
       on: {
         "CONTROLLED.CLOSE": "closed",
         "CONTROLLED.OPEN": "open",
@@ -60,12 +60,13 @@ const fetchMachine = createMachine({
         }],
         "ANIMATION.END": {
           target: "closed",
-          actions: ["invokeOnExitComplete"]
+          actions: ["invokeOnExitComplete", "clearInitial"]
         }
       }
     },
     open: {
       tags: ["open"],
+      activities: ["trackEnterAnimation"],
       on: {
         "CONTROLLED.CLOSE": "closing",
         CLOSE: [{
@@ -77,6 +78,9 @@ const fetchMachine = createMachine({
         }],
         "SIZE.MEASURE": {
           actions: ["measureSize"]
+        },
+        "ANIMATION.END": {
+          actions: ["clearInitial"]
         }
       }
     }

CHANGELOG.md

@@ -6,6 +6,22 @@ All notable changes to this project will be documented in this file.
 
 See the [Changesets](./.changeset) for the latest changes.
 
+## [0.79.2](./#0.79.2) - 2024-12-29
+
+### Fixed
+
+- **Dialog, Popover**: Fix issue where dialog or popover closes when the focused element is removed from the DOM.
+
+- **Collapsible**: Fix issue where re-rendering an open collapsible causes a replay of the opening animation
+
+- **Focus Trap**: Clean up `requestAnimationFrame` properly to avoid memory leaks.
+
+## [0.79.1](./#0.79.1) - 2024-12-27
+
+### Fixed
+
+- **Carousel**: Exported misising `Orientation` type
+
 ## [0.79.0](./#0.79.0) - 2024-12-22
 
 ### Changed

examples/lit-ts/package.json

@@ -90,12 +90,12 @@
     "@zag-js/utils": "workspace:*",
     "form-serialize": "0.7.2",
     "lit": "^3.2.0",
-    "lucide-react": "0.462.0",
+    "lucide-react": "0.469.0",
     "match-sorter": "8.0.0",
     "textarea-caret": "^3.1.0"
   },
   "devDependencies": {
     "typescript": "^5.7.2",
-    "vite": "^6.0.4"
+    "vite": "^6.0.5"
   }
 }

examples/next-ts/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

examples/next-ts/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@internationalized/date": "3.6.0",
-    "@tanstack/react-virtual": "3.10.9",
+    "@tanstack/react-virtual": "3.11.2",
     "@types/textarea-caret": "3.0.3",
     "@zag-js/accordion": "workspace:*",
     "@zag-js/anatomy": "workspace:*",
@@ -90,9 +90,9 @@
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*",
     "form-serialize": "0.7.2",
-    "lucide-react": "0.462.0",
+    "lucide-react": "0.469.0",
     "match-sorter": "8.0.0",
-    "next": "15.0.3",
+    "next": "15.1.2",
     "next-cloudinary": "6.13.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",

examples/next-ts/pages/collapse-multiple.tsx

@@ -0,0 +1,70 @@
+import * as collapsible from "@zag-js/collapsible"
+import { normalizeProps, useMachine } from "@zag-js/react"
+import { memo, useId, useRef, useState } from "react"
+
+const Collapse = memo((props: { value: number; open: boolean }) => {
+  const { open, value } = props
+  const ref = useRef(0)
+
+  const [state, send] = useMachine(
+    collapsible.machine({
+      id: useId(),
+      open,
+    }),
+    { context: { open } },
+  )
+
+  const api = collapsible.connect(state, send, normalizeProps)
+
+  ref.current++
+
+  return (
+    <div {...api.getRootProps()}>
+      <div {...api.getContentProps()}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minWidth: "400px",
+            height: "64px",
+            backgroundColor: "lightgray",
+          }}
+        >
+          {value} {ref.current}
+        </div>
+      </div>
+      <div>{state.context.initial.toString()}</div>
+    </div>
+  )
+})
+
+const CollapseMultiple = () => {
+  const [list, setList] = useState([1, 2, 3])
+  const [open, setOpen] = useState(true)
+  return (
+    <main>
+      <div style={{ display: "flex", gap: "10px" }}>
+        {list.map((value) => (
+          <Collapse key={value} value={value} open={open} />
+        ))}
+      </div>
+      <pre>
+        list:{list.toString()}; open: {open.toString()}
+      </pre>
+
+      <div>
+        <button
+          onClick={() => {
+            setList([...list].reverse())
+          }}
+        >
+          reverse
+        </button>
+        <button onClick={() => setOpen(!open)}>toggle collapse</button>
+      </div>
+    </main>
+  )
+}
+
+export default CollapseMultiple

examples/next-ts/pages/dialog-mutation.tsx

@@ -0,0 +1,24 @@
+import * as dialog from "@zag-js/dialog"
+import { Portal, normalizeProps, useMachine } from "@zag-js/react"
+import { useState } from "react"
+
+export default function Dialog() {
+  const [nextContent, setNextContent] = useState(false)
+  const [state, send] = useMachine(dialog.machine({ id: "1" }))
+  const api = dialog.connect(state, send, normalizeProps)
+
+  return (
+    <main>
+      <button {...api.getTriggerProps()}> Click me</button>
+      <Portal>
+        <div {...api.getBackdropProps()} />
+        <div {...api.getPositionerProps()}>
+          <div {...api.getContentProps()}>
+            {!nextContent && <button onClick={() => setNextContent(true)}>Set next content</button>}
+            {nextContent && <button onClick={() => setNextContent(false)}>Set previous content</button>}
+          </div>
+        </div>
+      </Portal>
+    </main>
+  )
+}

examples/nuxt-ts/package.json

@@ -88,7 +88,7 @@
     "@zag-js/vue": "workspace:*",
     "epic-spinners": "2.0.0",
     "form-serialize": "0.7.2",
-    "lucide-vue-next": "0.462.0",
+    "lucide-vue-next": "0.469.0",
     "match-sorter": "8.0.0",
     "vue": "3.5.13",
     "vue-router": "4.4.5"

examples/preact-ts/package.json

@@ -85,17 +85,17 @@
     "@zag-js/tree-view": "workspace:*",
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*",
-    "lucide-preact": "0.462.0",
+    "lucide-preact": "0.469.0",
     "match-sorter": "8.0.0",
-    "preact": "10.25.0",
-    "preact-iso": "2.6.3",
-    "preact-render-to-string": "6.5.11"
+    "preact": "10.25.3",
+    "preact-iso": "2.8.1",
+    "preact-render-to-string": "6.5.12"
   },
   "devDependencies": {
     "@preact/preset-vite": "2.9.2",
     "eslint": "9.13.0",
     "eslint-config-preact": "1.5.0",
     "typescript": "5.7.2",
-    "vite": "6.0.4"
+    "vite": "6.0.5"
   }
 }

examples/react-19/package.json

@@ -86,7 +86,7 @@
     "@zag-js/tree-view": "workspace:*",
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*",
-    "lucide-react": "0.462.0",
+    "lucide-react": "0.469.0",
     "react": "19.0.0-rc-b57d2823-20240822",
     "react-dom": "19.0.0-rc-b57d2823-20240822"
   },
@@ -101,6 +101,6 @@
     "globals": "^15.9.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.7.0",
-    "vite": "^6.0.4"
+    "vite": "^6.0.5"
   }
 }

examples/solid-ts/package.json

@@ -90,7 +90,7 @@
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*",
     "form-serialize": "0.7.2",
-    "lucide-solid": "0.462.0",
+    "lucide-solid": "0.469.0",
     "match-sorter": "8.0.0",
     "solid-js": "1.9.3",
     "vinxi": "0.4.3"

examples/svelte-ts/package.json

@@ -88,19 +88,19 @@
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*",
     "form-serialize": "0.7.2",
-    "lucide-svelte": "0.462.0",
+    "lucide-svelte": "0.469.0",
     "match-sorter": "8.0.0",
     "svelte-routing": "2.13.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "5.0.1",
     "@tsconfig/svelte": "5.0.4",
     "@types/form-serialize": "0.7.4",
-    "svelte": "5.14.5",
-    "svelte-check": "4.1.0",
+    "svelte": "5.15.0",
+    "svelte-check": "4.1.1",
     "tslib": "2.7.0",
     "typescript": "5.7.2",
-    "vite": "6.0.4",
-    "vite-tsconfig-paths": "5.1.3"
+    "vite": "6.0.5",
+    "vite-tsconfig-paths": "5.1.4"
   }
 }

examples/vanilla-ts/package.json

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "typescript": "^5.7.2",
-    "vite": "^6.0.4"
+    "vite": "^6.0.5"
   },
   "dependencies": {
     "@internationalized/date": "3.6.0",

package.json

@@ -65,8 +65,8 @@
     "@babel/traverse": "7.26.4",
     "@babel/types": "7.26.3",
     "@changesets/changelog-github": "0.5.0",
-    "@changesets/cli": "2.27.10",
-    "@commitlint/cli": "19.6.0",
+    "@changesets/cli": "2.27.11",
+    "@commitlint/cli": "19.6.1",
     "@commitlint/config-conventional": "19.6.0",
     "@octokit/rest": "21.0.2",
     "@playwright/test": "1.49.1",
@@ -75,20 +75,20 @@
     "@types/babel__traverse": "7.20.6",
     "@types/node": "22.10.2",
     "@types/signale": "1.4.7",
-    "@typescript-eslint/eslint-plugin": "8.18.0",
-    "@typescript-eslint/parser": "8.18.0",
+    "@typescript-eslint/eslint-plugin": "8.18.2",
+    "@typescript-eslint/parser": "8.18.2",
     "axe-core": "4.10.2",
-    "commitlint": "19.6.0",
+    "commitlint": "19.6.1",
     "cross-env": "^7.0.3",
     "dotenv": "16.4.7",
-    "eslint": "9.16.0",
+    "eslint": "9.17.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-prettier": "5.2.1",
     "fast-glob": "3.3.2",
     "find-packages": "10.0.4",
     "husky": "9.1.7",
-    "lint-staged": "15.2.10",
+    "lint-staged": "15.2.11",
     "node-fetch": "3.3.2",
     "plop": "4.0.1",
     "prettier": "3.4.2",
@@ -99,12 +99,12 @@
     "tsx": "4.19.2",
     "typescript": "5.7.2",
     "vercel-submodules": "1.0.10",
-    "vite": "6.0.4",
-    "vite-plugin-dts": "4.3.0",
+    "vite": "6.0.5",
+    "vite-plugin-dts": "4.4.0",
     "vitest": "2.1.8"
   },
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "[email protected].0"
+  "packageManager": "[email protected].1"
 }

packages/anatomy-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zag-js/anatomy-icons
 
+## 0.79.2
+
+## 0.79.1
+
+## 0.79.0
+
 ## 0.78.3
 
 ## 0.78.2

packages/anatomy-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/anatomy-icons",
-  "version": "0.78.3",
+  "version": "0.79.2",
   "keywords": [
     "ui-machines",
     "state-machines",

packages/anatomy-icons/scripts/generate.mjs

@@ -39,7 +39,7 @@ const svgCode = html`
 `
 
 /* -----------------------------------------------------------------------------
- * Implmentation
+ * Implementation
  * -----------------------------------------------------------------------------*/
 
 function toDashCase(str) {

packages/anatomy/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zag-js/anatomy
 
+## 0.79.2
+
+## 0.79.1
+
+## 0.79.0
+
 ## 0.78.3
 
 ## 0.78.2