chore: add item indicator

Author: segunadebayo

.changeset/navigation-menu-item-indicator.md

@@ -0,0 +1,12 @@
+---
+"@zag-js/navigation-menu": minor
+---
+
+Add `getItemIndicatorProps` part
+
+```tsx
+<div {...api.getItemProps({ value: "products" })}>
+  <button {...api.getTriggerProps({ value: "products" })}>Products</button>
+  <div {...api.getItemIndicatorProps({ value: "products" })} />
+</div>
+```

packages/machines/navigation-menu/src/index.ts

@@ -11,6 +11,7 @@ export type {
   ElementIds,
   ViewportProps,
   ItemProps,
+  ItemState,
   LinkProps,
   ValueChangeDetails,
 } from "./navigation-menu.types"

packages/machines/navigation-menu/src/navigation-menu.anatomy.ts

@@ -11,6 +11,7 @@ export const anatomy = createAnatomy("navigation-menu").parts(
   "link",
   "indicator",
   "indicatorTrack",
+  "itemIndicator",
   "arrow",
 )
 

packages/machines/navigation-menu/src/navigation-menu.connect.ts

@@ -11,7 +11,7 @@ import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { toPx } from "@zag-js/utils"
 import { parts } from "./navigation-menu.anatomy"
 import * as dom from "./navigation-menu.dom"
-import type { ItemProps, NavigationMenuApi, NavigationMenuService } from "./navigation-menu.types"
+import type { ItemProps, ItemState, NavigationMenuApi, NavigationMenuService } from "./navigation-menu.types"
 
 export function connect<T extends PropTypes>(
   service: NavigationMenuService,
@@ -31,7 +31,7 @@ export function connect<T extends PropTypes>(
   const isViewportRendered = context.get("isViewportRendered")
   const preventTransition = value && !previousValue
 
-  function getItemState(props: ItemProps) {
+  function getItemState(props: ItemProps): ItemState {
     const selected = value === props.value
     const wasSelected = !value && previousValue === props.value
     return {
@@ -420,5 +420,20 @@ export function connect<T extends PropTypes>(
         },
       })
     },
+
+    getItemState,
+
+    getItemIndicatorProps(props) {
+      const itemState = getItemState(props)
+      return normalize.element({
+        ...parts.itemIndicator.attrs,
+        "aria-hidden": true,
+        dir: prop("dir"),
+        hidden: !itemState.selected,
+        "data-state": itemState.selected ? "open" : "closed",
+        "data-orientation": prop("orientation"),
+        "data-value": props.value,
+      })
+    },
   }
 }

packages/machines/navigation-menu/src/navigation-menu.types.ts

@@ -129,6 +129,41 @@ export interface ItemProps {
   disabled?: boolean | undefined
 }
 
+export interface ItemState {
+  /**
+   * The id of the item element
+   */
+  itemId: string
+  /**
+   * The id of the trigger element
+   */
+  triggerId: string
+  /**
+   * The id of the trigger proxy element
+   */
+  triggerProxyId: string
+  /**
+   * The id of the content element
+   */
+  contentId: string
+  /**
+   * Whether the item is currently selected
+   */
+  selected: boolean
+  /**
+   * Whether the item was previously selected (for animation)
+   */
+  wasSelected: boolean
+  /**
+   * Whether the item's content is open
+   */
+  open: boolean
+  /**
+   * Whether the item is disabled
+   */
+  disabled: boolean
+}
+
 export interface ArrowProps {
   /**
    * The value of the item
@@ -190,6 +225,7 @@ export interface NavigationMenuApi<T extends PropTypes = PropTypes> {
   getItemProps: (props: ItemProps) => T["element"]
   getIndicatorTrackProps: () => T["element"]
   getIndicatorProps: () => T["element"]
+  getItemIndicatorProps: (props: ItemProps) => T["element"]
   getArrowProps: (props?: ArrowProps) => T["element"]
 
   getTriggerProps: (props: ItemProps) => T["button"]
@@ -200,4 +236,6 @@ export interface NavigationMenuApi<T extends PropTypes = PropTypes> {
   getContentProps: (props: LinkProps) => T["element"]
   getViewportPositionerProps: (props?: ViewportProps) => T["element"]
   getViewportProps: (props?: ViewportProps) => T["element"]
+
+  getItemState: (props: ItemProps) => ItemState
 }