chakra-ui · segunadebayo · Sep 13, 2023 · Sep 12, 2023 · Sep 12, 2023 · Sep 12, 2023
diff --git a/.changeset/selfish-windows-warn.md b/.changeset/selfish-windows-warn.md
@@ -0,0 +1,33 @@
+---
+"@zag-js/color-picker": minor
+"@zag-js/number-input": minor
+"@zag-js/range-slider": minor
+"@zag-js/rating-group": minor
+"@zag-js/toggle-group": minor
+"@zag-js/date-picker": minor
+"@zag-js/file-upload": minor
+"@zag-js/radio-group": minor
+"@zag-js/hover-card": minor
+"@zag-js/pagination": minor
+"@zag-js/tags-input": minor
+"@zag-js/accordion": minor
+"@zag-js/pin-input": minor
+"@zag-js/carousel": minor
+"@zag-js/checkbox": minor
+"@zag-js/combobox": minor
+"@zag-js/editable": minor
+"@zag-js/presence": minor
+"@zag-js/splitter": minor
+"@zag-js/popover": minor
+"@zag-js/tooltip": minor
+"@zag-js/avatar": minor
+"@zag-js/dialog": minor
+"@zag-js/select": minor
+"@zag-js/slider": minor
+"@zag-js/switch": minor
+"@zag-js/menu": minor
+"@zag-js/tabs": minor
+"@zag-js/types": minor
+---
+
+BREAKING: Unify all callbacks to follow a consistent naming convention
diff --git a/.xstate/date-picker.js b/.xstate/date-picker.js
@@ -101,7 +101,7 @@ const fetchMachine = createMachine({
         },
         "TRIGGER.CLICK": {
           target: "open",
-          actions: ["focusFirstSelectedDate"]
+          actions: ["focusFirstSelectedDate", "invokeOnOpen"]
         }
       }
     },
