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.