@zag-js/combobox 1.17.3 → 1.18.0

package/dist/index.d.mts

@@ -254,7 +254,6 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
         currentPlacement?: Placement | undefined;
         highlightedItem: T | null;
         selectedItems: T[];
-        valueAsString: string;
     };
     computed: {
         isCustomValue: boolean;
@@ -263,6 +262,7 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
         autoComplete: boolean;
         autoHighlight: boolean;
         hasSelectedItems: boolean;
+        valueAsString: string;
     };
     event: EventObject;
     action: string;

package/dist/index.d.ts

@@ -254,7 +254,6 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
         currentPlacement?: Placement | undefined;
         highlightedItem: T | null;
         selectedItems: T[];
-        valueAsString: string;
     };
     computed: {
         isCustomValue: boolean;
@@ -263,6 +262,7 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
         autoComplete: boolean;
         autoHighlight: boolean;
         hasSelectedItems: boolean;
+        valueAsString: string;
     };
     event: EventObject;
     action: string;

package/dist/index.js

@@ -102,7 +102,7 @@ function connect(service, normalize) {
     highlightedValue,
     highlightedItem: context.get("highlightedItem"),
     value: context.get("value"),
-    valueAsString: context.get("valueAsString"),
+    valueAsString: computed("valueAsString"),
     hasSelectedItems: computed("hasSelectedItems"),
     selectedItems: context.get("selectedItems"),
     collection: prop("collection"),
@@ -528,7 +528,6 @@ var machine = createMachine({
             return item || collection2.find(v);
           });
           context.set("selectedItems", nextItems);
-          context.set("valueAsString", collection2.stringifyItems(nextItems));
           prop("onValueChange")?.({ value, items: nextItems });
         }
       })),
@@ -568,11 +567,6 @@ var machine = createMachine({
         const value = prop("value") || prop("defaultValue") || [];
         const selectedItems = prop("collection").findMany(value);
         return { defaultValue: selectedItems };
-      }),
-      valueAsString: bindable(() => {
-        const value = prop("value") || prop("defaultValue") || [];
-        const valueAsString = prop("collection").stringifyMany(value);
-        return { sync: true, defaultValue: valueAsString };
       })
     };
   },
@@ -582,7 +576,8 @@ var machine = createMachine({
     autoComplete: ({ prop }) => prop("inputBehavior") === "autocomplete",
     autoHighlight: ({ prop }) => prop("inputBehavior") === "autohighlight",
     hasSelectedItems: ({ context }) => context.get("value").length > 0,
-    isCustomValue: ({ context }) => context.get("inputValue") !== context.get("valueAsString")
+    valueAsString: ({ context, prop }) => prop("collection").stringifyItems(context.get("selectedItems")),
+    isCustomValue: ({ context, computed }) => context.get("inputValue") !== computed("valueAsString")
   },
   watch({ context, prop, track, action }) {
     track([() => context.hash("value")], () => {
@@ -1297,7 +1292,7 @@ var machine = createMachine({
       revertInputValue({ context, prop, computed }) {
         const selectionBehavior = prop("selectionBehavior");
         const inputValue = utils.match(selectionBehavior, {
-          replace: computed("hasSelectedItems") ? context.get("valueAsString") : "",
+          replace: computed("hasSelectedItems") ? computed("valueAsString") : "",
           preserve: context.get("inputValue"),
           clear: ""
         });
@@ -1435,10 +1430,10 @@ var machine = createMachine({
     }
   }
 });
-function getInputValue({ context, prop }) {
+function getInputValue({ context, prop, computed }) {
   return utils.match(prop("selectionBehavior"), {
     preserve: context.get("inputValue"),
-    replace: context.get("valueAsString"),
+    replace: computed("valueAsString"),
     clear: ""
   });
 }

package/dist/index.mjs

@@ -100,7 +100,7 @@ function connect(service, normalize) {
     highlightedValue,
     highlightedItem: context.get("highlightedItem"),
     value: context.get("value"),
-    valueAsString: context.get("valueAsString"),
+    valueAsString: computed("valueAsString"),
     hasSelectedItems: computed("hasSelectedItems"),
     selectedItems: context.get("selectedItems"),
     collection: prop("collection"),
@@ -526,7 +526,6 @@ var machine = createMachine({
             return item || collection2.find(v);
           });
           context.set("selectedItems", nextItems);
-          context.set("valueAsString", collection2.stringifyItems(nextItems));
           prop("onValueChange")?.({ value, items: nextItems });
         }
       })),
@@ -566,11 +565,6 @@ var machine = createMachine({
         const value = prop("value") || prop("defaultValue") || [];
         const selectedItems = prop("collection").findMany(value);
         return { defaultValue: selectedItems };
-      }),
-      valueAsString: bindable(() => {
-        const value = prop("value") || prop("defaultValue") || [];
-        const valueAsString = prop("collection").stringifyMany(value);
-        return { sync: true, defaultValue: valueAsString };
       })
     };
   },
@@ -580,7 +574,8 @@ var machine = createMachine({
     autoComplete: ({ prop }) => prop("inputBehavior") === "autocomplete",
     autoHighlight: ({ prop }) => prop("inputBehavior") === "autohighlight",
     hasSelectedItems: ({ context }) => context.get("value").length > 0,
-    isCustomValue: ({ context }) => context.get("inputValue") !== context.get("valueAsString")
+    valueAsString: ({ context, prop }) => prop("collection").stringifyItems(context.get("selectedItems")),
+    isCustomValue: ({ context, computed }) => context.get("inputValue") !== computed("valueAsString")
   },
   watch({ context, prop, track, action }) {
     track([() => context.hash("value")], () => {
@@ -1295,7 +1290,7 @@ var machine = createMachine({
       revertInputValue({ context, prop, computed }) {
         const selectionBehavior = prop("selectionBehavior");
         const inputValue = match(selectionBehavior, {
-          replace: computed("hasSelectedItems") ? context.get("valueAsString") : "",
+          replace: computed("hasSelectedItems") ? computed("valueAsString") : "",
           preserve: context.get("inputValue"),
           clear: ""
         });
@@ -1433,10 +1428,10 @@ var machine = createMachine({
     }
   }
 });
-function getInputValue({ context, prop }) {
+function getInputValue({ context, prop, computed }) {
   return match(prop("selectionBehavior"), {
     preserve: context.get("inputValue"),
-    replace: context.get("valueAsString"),
+    replace: computed("valueAsString"),
     clear: ""
   });
 }

package/package.json

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