chore: update tags input

chakra-ui · Aug 16, 2023 · 23085e6 · 23085e6
1 parent a38d8e3
commit 23085e6
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 23 deletions.
diff --git a/.changeset/hip-papayas-turn.md 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
@@ -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
@@ -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
@@ -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.