chore: update navigation

chakra-ui · Jan 4, 2025 · 42c2828 · 42c2828
1 parent a82fe35
commit 42c2828
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 58 deletions.
diff --git a/packages/machines/cascader/src/cascader.connect.ts b/packages/machines/cascader/src/cascader.connect.ts
@@ -1,5 +1,5 @@
-import type { NormalizeProps, PropTypes } from "@zag-js/types"
-import { getEventKey, isLeftClick, type EventKeyMap } from "@zag-js/dom-event"
+import type { NormalizeProps, PropTypes, EventKeyMap } from "@zag-js/types"
+import { getEventKey, isLeftClick } from "@zag-js/dom-query"
 
 import type { State, Send, MachineApi, NodeProps, NodeState } from "./cascader.types"
 import { parts } from "./cascader.anatomy"

diff --git a/packages/machines/cascader/src/cascader.machine.ts b/packages/machines/cascader/src/cascader.machine.ts
@@ -455,19 +455,26 @@ export function machine<V>(userContext: UserDefinedContext<V>) {
         highlightItemFirstChild(ctx) {
           const item = ctx.collection.at(ctx.highlightedIndexPath)
           if (!ctx.collection.isBranchNode(item)) return
-          ctx.highlightedIndexPath.push(0)
+
+          const newPath = [...ctx.highlightedIndexPath, 0]
+          set.highlightedItem(ctx, newPath)
         },
         highlightItemParent(ctx) {
-          ctx.highlightedIndexPath.pop()
+          const parentPath = ctx.highlightedIndexPath.slice(0, -1)
+          set.highlightedItem(ctx, parentPath)
         },
         highlightFirstItem(ctx) {
-          ctx.highlightedIndexPath[ctx.highlightedIndexPath.length - 1] = 0
+          const newPath = [...ctx.highlightedIndexPath]
+          newPath[newPath.length - 1] = 0
+          set.highlightedItem(ctx, newPath)
         },
         highlightLastItem(ctx) {
           const siblings = utils.getSiblings(ctx)
           if (!siblings) return
 
-          ctx.highlightedIndexPath[ctx.highlightedIndexPath.length - 1] = siblings.length - 1
+          const newPath = [...ctx.highlightedIndexPath]
+          newPath[newPath.length - 1] = siblings.length - 1
+          set.highlightedItem(ctx, newPath)
         },
         highlightFirstItemInRoot(ctx) {
           set.highlightedItem(ctx, [0])
@@ -477,12 +484,16 @@ export function machine<V>(userContext: UserDefinedContext<V>) {
           set.highlightedItem(ctx, [rootNodes.length - 1])
         },
         highlightNextItem(ctx) {
-          const nextSibling = utils.getNextSibling(ctx)
-          set.highlightedItem(ctx, nextSibling)
+          const nextSibling = ctx.collection.getNextSibling(ctx.highlightedIndexPath)
+          if (!nextSibling) return
+          const value = ctx.collection.getNodeValue(nextSibling)
+          set.highlightedItem(ctx, ctx.collection.getIndexPath(value))
         },
         highlightPreviousItem(ctx) {
-          const previousSibling = utils.getPreviousSibling(ctx)
-          set.highlightedItem(ctx, previousSibling)
+          const previousSibling = ctx.collection.getPreviousSibling(ctx.highlightedIndexPath)
+          if (!previousSibling) return
+          const value = ctx.collection.getNodeValue(previousSibling)
+          set.highlightedItem(ctx, ctx.collection.getIndexPath(value))
         },
         highlightLastSelectedItem(ctx) {
           const lastSelected = ctx.valueIndexPaths.at(-1)

diff --git a/packages/machines/cascader/src/cascader.utils.ts b/packages/machines/cascader/src/cascader.utils.ts
@@ -12,51 +12,3 @@ export function getSiblings(ctx: MachineContext) {
   if (siblings.length <= 1) return
   return siblings
 }
-
-export function getNextSibling(ctx: MachineContext) {
-  const siblings = getSiblings(ctx)
-  if (!siblings) return
-  const currentIndex = ctx.highlightedIndexPath[ctx.highlightedIndexPath.length - 1]
-
-  // Find next enabled sibling
-  for (let i = currentIndex + 1; i < siblings.length; i++) {
-    if (!ctx.collection.getNodeDisabled(siblings[i])) {
-      return [...ctx.highlightedIndexPath.slice(0, -1), i]
-    }
-  }
-
-  // If loop is enabled, search from start
-  if (ctx.loopFocus) {
-    for (let i = 0; i < currentIndex; i++) {
-      if (!ctx.collection.getNodeDisabled(siblings[i])) {
-        return [...ctx.highlightedIndexPath.slice(0, -1), i]
-      }
-    }
-  }
-
-  return ctx.highlightedIndexPath
-}
-
-export function getPreviousSibling(ctx: MachineContext) {
-  const siblings = getSiblings(ctx)
-  if (!siblings) return
-  const currentIndex = ctx.highlightedIndexPath[ctx.highlightedIndexPath.length - 1]
-
-  // Find previous enabled sibling
-  for (let i = currentIndex - 1; i >= 0; i--) {
-    if (!ctx.collection.getNodeDisabled(siblings[i])) {
-      return [...ctx.highlightedIndexPath.slice(0, -1), i]
-    }
-  }
-
-  // If loop is enabled, search from end
-  if (ctx.loopFocus) {
-    for (let i = siblings.length - 1; i > currentIndex; i--) {
-      if (!ctx.collection.getNodeDisabled(siblings[i])) {
-        return [...ctx.highlightedIndexPath.slice(0, -1), i]
-      }
-    }
-  }
-
-  return ctx.highlightedIndexPath
-}