@zag-js/combobox 0.75.0 → 0.77.0

package/dist/index.d.mts

@@ -30,11 +30,6 @@ interface InputValueChangeDetails {
 interface OpenChangeDetails {
     open: boolean;
 }
-interface SelectionValueDetails<T extends CollectionItem = CollectionItem> {
-    inputValue: string;
-    selectedItems: T[];
-    valueAsString: string;
-}
 interface ScrollToIndexDetails {
     index: number;
     immediate?: boolean | undefined;
@@ -192,10 +187,6 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      * 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
@@ -415,4 +406,4 @@ declare function connect<T extends PropTypes, V extends CollectionItem>(state: S
 
 declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type SelectionValueDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };

package/dist/index.d.ts

@@ -30,11 +30,6 @@ interface InputValueChangeDetails {
 interface OpenChangeDetails {
     open: boolean;
 }
-interface SelectionValueDetails<T extends CollectionItem = CollectionItem> {
-    inputValue: string;
-    selectedItems: T[];
-    valueAsString: string;
-}
 interface ScrollToIndexDetails {
     index: number;
     immediate?: boolean | undefined;
@@ -192,10 +187,6 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      * 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
@@ -415,4 +406,4 @@ declare function connect<T extends PropTypes, V extends CollectionItem>(state: S
 
 declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type SelectionValueDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };

package/dist/index.js

@@ -1143,15 +1143,18 @@ function machine(userContext) {
         },
         selectHighlightedItem(ctx2) {
           set.value(ctx2, ctx2.highlightedValue);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         selectItem(ctx2, evt) {
           if (evt.value == null) return;
           set.value(ctx2, evt.value);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         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,13 @@ function machine(userContext) {
     }
   );
 }
+function getInputValue(ctx) {
+  return utils.match(ctx.selectionBehavior, {
+    preserve: ctx.inputValue,
+    replace: ctx.valueAsString,
+    clear: ""
+  });
+}
 var sync = {
   valueChange: (ctx) => {
     const prevSelectedItems = ctx.selectedItems;
@@ -1332,23 +1345,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));
         },
         selectItem(ctx2, evt) {
           if (evt.value == null) return;
           set.value(ctx2, evt.value);
+          set.inputValue(ctx2, getInputValue(ctx2));
         },
         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,13 @@ function machine(userContext) {
     }
   );
 }
+function getInputValue(ctx) {
+  return match(ctx.selectionBehavior, {
+    preserve: ctx.inputValue,
+    replace: ctx.valueAsString,
+    clear: ""
+  });
+}
 var sync = {
   valueChange: (ctx) => {
     const prevSelectedItems = ctx.selectedItems;
@@ -1330,23 +1343,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.77.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.77.0",
+    "@zag-js/aria-hidden": "0.77.0",
+    "@zag-js/collection": "0.77.0",
+    "@zag-js/core": "0.77.0",
+    "@zag-js/dismissable": "0.77.0",
+    "@zag-js/dom-query": "0.77.0",
+    "@zag-js/dom-event": "0.77.0",
+    "@zag-js/utils": "0.77.0",
+    "@zag-js/popper": "0.77.0",
+    "@zag-js/types": "0.77.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"