chore: update collapsible and tree-view

.changeset/popular-turtles-push.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/tree-view": minor
+---
+
+Change value type for `expandedIds` and `selectedIds` from `Set<string>` to `string[]`

.changeset/twenty-flies-lay.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/collapsible": patch
+---
+
+Fix issue where collapsible `MachineApi` wasn't used

packages/docs/api.json

@@ -347,10 +347,6 @@
         "type": "boolean",
         "description": "Whether the collapsible is disabled"
       },
-      "isFocused": {
-        "type": "boolean",
-        "description": "Whether the checkbox is focused"
-      },
       "open": {
         "type": "() => void",
         "description": "Function to open the collapsible."
@@ -3388,14 +3384,63 @@
     }
   },
   "tree-view": {
-    "api": {},
+    "api": {
+      "expandedIds": {
+        "type": "string[]",
+        "description": "The id of the expanded nodes"
+      },
+      "selectedIds": {
+        "type": "string[]",
+        "description": "The id of the selected nodes"
+      },
+      "expand": {
+        "type": "(ids: string[]) => void",
+        "description": "Function to expand nodes"
+      },
+      "expandAll": {
+        "type": "() => void",
+        "description": "Function to expand all nodes"
+      },
+      "collapse": {
+        "type": "(ids: string[]) => void",
+        "description": "Function to collapse nodes"
+      },
+      "collapseAll": {
+        "type": "() => void",
+        "description": "Function to collapse all nodes"
+      },
+      "select": {
+        "type": "(ids: string[]) => void",
+        "description": "Function to select nodes"
+      },
+      "selectAll": {
+        "type": "() => void",
+        "description": "Function to select all nodes"
+      },
+      "deselect": {
+        "type": "(ids: string[]) => void",
+        "description": "Function to deselect nodes"
+      },
+      "deselectAll": {
+        "type": "() => void",
+        "description": "Function to deselect all nodes"
+      },
+      "focusBranch": {
+        "type": "(id: string) => void",
+        "description": "Function to focus a branch node"
+      },
+      "focusItem": {
+        "type": "(id: string) => void",
+        "description": "Function to focus an item node"
+      }
+    },
     "context": {
       "expandedIds": {
-        "type": "Set<string>",
+        "type": "string[]",
         "description": "The id of the expanded nodes"
       },
       "selectedIds": {
-        "type": "Set<string>",
+        "type": "string[]",
         "description": "The id of the selected nodes"
       },
       "focusedId": {

packages/machines/collapsible/src/collapsible.connect.ts

@@ -1,10 +1,10 @@
+import { dataAttr } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./collapsible.anatomy"
 import { dom } from "./collapsible.dom"
-import type { Send, State } from "./collapsible.types"
-import { dataAttr } from "@zag-js/dom-query"
+import type { MachineApi, Send, State } from "./collapsible.types"
 
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const isVisible = state.matches("open", "closing")
   const isOpen = state.matches("open")
 
@@ -15,6 +15,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const skipDataAttr = state.context.isMountAnimationPrevented && isOpen
 
   return {
+    isDisabled: !!disabled,
     isOpen,
     open() {
       send("OPEN")

packages/machines/collapsible/src/collapsible.types.ts

@@ -92,10 +92,6 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    * Whether the collapsible is disabled
    */
   isDisabled: boolean
-  /**
-   * Whether the checkbox is focused
-   */
-  isFocused: boolean | undefined
   /**
    * Function to open the collapsible.
    */

packages/machines/tree-view/src/tree-view.connect.ts

@@ -16,7 +16,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       id: props.id,
       isDisabled: Boolean(props.disabled),
       isFocused: focusedId === props.id,
-      isSelected: selectedIds.has(props.id),
+      isSelected: selectedIds.includes(props.id),
     }
   }
 
@@ -25,8 +25,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       id: props.id,
       isDisabled: Boolean(props.disabled),
       isFocused: focusedId === props.id,
-      isExpanded: expandedIds.has(props.id),
-      isSelected: selectedIds.has(props.id),
+      isExpanded: expandedIds.includes(props.id),
+      isSelected: selectedIds.includes(props.id),
     }
   }
 

packages/machines/tree-view/src/tree-view.dom.ts

@@ -154,6 +154,6 @@ export const dom = createScope({
       }
     })
 
