fix(steps): update api and data-attr

chakra-ui · Sep 23, 2024 · f685a58 · f685a58
1 parent b1cf407
commit f685a58
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/.changeset/little-adults-attend.md b/.changeset/little-adults-attend.md
@@ -0,0 +1,7 @@
+---
+"@zag-js/steps": minor
+---
+
+- Fix issue where past step item had `data-incomplete` on it.
+- Rename `api.value` to `api.step`
+- Rename `api.setValue` to `api.setStep`
diff --git a/packages/machines/steps/src/steps.connect.ts b/packages/machines/steps/src/steps.connect.ts
@@ -6,7 +6,7 @@ import { dom } from "./steps.dom"
 import type { ItemProps, ItemState, MachineApi, Send, State } from "./steps.types"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
-  const value = state.context.step
+  const step = state.context.step
   const count = state.context.count
   const percent = state.context.percent
   const hasNextStep = state.context.hasNextStep
@@ -15,8 +15,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const getItemState = (props: ItemProps): ItemState => ({
     triggerId: dom.getTriggerId(state.context, props.index),
     contentId: dom.getContentId(state.context, props.index),
-    current: props.index === value,
-    completed: props.index < value,
+    current: props.index === step,
+    completed: props.index < step,
+    incomplete: props.index > step,
     index: props.index,
     first: props.index === 0,
     last: props.index === count - 1,
@@ -34,12 +35,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     send({ type: "STEP.RESET", src: "reset.trigger.click" })
   }
 
-  const setValue = (value: number) => {
+  const setStep = (value: number) => {
     send({ type: "STEP.SET", value, src: "api.setValue" })
   }
 
   return {
-    value,
+    value: step,
     count,
     percent,
     hasNextStep,
@@ -48,7 +49,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     goToPrevStep,
     resetStep,
     getItemState,
-    setValue,
+    setStep,
 
     getRootProps() {
       return normalize.element({
@@ -100,7 +101,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         "data-orientation": state.context.orientation,
         "data-complete": dataAttr(itemState.completed),
         "data-current": dataAttr(itemState.current),
-        "data-incomplete": dataAttr(!itemState.current),
+        "data-incomplete": dataAttr(itemState.incomplete),
         onClick(event) {
           if (event.defaultPrevented) return
           if (state.context.linear) return
@@ -132,7 +133,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         "aria-hidden": true,
         "data-complete": dataAttr(itemState.completed),
         "data-current": dataAttr(itemState.current),
-        "data-incomplete": dataAttr(!itemState.current),
+        "data-incomplete": dataAttr(itemState.incomplete),
       })
     },
 
@@ -144,7 +145,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         "data-orientation": state.context.orientation,
         "data-complete": dataAttr(itemState.completed),
         "data-current": dataAttr(itemState.current),
-        "data-incomplete": dataAttr(!itemState.current),
+        "data-incomplete": dataAttr(itemState.incomplete),
       })
     },
 

diff --git a/packages/machines/steps/src/steps.types.ts b/packages/machines/steps/src/steps.types.ts
@@ -87,6 +87,7 @@ export interface ItemState {
   contentId: string
   current: boolean
   completed: boolean
+  incomplete: boolean
   last: boolean
   first: boolean
 }
@@ -115,7 +116,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * Function to set the value of the stepper.
    */
-  setValue(value: number): void
+  setStep(step: number): void
   /**
    * Function to go to the next step.
    */