@zag-js/combobox 0.75.0 → 0.76.0

package/dist/index.js

@@ -1143,15 +1143,18 @@ function machine(userContext) {
         },
         selectHighlightedItem(ctx2) {
           set.value(ctx2, ctx2.highlightedValue);
+          set.inputValue(ctx2, getInputValue(ctx2, true));
         },
         selectItem(ctx2, evt) {
           if (evt.value == null) return;
           set.value(ctx2, evt.value);
+          set.inputValue(ctx2, getInputValue(ctx2, true));
         },
         clearItem(ctx2, evt) {
           if (evt.value == null) return;
           const value = ctx2.value.filter((v) => v !== evt.value);
           set.value(ctx2, value);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         setInitialFocus(ctx2) {
           domQuery.raf(() => {
@@ -1214,9 +1217,11 @@ function machine(userContext) {
         setSelectedItems(ctx2, evt) {
           if (!utils.isArray(evt.value)) return;
           set.value(ctx2, evt.value);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         clearSelectedItems(ctx2) {
           set.value(ctx2, []);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         scrollContentToTop(ctx2) {
           if (ctx2.scrollToIndexFn) {
@@ -1313,6 +1318,7 @@ function machine(userContext) {
         },
         syncSelectedItems(ctx2) {
           sync.valueChange(ctx2);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         syncHighlightedItem(ctx2) {
           sync.highlightChange(ctx2);
@@ -1324,6 +1330,20 @@ function machine(userContext) {
     }
   );
 }
+function getInputValue(ctx, selection) {
+  if (ctx.getSelectionValue && selection) {
+    return ctx.getSelectionValue({
+      inputValue: ctx.inputValue,
+      selectedItems: Array.from(ctx.selectedItems),
+      valueAsString: ctx.valueAsString
+    });
+  }
+  return utils.match(ctx.selectionBehavior, {
+    preserve: ctx.inputValue,
+    replace: ctx.valueAsString,
+    clear: ""
+  });
+}
 var sync = {
   valueChange: (ctx) => {
     const prevSelectedItems = ctx.selectedItems;
@@ -1332,23 +1352,7 @@ var sync = {
       if (foundItem) return foundItem;
       return ctx.collection.find(v);
     });
-    const valueAsString = ctx.collection.stringifyItems(ctx.selectedItems);
-    ctx.valueAsString = valueAsString;
-    let inputValue;
-    if (ctx.getSelectionValue) {
-      inputValue = ctx.getSelectionValue({
-        inputValue: ctx.inputValue,
-        selectedItems: Array.from(ctx.selectedItems),
-        valueAsString
-      });
-    } else {
-      inputValue = utils.match(ctx.selectionBehavior, {
-        replace: ctx.valueAsString,
-        preserve: ctx.inputValue,
-        clear: ""
-      });
-    }
-    set.inputValue(ctx, inputValue);
+    ctx.valueAsString = ctx.collection.stringifyItems(ctx.selectedItems);
   },
   highlightChange: (ctx) => {
     ctx.highlightedItem = ctx.collection.find(ctx.highlightedValue);

package/dist/index.mjs

@@ -1141,15 +1141,18 @@ function machine(userContext) {
         },
         selectHighlightedItem(ctx2) {
           set.value(ctx2, ctx2.highlightedValue);
+          set.inputValue(ctx2, getInputValue(ctx2, true));
         },
         selectItem(ctx2, evt) {
           if (evt.value == null) return;
           set.value(ctx2, evt.value);
+          set.inputValue(ctx2, getInputValue(ctx2, true));
         },
         clearItem(ctx2, evt) {
           if (evt.value == null) return;
           const value = ctx2.value.filter((v) => v !== evt.value);
           set.value(ctx2, value);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         setInitialFocus(ctx2) {
           raf(() => {
@@ -1212,9 +1215,11 @@ function machine(userContext) {
         setSelectedItems(ctx2, evt) {
           if (!isArray(evt.value)) return;
           set.value(ctx2, evt.value);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         clearSelectedItems(ctx2) {
           set.value(ctx2, []);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         scrollContentToTop(ctx2) {
           if (ctx2.scrollToIndexFn) {
@@ -1311,6 +1316,7 @@ function machine(userContext) {
         },
         syncSelectedItems(ctx2) {
           sync.valueChange(ctx2);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         syncHighlightedItem(ctx2) {
           sync.highlightChange(ctx2);
@@ -1322,6 +1328,20 @@ function machine(userContext) {
     }
   );
 }
+function getInputValue(ctx, selection) {
+  if (ctx.getSelectionValue && selection) {
+    return ctx.getSelectionValue({
+      inputValue: ctx.inputValue,
+      selectedItems: Array.from(ctx.selectedItems),
+      valueAsString: ctx.valueAsString
+    });
+  }
+  return match(ctx.selectionBehavior, {
+    preserve: ctx.inputValue,
+    replace: ctx.valueAsString,
+    clear: ""
+  });
+}
 var sync = {
   valueChange: (ctx) => {
     const prevSelectedItems = ctx.selectedItems;
@@ -1330,23 +1350,7 @@ var sync = {
       if (foundItem) return foundItem;
       return ctx.collection.find(v);
     });
-    const valueAsString = ctx.collection.stringifyItems(ctx.selectedItems);
-    ctx.valueAsString = valueAsString;
-    let inputValue;
-    if (ctx.getSelectionValue) {
-      inputValue = ctx.getSelectionValue({
-        inputValue: ctx.inputValue,
-        selectedItems: Array.from(ctx.selectedItems),
-        valueAsString
-      });
-    } else {
-      inputValue = match(ctx.selectionBehavior, {
-        replace: ctx.valueAsString,
-        preserve: ctx.inputValue,
-        clear: ""
-      });
-    }
-    set.inputValue(ctx, inputValue);
+    ctx.valueAsString = ctx.collection.stringifyItems(ctx.selectedItems);
   },
   highlightChange: (ctx) => {
     ctx.highlightedItem = ctx.collection.find(ctx.highlightedValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/combobox",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "description": "Core logic for the combobox widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,16 +26,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.75.0",
-    "@zag-js/aria-hidden": "0.75.0",
-    "@zag-js/collection": "0.75.0",
-    "@zag-js/core": "0.75.0",
-    "@zag-js/dismissable": "0.75.0",
-    "@zag-js/dom-query": "0.75.0",
-    "@zag-js/dom-event": "0.75.0",
-    "@zag-js/utils": "0.75.0",
-    "@zag-js/popper": "0.75.0",
-    "@zag-js/types": "0.75.0"
+    "@zag-js/anatomy": "0.76.0",
+    "@zag-js/aria-hidden": "0.76.0",
+    "@zag-js/collection": "0.76.0",
+    "@zag-js/core": "0.76.0",
+    "@zag-js/dismissable": "0.76.0",
+    "@zag-js/dom-query": "0.76.0",
+    "@zag-js/dom-event": "0.76.0",
+    "@zag-js/utils": "0.76.0",
+    "@zag-js/popper": "0.76.0",
+    "@zag-js/types": "0.76.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"