-    return nextSet
+    return Array.from(nextSet)
   },
 })

packages/machines/tree-view/src/tree-view.machine.ts

@@ -14,8 +14,8 @@ export function machine(userContext: UserDefinedContext) {
       id: "tree-view",
       initial: "idle",
       context: {
-        expandedIds: new Set(),
-        selectedIds: new Set(),
+        expandedIds: [],
+        selectedIds: [],
         focusedId: null,
         openOnClick: true,
         selectionMode: "single",
@@ -165,10 +165,10 @@ export function machine(userContext: UserDefinedContext) {
     {
       guards: {
         isBranchFocused: (ctx, evt) => ctx.focusedId === evt.id,
-        isBranchExpanded: (ctx, evt) => ctx.expandedIds.has(evt.id),
+        isBranchExpanded: (ctx, evt) => ctx.expandedIds.includes(evt.id),
         isShiftKey: (_ctx, evt) => evt.shiftKey,
         isCtrlKey: (_ctx, evt) => evt.ctrlKey,
-        hasSelectedItems: (ctx) => ctx.selectedIds.size > 0,
+        hasSelectedItems: (ctx) => ctx.selectedIds.length > 0,
         isMultipleSelection: (ctx) => ctx.isMultipleSelection,
         moveFocus: (_ctx, evt) => !!evt.moveFocus,
         openOnClick: (ctx) => !!ctx.openOnClick,
@@ -217,7 +217,7 @@ export function machine(userContext: UserDefinedContext) {
         setFocusableNode(ctx) {
           if (ctx.focusedId) return
 
-          if (ctx.selectedIds.size > 0) {
+          if (ctx.selectedIds.length > 0) {
             const firstSelectedId = Array.from(ctx.selectedIds)[0]
             ctx.focusedId = firstSelectedId
             return
@@ -231,7 +231,7 @@ export function machine(userContext: UserDefinedContext) {
           ctx.focusedId = dom.getNodeId(firstItem)
         },
         selectItem(ctx, evt) {
-          set.selected(ctx, new Set([evt.id]))
+          set.selected(ctx, [evt.id])
         },
         setFocusedItem(ctx, evt) {
           set.focused(ctx, evt.id)
@@ -240,7 +240,7 @@ export function machine(userContext: UserDefinedContext) {
           set.focused(ctx, null)
         },
         clearSelectedItem(ctx) {
-          set.selected(ctx, new Set())
+          set.selected(ctx, [])
         },
         toggleBranch(ctx, evt) {
           const nextSet = new Set(ctx.expandedIds)
@@ -252,17 +252,17 @@ export function machine(userContext: UserDefinedContext) {
             nextSet.add(evt.id)
           }
 
-          set.expanded(ctx, nextSet)
+          set.expanded(ctx, Array.from(nextSet))
         },
         expandBranch(ctx, evt) {
           const nextSet = new Set(ctx.expandedIds)
           nextSet.add(evt.id)
-          set.expanded(ctx, nextSet)
+          set.expanded(ctx, Array.from(nextSet))
         },
         collapseBranch(ctx, evt) {
           const nextSet = new Set(ctx.expandedIds)
           nextSet.delete(evt.id)
-          set.expanded(ctx, nextSet)
+          set.expanded(ctx, Array.from(nextSet))
         },
         setExpanded(ctx, evt) {
           set.expanded(ctx, evt.value)
@@ -339,7 +339,7 @@ export function machine(userContext: UserDefinedContext) {
             }
             node = walker.nextNode()
           }
-          set.selected(ctx, nextSet)
+          set.selected(ctx, Array.from(nextSet))
         },
         focusMatchedItem(ctx, evt) {
           dom.focusNode(dom.getMatchingEl(ctx, evt.key))
@@ -359,7 +359,7 @@ export function machine(userContext: UserDefinedContext) {
             nextSet.add(nodeId)
           }
 
-          set.selected(ctx, nextSet)
+          set.selected(ctx, Array.from(nextSet))
         },
         expandAllBranches(ctx) {
           const nextSet = new Set<string>()
@@ -371,7 +371,7 @@ export function machine(userContext: UserDefinedContext) {
               nextSet.add(nodeId)
             }
           }
-          set.expanded(ctx, nextSet)
+          set.expanded(ctx, Array.from(nextSet))
         },
         expandSiblingBranches(ctx, evt) {
           const focusedEl = dom.getNodeEl(ctx, evt.id)
@@ -384,7 +384,7 @@ export function machine(userContext: UserDefinedContext) {
             nextSet.add(nodeId)
           })
 
-          set.expanded(ctx, nextSet)
+          set.expanded(ctx, Array.from(nextSet))
         },
         extendSelectionToItem(ctx, evt) {
           const focusedEl = dom.getNodeEl(ctx, evt.id)
@@ -422,7 +422,7 @@ export function machine(userContext: UserDefinedContext) {
             selectedIds.add(nextNodeId)
           }
 
-          set.selected(ctx, selectedIds)
+          set.selected(ctx, Array.from(selectedIds))
         },
         extendSelectionToPrevItem(ctx, evt) {
           const nodeId = evt.id
@@ -448,7 +448,7 @@ export function machine(userContext: UserDefinedContext) {
             selectedIds.add(prevNodeId)
           }
 
-          set.selected(ctx, selectedIds)
+          set.selected(ctx, Array.from(selectedIds))
         },
         extendSelectionToFirstItem(ctx) {
           const nodes = dom.getTreeNodes(ctx)
@@ -473,27 +473,6 @@ export function machine(userContext: UserDefinedContext) {
   )
 }
 
-// if the branch is collapsed, we need to remove all its children from selectedIds
-// function collapseEffect(ctx: MachineContext, evt: any) {
-//   const walker = dom.getTreeWalker(ctx, {
-//     skipHidden: false,
-//     root: dom.getBranchEl(ctx, evt.id),
-//   })
-
-//   const idsToRemove = new Set<string>()
-//   let node = walker.firstChild()
-//   while (node) {
-//     if (isHTMLElement(node)) {
-//       idsToRemove.add(dom.getNodeId(node))
-//     }
-//     node = walker.nextNode()
-//   }
-
-//   const nextSelectedSet = new Set(ctx.selectedIds)
-//   idsToRemove.forEach((id) => nextSelectedSet.delete(id))
-//   set.selected(ctx, nextSelectedSet)
-// }
-
 const invoke = {
   focusChange(ctx: MachineContext) {
     ctx.onFocusChange?.({ focusedId: ctx.focusedId! })
@@ -507,22 +486,22 @@ const invoke = {
   selectionChange(ctx: MachineContext) {
     ctx.onSelectionChange?.({
       selectedIds: ctx.selectedIds,
-      focusedId: ctx.focusedId!,
+      focusedId: ctx.focusedId,
     })
   },
 }
 
 const set = {
-  selected(ctx: MachineContext, set: Set<string>) {
-    ctx.selectedIds = set
+  selected(ctx: MachineContext, ids: string[]) {
+    ctx.selectedIds = ids
     invoke.selectionChange(ctx)
   },
   focused(ctx: MachineContext, id: string | null) {
     ctx.focusedId = id
     invoke.focusChange(ctx)
   },
-  expanded(ctx: MachineContext, set: Set<string>) {
-    ctx.expandedIds = set
+  expanded(ctx: MachineContext, ids: string[]) {
+    ctx.expandedIds = ids
     invoke.expandedChange(ctx)
   },
 }