refactor: combobox and selection value

chakra-ui · Oct 28, 2024 · 4be2c1d · 4be2c1d
1 parent c504c1c
commit 4be2c1d
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 62 deletions.
diff --git a/.changeset/perfect-bats-rush.md b/.changeset/perfect-bats-rush.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/combobox": minor
+---
+
+Remove `getSelectionValue` in favor of userland programmatic control.
diff --git a/.xstate/tree-view.js b/.xstate/tree-view.js
@@ -36,17 +36,15 @@ const fetchMachine = createMachine({
     },
     "SELECTED.ALL": [{
       cond: "isMultipleSelection && moveFocus",
-      actions: ["selectAllItems", "focusTreeLastItem"]
+      actions: ["selectAllNodes", "focusTreeLastNode"]
     }, {
       cond: "isMultipleSelection",
-      actions: ["selectAllItems"]
+      actions: ["selectAllNodes"]
     }],
     "EXPANDED.ALL": {
       actions: ["expandAllBranches"]
     }
   },
-  activities: ["trackChildrenMutation"],
-  entry: ["setFocusableNode"],
   on: {
     UPDATE_CONTEXT: {
       actions: "updateContext"
@@ -55,80 +53,77 @@ const fetchMachine = createMachine({
   states: {
     idle: {
       on: {
-        "ITEM.FOCUS": {
-          actions: ["setFocusedItem"]
+        "NODE.FOCUS": {
+          actions: ["setFocusedNode"]
         },
-        "ITEM.ARROW_DOWN": [{
+        "NODE.ARROW_DOWN": [{
           cond: "isShiftKey && isMultipleSelection",
-          actions: ["focusTreeNextItem", "extendSelectionToNextItem"]
+          actions: ["focusTreeNextNode", "extendSelectionToNextNode"]
         }, {
-          actions: ["focusTreeNextItem"]
+          actions: ["focusTreeNextNode"]
         }],
-        "ITEM.ARROW_UP": [{
+        "NODE.ARROW_UP": [{
           cond: "isShiftKey && isMultipleSelection",
-          actions: ["focusTreePrevItem", "extendSelectionToPrevItem"]
+          actions: ["focusTreePrevNode", "extendSelectionToPrevNode"]
         }, {
-          actions: ["focusTreePrevItem"]
+          actions: ["focusTreePrevNode"]
         }],
-        "ITEM.ARROW_LEFT": {
-          actions: ["focusBranchControl"]
+        "NODE.ARROW_LEFT": {
+          actions: ["focusBranchNode"]
         },
-        "BRANCH.ARROW_LEFT": [{
+        "BRANCH_NODE.ARROW_LEFT": [{
           cond: "isBranchExpanded",
           actions: ["collapseBranch"]
         }, {
-          actions: ["focusBranchControl"]
+          actions: ["focusBranchNode"]
         }],
-        "BRANCH.ARROW_RIGHT": [{
+        "BRANCH_NODE.ARROW_RIGHT": [{
           cond: "isBranchFocused && isBranchExpanded",
-          actions: ["focusBranchFirstItem"]
+          actions: ["focusBranchFirstNode"]
         }, {
           actions: ["expandBranch"]
         }],
-        "EXPAND.SIBLINGS": {
+        "SIBLINGS.EXPAND": {
           actions: ["expandSiblingBranches"]
         },
-        "ITEM.HOME": [{
+        "NODE.HOME": [{
           cond: "isShiftKey && isMultipleSelection",
-          actions: ["extendSelectionToFirstItem", "focusTreeFirstItem"]
+          actions: ["extendSelectionToFirstNode", "focusTreeFirstNode"]
         }, {
-          actions: ["focusTreeFirstItem"]
+          actions: ["focusTreeFirstNode"]
         }],
-        "ITEM.END": [{
+        "NODE.END": [{
           cond: "isShiftKey && isMultipleSelection",
-          actions: ["extendSelectionToLastItem", "focusTreeLastItem"]
+          actions: ["extendSelectionToLastNode", "focusTreeLastNode"]
         }, {
-          actions: ["focusTreeLastItem"]
+          actions: ["focusTreeLastNode"]
         }],
-        "ITEM.CLICK": [{
+        "NODE.CLICK": [{
           cond: "isCtrlKey && isMultipleSelection",
-          actions: ["addOrRemoveItemFromSelection"]
+          actions: ["toggleNodeSelection"]
         }, {
           cond: "isShiftKey && isMultipleSelection",
-          actions: ["extendSelectionToItem"]
+          actions: ["extendSelectionToNode"]
         }, {
-          actions: ["selectItem"]
+          actions: ["selectNode"]
         }],
-        "BRANCH.CLICK": [{
+        "BRANCH_NODE.CLICK": [{
           cond: "isCtrlKey && isMultipleSelection",
-          actions: ["addOrRemoveItemFromSelection"]
+          actions: ["toggleNodeSelection"]
         }, {
           cond: "isShiftKey && isMultipleSelection",
-          actions: ["extendSelectionToItem"]
+          actions: ["extendSelectionToNode"]
         }, {
           cond: "openOnClick",
-          actions: ["selectItem", "toggleBranch"]
+          actions: ["selectNode", "toggleBranchNode"]
         }, {
-          actions: ["selectItem"]
+          actions: ["selectNode"]
         }],
         "BRANCH_TOGGLE.CLICK": {
-          actions: ["toggleBranch"]
+          actions: ["toggleBranchNode"]
         },
         "TREE.TYPEAHEAD": {
-          actions: ["focusMatchedItem"]
-        },
-        "TREE.BLUR": {
-          actions: ["clearFocusedItem", "setFocusableNode"]
+          actions: ["focusMatchedNode"]
         }
       }
     }

diff --git a/packages/machines/combobox/src/combobox.machine.ts b/packages/machines/combobox/src/combobox.machine.ts
@@ -712,12 +712,12 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
         },
         selectHighlightedItem(ctx) {
           set.value(ctx, ctx.highlightedValue)
-          set.inputValue(ctx, getInputValue(ctx, true))
+          set.inputValue(ctx, getInputValue(ctx))
         },
         selectItem(ctx, evt) {
           if (evt.value == null) return
           set.value(ctx, evt.value)
-          set.inputValue(ctx, getInputValue(ctx, true))
+          set.inputValue(ctx, getInputValue(ctx))
         },
         clearItem(ctx, evt) {
           if (evt.value == null) return
@@ -908,15 +908,7 @@ export function machine<T extends CollectionItem>(userContext: UserDefinedContex
   )
 }
 
-function getInputValue(ctx: MachineContext, selection?: boolean) {
-  if (ctx.getSelectionValue && selection) {
-    return ctx.getSelectionValue({
-      inputValue: ctx.inputValue,
-      selectedItems: Array.from(ctx.selectedItems),
-      valueAsString: ctx.valueAsString,
-    })
-  }
-
+function getInputValue(ctx: MachineContext) {
   return match(ctx.selectionBehavior, {
     preserve: ctx.inputValue,
     replace: ctx.valueAsString,

diff --git a/packages/machines/combobox/src/combobox.props.ts b/packages/machines/combobox/src/combobox.props.ts
@@ -12,7 +12,6 @@ export const props = createProps<UserDefinedContext>()([
   "disableLayer",
   "form",
   "getRootNode",
-  "getSelectionValue",
   "highlightedValue",
   "id",
   "ids",

diff --git a/packages/machines/combobox/src/combobox.types.ts b/packages/machines/combobox/src/combobox.types.ts
@@ -26,12 +26,6 @@ export interface OpenChangeDetails {
   open: boolean
 }
 
-export interface SelectionValueDetails<T extends CollectionItem = CollectionItem> {
-  inputValue: string
-  selectedItems: T[]
-  valueAsString: string
-}
-
 export interface ScrollToIndexDetails {
   index: number
   immediate?: boolean | undefined
@@ -199,10 +193,6 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
    * Whether to close the combobox when an item is selected.
    */
   closeOnSelect?: boolean | undefined
-  /**
-   * Function to get the display value of the selected item
-   */
-  getSelectionValue?: ((details: SelectionValueDetails<T>) => string) | undefined
   /**
    * Whether to open the combobox on arrow key press
    * @default true

diff --git a/packages/machines/combobox/src/index.ts b/packages/machines/combobox/src/index.ts
@@ -20,7 +20,6 @@ export type {
   Placement,
   PositioningOptions,
   ScrollToIndexDetails,
-  SelectionValueDetails,
   Service,
   TriggerProps,
   ValueChangeDetails,