@@ -110,7 +110,7 @@ const fetchMachine = createMachine({
       on: {
         "TRIGGER.CLICK": {
           target: "open",
-          actions: ["setViewToDay", "focusFirstSelectedDate"]
+          actions: ["setViewToDay", "focusFirstSelectedDate", "invokeOnOpen"]
         },
         "INPUT.CHANGE": {
           actions: ["focusParsedDate"]
@@ -123,7 +123,7 @@ const fetchMachine = createMachine({
         },
         "CELL.FOCUS": {
           target: "open",
-          actions: ["setView"]
+          actions: ["setView", "invokeOnOpen"]
         }
       }
     },
@@ -153,7 +153,7 @@ const fetchMachine = createMachine({
         }, {
           target: "focused",
           cond: "isRangePicker && isSelectingEndDate",
-          actions: ["setFocusedDate", "setSelectedDate", "setStartIndex", "clearHoveredDate", "focusInputElement"]
+          actions: ["setFocusedDate", "setSelectedDate", "setStartIndex", "clearHoveredDate", "focusInputElement", "invokeOnClose"]
         },
         // ===
         {
@@ -169,7 +169,7 @@ const fetchMachine = createMachine({
           actions: ["setFocusedDate", "setSelectedDate"]
         }, {
           target: "focused",
-          actions: ["setFocusedDate", "setSelectedDate", "focusInputElement"]
+          actions: ["setFocusedDate", "setSelectedDate", "focusInputElement", "invokeOnClose"]
         }
         // ===
         ],
@@ -193,7 +193,7 @@ const fetchMachine = createMachine({
         "GRID.ESCAPE": {
           cond: "!isInline",
           target: "focused",
-          actions: ["setViewToDay", "focusFirstSelectedDate", "focusTriggerElement"]
+          actions: ["setViewToDay", "focusFirstSelectedDate", "focusTriggerElement", "invokeOnClose"]
         },
         "GRID.ENTER": [{
           cond: "isMonthView",
@@ -212,7 +212,7 @@ const fetchMachine = createMachine({
         }, {
           target: "focused",
           cond: "isRangePicker && isSelectingEndDate",
-          actions: ["setSelectedDate", "setStartIndex", "focusInputElement"]
+          actions: ["setSelectedDate", "setStartIndex", "focusInputElement", "invokeOnClose"]
         },
         // ===
         {
@@ -228,7 +228,7 @@ const fetchMachine = createMachine({
           actions: ["selectFocusedDate"]
         }, {
           target: "focused",
-          actions: ["selectFocusedDate", "focusInputElement"]
+          actions: ["selectFocusedDate", "focusInputElement", "invokeOnClose"]
         }
         // ===
         ],
@@ -294,7 +294,8 @@ const fetchMachine = createMachine({
           actions: ["focusSectionEnd"]
         }],
         "TRIGGER.CLICK": {
-          target: "focused"
+          target: "focused",
+          actions: ["invokeOnClose"]
         },
         "VIEW.CHANGE": [{
           cond: "isDayView",
@@ -306,10 +307,10 @@ const fetchMachine = createMachine({
         DISMISS: [{
           cond: "isTargetFocusable",
           target: "idle",
-          actions: ["setStartIndex"]
+          actions: ["setStartIndex", "invokeOnClose"]
         }, {
           target: "focused",
-          actions: ["focusTriggerElement", "setStartIndex"]
+          actions: ["focusTriggerElement", "setStartIndex", "invokeOnClose"]
         }]
       }
     }

diff --git a/.xstate/editable.js b/.xstate/editable.js
@@ -12,6 +12,7 @@ const {
 const fetchMachine = createMachine({
   id: "editable",
   initial: ctx.startWithEditView ? "edit" : "preview",
+  entry: ctx.startWithEditView ? ["focusInput"] : undefined,
   context: {
     "activateOnDblClick": false,
     "activateOnFocus": false,

diff --git a/.xstate/tags-input.js b/.xstate/tags-input.js
@@ -14,24 +14,23 @@ const fetchMachine = createMachine({
   initial: ctx.autoFocus ? "focused:input" : "idle",
   context: {
     "allowEditTag": false,
-    "!isTagFocused": false,
+    "!isTagHighlighted": false,
     "(!isAtMax || allowOverflow) && !isInputValueEmpty": false,
     "addOnBlur": false,
     "clearOnBlur": false,
-    "!hasFocusedId": false,
+    "!hasHighlightedTag": false,
     "addOnBlur": false,
     "clearOnBlur": false,
     "hasTags && isInputCaretAtStart": false,
     "hasTags && isInputCaretAtStart": false,
     "addOnPaste": false,
-    "hasTags && isInputCaretAtStart && !isLastTagFocused": false,
-    "allowEditTag && hasFocusedId": false,
-    "isFirstTagFocused": false,
+    "hasTags && isInputCaretAtStart && !isLastTagHighlighted": false,
+    "allowEditTag && hasHighlightedTag": false,
+    "isFirstTagHighlighted": false,
     "isInputRelatedTarget": false
   },
-  activities: ["trackFormControlState"],
-  entry: ["setupLiveRegion"],
-  exit: ["removeLiveRegion", "clearLog"],
+  activities: ["trackLiveRegion", "trackFormControlState"],
+  exit: ["clearLog"],
   on: {
     DOUBLE_CLICK_TAG: {
       internal: true,
@@ -41,9 +40,9 @@ const fetchMachine = createMachine({
     },
     POINTER_DOWN_TAG: {
       internal: true,
-      cond: "!isTagFocused",
+      cond: "!isTagHighlighted",
       target: "navigating:tag",
-      actions: ["focusTag", "focusInput"]
+      actions: ["highlightTag", "focusInput"]
     },
     SET_INPUT_VALUE: {
       actions: ["setInputValue"]
@@ -83,14 +82,14 @@ const fetchMachine = createMachine({
       on: {
         FOCUS: "focused:input",
         POINTER_DOWN: {
-          cond: "!hasFocusedId",
+          cond: "!hasHighlightedTag",
           target: "focused:input"
         }
       }
     },
     "focused:input": {
       tags: ["focused"],
-      entry: ["focusInput", "clearFocusedId"],
+      entry: ["focusInput", "clearHighlightedId"],
       activities: ["trackInteractOutside"],
       on: {
         TYPE: {
@@ -116,12 +115,12 @@ const fetchMachine = createMachine({
         ARROW_LEFT: {
           cond: "hasTags && isInputCaretAtStart",
           target: "navigating:tag",
-          actions: "focusLastTag"
+          actions: "highlightLastTag"
         },
         BACKSPACE: {
           target: "navigating:tag",
           cond: "hasTags && isInputCaretAtStart",
-          actions: "focusLastTag"
+          actions: "highlightLastTag"
         },
         PASTE: {
           cond: "addOnPaste",
@@ -134,20 +133,20 @@ const fetchMachine = createMachine({
       activities: ["trackInteractOutside"],
       on: {
         ARROW_RIGHT: [{
-          cond: "hasTags && isInputCaretAtStart && !isLastTagFocused",
-          actions: "focusNextTag"
+          cond: "hasTags && isInputCaretAtStart && !isLastTagHighlighted",
+          actions: "highlightNextTag"
         }, {
           target: "focused:input"
         }],
         ARROW_LEFT: {
-          actions: "focusPrevTag"
+          actions: "highlightPrevTag"
         },
         BLUR: {
           target: "idle",
-          actions: "clearFocusedId"
+          actions: "clearHighlightedId"
         },
         ENTER: {
-          cond: "allowEditTag && hasFocusedId",
+          cond: "allowEditTag && hasHighlightedTag",
           target: "editing:tag",
           actions: ["setEditedId", "initializeEditedTagValue", "focusEditedTagInput"]
         },
@@ -158,13 +157,13 @@ const fetchMachine = createMachine({
           actions: "setInputValue"
         },
         BACKSPACE: [{
-          cond: "isFirstTagFocused",
-          actions: ["deleteFocusedTag", "focusFirstTag"]
+          cond: "isFirstTagHighlighted",
+          actions: ["deleteHighlightedTag", "highlightFirstTag"]
         }, {
-          actions: ["deleteFocusedTag", "focusPrevTag"]
+          actions: ["deleteHighlightedTag", "highlightPrevTag"]
         }],
         DELETE: {
-          actions: ["deleteFocusedTag", "focusTagAtIndex"]
+          actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
         }
       }
     },
@@ -178,19 +177,19 @@ const fetchMachine = createMachine({
         },
         TAG_INPUT_ESCAPE: {
           target: "navigating:tag",
-          actions: ["clearEditedTagValue", "focusInput", "clearEditedId", "focusTagAtIndex"]
+          actions: ["clearEditedTagValue", "focusInput", "clearEditedId", "highlightTagAtIndex"]
         },
         TAG_INPUT_BLUR: [{
           cond: "isInputRelatedTarget",
           target: "navigating:tag",
-          actions: ["clearEditedTagValue", "clearFocusedId", "clearEditedId"]
+          actions: ["clearEditedTagValue", "clearHighlightedId", "clearEditedId"]
         }, {
           target: "idle",
-          actions: ["clearEditedTagValue", "clearFocusedId", "clearEditedId", "raiseExternalBlurEvent"]
+          actions: ["clearEditedTagValue", "clearHighlightedId", "clearEditedId", "raiseExternalBlurEvent"]
         }],
         TAG_INPUT_ENTER: {
           target: "navigating:tag",
-          actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "focusTagAtIndex"]
+          actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "highlightTagAtIndex"]
         }
       }
     }
@@ -205,16 +204,16 @@ const fetchMachine = createMachine({
   },
   guards: {
     "allowEditTag": ctx => ctx["allowEditTag"],
-    "!isTagFocused": ctx => ctx["!isTagFocused"],
+    "!isTagHighlighted": ctx => ctx["!isTagHighlighted"],
     "(!isAtMax || allowOverflow) && !isInputValueEmpty": ctx => ctx["(!isAtMax || allowOverflow) && !isInputValueEmpty"],
     "addOnBlur": ctx => ctx["addOnBlur"],
     "clearOnBlur": ctx => ctx["clearOnBlur"],
-    "!hasFocusedId": ctx => ctx["!hasFocusedId"],
+    "!hasHighlightedTag": ctx => ctx["!hasHighlightedTag"],
     "hasTags && isInputCaretAtStart": ctx => ctx["hasTags && isInputCaretAtStart"],
     "addOnPaste": ctx => ctx["addOnPaste"],
-    "hasTags && isInputCaretAtStart && !isLastTagFocused": ctx => ctx["hasTags && isInputCaretAtStart && !isLastTagFocused"],
-    "allowEditTag && hasFocusedId": ctx => ctx["allowEditTag && hasFocusedId"],
-    "isFirstTagFocused": ctx => ctx["isFirstTagFocused"],
+    "hasTags && isInputCaretAtStart && !isLastTagHighlighted": ctx => ctx["hasTags && isInputCaretAtStart && !isLastTagHighlighted"],
+    "allowEditTag && hasHighlightedTag": ctx => ctx["allowEditTag && hasHighlightedTag"],
+    "isFirstTagHighlighted": ctx => ctx["isFirstTagHighlighted"],
     "isInputRelatedTarget": ctx => ctx["isInputRelatedTarget"]
   }
 });
diff --git a/examples/next-ts/package.json b/examples/next-ts/package.json
@@ -35,6 +35,7 @@
     "@zag-js/element-rect": "workspace:*",
     "@zag-js/element-size": "workspace:*",
     "@zag-js/file-upload": "workspace:*",
+    "@zag-js/file-utils": "workspace:*",
     "@zag-js/focus-scope": "workspace:*",
     "@zag-js/focus-visible": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
@@ -90,4 +91,4 @@
     "typescript": "5.2.2"
   },
   "license": "MIT"
-}
+}
diff --git a/examples/next-ts/pages/combobox.tsx b/examples/next-ts/pages/combobox.tsx
@@ -21,10 +21,11 @@ export default function Page() {
     combobox.machine({
       id: useId(),
       collection,
-      onOpen() {
+      onOpenChange(details) {
+        if (!details.open) return
         setOptions(comboboxData)
       },
-      onInputChange({ value }) {
+      onInputValueChange({ value }) {
         const filtered = comboboxData.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()))
         setOptions(filtered.length > 0 ? filtered : comboboxData)
       },

diff --git a/examples/next-ts/pages/hover-card.tsx b/examples/next-ts/pages/hover-card.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-target-blank */
 import * as hoverCard from "@zag-js/hover-card"
 import { normalizeProps, Portal, useMachine } from "@zag-js/react"
 import { hoverCardControls } from "@zag-js/shared"

diff --git a/examples/next-ts/pages/pagination.tsx b/examples/next-ts/pages/pagination.tsx
@@ -14,7 +14,7 @@ export default function Page() {
     pagination.machine({
       id: useId(),
       count: paginationData.length,
-      onChange: console.log,
+      onPageChange: console.log,
     }),
     {
       context: controls.context,

diff --git a/examples/next-ts/pages/popper.tsx b/examples/next-ts/pages/popper.tsx
@@ -14,7 +14,7 @@ export default function App() {
     })
   }, [])
 
-  const styles = getPlacementStyles({ measured: true })
+  const styles = getPlacementStyles({ placement: "bottom" })
 
   return (
     <div>

diff --git a/examples/next-ts/pages/radio-group.tsx b/examples/next-ts/pages/radio-group.tsx
@@ -50,9 +50,6 @@ export default function Page() {
             <button type="button" onClick={() => api.focus()}>
               Focus
             </button>
-            <button type="button" onClick={() => api.blur()}>
-              Blur
-            </button>
           </fieldset>
         </form>
       </main>

diff --git a/examples/next-ts/pages/select.tsx b/examples/next-ts/pages/select.tsx
@@ -15,14 +15,14 @@ export default function Page() {
       collection: select.collection({ items: selectData }),
       id: useId(),
       name: "country",
-      onHighlight(details) {
-        console.log("onHighlight", details)
+      onHighlightChange(details) {
+        console.log("onHighlightChange", details)
       },
-      onChange(details) {
+      onValueChange(details) {
         console.log("onChange", details)
       },
-      onOpen() {
-        console.log("onOpen")
+      onOpenChange(details) {
+        console.log("onOpenChange", details)
       },
     }),
     {