From 23085e6880d01346e26d9ffd1b35b19e38340f83 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Wed, 16 Aug 2023 10:53:34 +0100
Subject: [PATCH] chore: update tags input

---
 .changeset/hip-papayas-turn.md                |  6 ++++++
 .xstate/tags-input.js                         |  2 +-
 .../tags-input/src/tags-input.machine.ts      | 20 +++----------------
 .../tags-input/src/tags-input.types.ts        |  6 +-----
 4 files changed, 11 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/hip-papayas-turn.md

diff --git a/.changeset/hip-papayas-turn.md b/.changeset/hip-papayas-turn.md
new file mode 100644
index 0000000000..e37fe41ec2
--- /dev/null
+++ b/.changeset/hip-papayas-turn.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/tags-input": minor
+---
+
+- Rename `onHighlight` to `onFocusChange`
+- Remove `onTagUpdate`, use `onChange` instead
diff --git a/.xstate/tags-input.js b/.xstate/tags-input.js
index b7e461b30a..40ecd32a78 100644
--- a/.xstate/tags-input.js
+++ b/.xstate/tags-input.js
@@ -190,7 +190,7 @@ const fetchMachine = createMachine({
         }],
         TAG_INPUT_ENTER: {
           target: "navigating:tag",
-          actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "focusTagAtIndex", "invokeOnTagUpdate"]
+          actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "focusTagAtIndex"]
         }
       }
     }
diff --git a/packages/machines/tags-input/src/tags-input.machine.ts b/packages/machines/tags-input/src/tags-input.machine.ts
index 85764e024e..ebf1aedab6 100644
--- a/packages/machines/tags-input/src/tags-input.machine.ts
+++ b/packages/machines/tags-input/src/tags-input.machine.ts
@@ -229,7 +229,7 @@ export function machine(userContext: UserDefinedContext) {
             ],
             TAG_INPUT_ENTER: {
               target: "navigating:tag",
-              actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "focusTagAtIndex", "invokeOnTagUpdate"],
+              actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "focusTagAtIndex"],
             },
           },
         },
@@ -301,15 +301,6 @@ export function machine(userContext: UserDefinedContext) {
         raiseExternalBlurEvent(_, evt, { self }) {
           self.send({ type: "EXTERNAL_BLUR", id: evt.id })
         },
-        invokeOnHighlight(ctx) {
-          const value = dom.getFocusedTagValue(ctx)
-          ctx.onHighlight?.({ value })
-        },
-        invokeOnTagUpdate(ctx) {
-          if (ctx.idx == null) return
-          const value = ctx.value[ctx.idx]
-          ctx.onTagUpdate?.({ value, index: ctx.idx })
-        },
         dispatchChangeEvent(ctx) {
           dom.dispatchInputEvent(ctx)
         },
@@ -546,14 +537,9 @@ const invoke = {
     ctx.onChange?.({ values: ctx.value })
     dom.dispatchInputEvent(ctx)
   },
-  tagUpdate: (ctx: MachineContext) => {
-    if (ctx.idx == null) return
-    ctx.onTagUpdate?.({ value: ctx.value[ctx.idx], index: ctx.idx })
-    dom.dispatchInputEvent(ctx)
-  },
   focusChange: (ctx: MachineContext) => {
     const value = dom.getFocusedTagValue(ctx)
-    ctx.onHighlight?.({ value })
+    ctx.onFocusChange?.({ value })
   },
 }
 
@@ -564,7 +550,7 @@ const set = {
   },
   valueAtIndex: (ctx: MachineContext, index: number, value: string) => {
     ctx.value[index] = value
-    invoke.tagUpdate(ctx)
+    invoke.change(ctx)
   },
   focusedId: (ctx: MachineContext, id: string | null) => {
     ctx.focusedId = id
diff --git a/packages/machines/tags-input/src/tags-input.types.ts b/packages/machines/tags-input/src/tags-input.types.ts
index 62acceb49e..ece0f55cd8 100644
--- a/packages/machines/tags-input/src/tags-input.types.ts
+++ b/packages/machines/tags-input/src/tags-input.types.ts
@@ -92,15 +92,11 @@ type PublicContext = DirectionProperty &
     /**
      * Callback fired when a tag is focused by pointer or keyboard navigation
      */
-    onHighlight?(details: { value: string | null }): void
+    onFocusChange?(details: { value: string | null }): void
     /**
      * Callback fired when the max tag count is reached or the `validateTag` function returns `false`
      */
     onInvalid?(details: { reason: ValidityState }): void
-    /**
-     * Callback fired when a tag's value is updated
-     */
-    onTagUpdate?(details: { value: string; index: number }): void
     /**
      * Returns a boolean that determines whether a tag can be added.
      * Useful for preventing duplicates or invalid tag values.