@zag-js/combobox 0.74.2 → 0.76.0

package/dist/index.d.mts

@@ -37,11 +37,11 @@ interface SelectionValueDetails<T extends CollectionItem = CollectionItem> {
 }
 interface ScrollToIndexDetails {
     index: number;
-    immediate?: boolean;
+    immediate?: boolean | undefined;
 }
 interface IntlTranslations {
-    triggerLabel?: string;
-    clearTriggerLabel?: string;
+    triggerLabel?: string | undefined;
+    clearTriggerLabel?: string | undefined;
 }
 type ElementIds = Partial<{
     root: string;
@@ -60,15 +60,15 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Whether the combobox is open
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the combobox open state is controlled by the user
      */
-    "open.controlled"?: boolean;
+    "open.controlled"?: boolean | undefined;
     /**
      * The ids of the elements in the combobox. Useful for composition.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * The current value of the combobox's input
      */
@@ -76,32 +76,32 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * The `name` attribute of the combobox's input. Useful for form submission
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The associate form of the combobox.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * Whether the combobox is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the combobox is readonly. This puts the combobox in a "non-editable" mode
      * but the user can still interact with it
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Whether the combobox is invalid
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Whether the combobox is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The placeholder text of the combobox's input
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
      * The active item's id. Used to set the `aria-activedescendant` attribute
      */
@@ -132,26 +132,26 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Whether to autofocus the input on mount
      */
-    autoFocus?: boolean;
+    autoFocus?: boolean | undefined;
     /**
      * Whether to open the combobox popup on initial click on the input
      * @default false
      */
-    openOnClick?: boolean;
+    openOnClick?: boolean | undefined;
     /**
      * Whether to show the combobox when the input value changes
      * @default true
      */
-    openOnChange?: boolean | ((details: InputValueChangeDetails) => boolean);
+    openOnChange?: boolean | ((details: InputValueChangeDetails) => boolean) | undefined;
     /**
      * Whether to allow typing custom values in the input
      */
-    allowCustomValue?: boolean;
+    allowCustomValue?: boolean | undefined;
     /**
      * Whether to loop the keyboard navigation through the items
      * @default true
      */
-    loopFocus?: boolean;
+    loopFocus?: boolean | undefined;
     /**
      * The positioning options to dynamically position the menu
      */
@@ -159,20 +159,20 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Function called when the input's value changes
      */
-    onInputValueChange?: (details: InputValueChangeDetails) => void;
+    onInputValueChange?: ((details: InputValueChangeDetails) => void) | undefined;
     /**
      * Function called when a new item is selected
      */
-    onValueChange?: (details: ValueChangeDetails<T>) => void;
+    onValueChange?: ((details: ValueChangeDetails<T>) => void) | undefined;
     /**
      * Function called when an item is highlighted using the pointer
      * or keyboard navigation.
      */
-    onHighlightChange?: (details: HighlightChangeDetails<T>) => void;
+    onHighlightChange?: ((details: HighlightChangeDetails<T>) => void) | undefined;
     /**
      * Function called when the popup is opened
      */
-    onOpenChange?: (details: OpenChangeDetails) => void;
+    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
@@ -187,15 +187,15 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      * **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`.
      * It is recommended to render the selected items in a separate container.
      */
-    multiple?: boolean;
+    multiple?: boolean | undefined;
     /**
      * Whether to close the combobox when an item is selected.
      */
-    closeOnSelect?: boolean;
+    closeOnSelect?: boolean | undefined;
     /**
      * Function to get the display value of the selected item
      */
-    getSelectionValue?: (details: SelectionValueDetails<T>) => string;
+    getSelectionValue?: ((details: SelectionValueDetails<T>) => string) | undefined;
     /**
      * Whether to open the combobox on arrow key press
      * @default true
@@ -204,7 +204,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Function to scroll to a specific index
      */
-    scrollToIndexFn?: (details: ScrollToIndexDetails) => void;
+    scrollToIndexFn?: ((details: ScrollToIndexDetails) => void) | undefined;
     /**
      * Whether the combobox is a composed with other composite widgets like tabs
      * @default true
@@ -213,7 +213,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Whether to disable registering this a dismissable layer
      */
-    disableLayer?: boolean;
+    disableLayer?: boolean | undefined;
 }
 type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<PublicContext<T>, "id" | "collection">;
 type ComputedContext = Readonly<{
@@ -270,13 +270,13 @@ interface TriggerProps {
     /**
      * Whether the trigger is focusable
      */
-    focusable?: boolean;
+    focusable?: boolean | undefined;
 }
 interface ItemProps {
     /**
      * Whether hovering outside should clear the highlighted state
      */
-    persistFocus?: boolean;
+    persistFocus?: boolean | undefined;
     /**
      * The item to render
      */

package/dist/index.d.ts

@@ -37,11 +37,11 @@ interface SelectionValueDetails<T extends CollectionItem = CollectionItem> {
 }
 interface ScrollToIndexDetails {
     index: number;
-    immediate?: boolean;
+    immediate?: boolean | undefined;
 }
 interface IntlTranslations {
-    triggerLabel?: string;
-    clearTriggerLabel?: string;
+    triggerLabel?: string | undefined;
+    clearTriggerLabel?: string | undefined;
 }
 type ElementIds = Partial<{
     root: string;
@@ -60,15 +60,15 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Whether the combobox is open
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the combobox open state is controlled by the user
      */
-    "open.controlled"?: boolean;
+    "open.controlled"?: boolean | undefined;
     /**
      * The ids of the elements in the combobox. Useful for composition.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * The current value of the combobox's input
      */
@@ -76,32 +76,32 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * The `name` attribute of the combobox's input. Useful for form submission
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The associate form of the combobox.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * Whether the combobox is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the combobox is readonly. This puts the combobox in a "non-editable" mode
      * but the user can still interact with it
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Whether the combobox is invalid
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Whether the combobox is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The placeholder text of the combobox's input
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
      * The active item's id. Used to set the `aria-activedescendant` attribute
      */
@@ -132,26 +132,26 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Whether to autofocus the input on mount
      */
-    autoFocus?: boolean;
+    autoFocus?: boolean | undefined;
     /**
      * Whether to open the combobox popup on initial click on the input
      * @default false
      */
-    openOnClick?: boolean;
+    openOnClick?: boolean | undefined;
     /**
      * Whether to show the combobox when the input value changes
      * @default true
      */
-    openOnChange?: boolean | ((details: InputValueChangeDetails) => boolean);
+    openOnChange?: boolean | ((details: InputValueChangeDetails) => boolean) | undefined;
     /**
      * Whether to allow typing custom values in the input
      */
-    allowCustomValue?: boolean;
+    allowCustomValue?: boolean | undefined;
     /**
      * Whether to loop the keyboard navigation through the items
      * @default true
      */
-    loopFocus?: boolean;
+    loopFocus?: boolean | undefined;
     /**
      * The positioning options to dynamically position the menu
      */
@@ -159,20 +159,20 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Function called when the input's value changes
      */
-    onInputValueChange?: (details: InputValueChangeDetails) => void;
+    onInputValueChange?: ((details: InputValueChangeDetails) => void) | undefined;
     /**
      * Function called when a new item is selected
      */
-    onValueChange?: (details: ValueChangeDetails<T>) => void;
+    onValueChange?: ((details: ValueChangeDetails<T>) => void) | undefined;
     /**
      * Function called when an item is highlighted using the pointer
      * or keyboard navigation.
      */
-    onHighlightChange?: (details: HighlightChangeDetails<T>) => void;
+    onHighlightChange?: ((details: HighlightChangeDetails<T>) => void) | undefined;
     /**
      * Function called when the popup is opened
      */
-    onOpenChange?: (details: OpenChangeDetails) => void;
+    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
@@ -187,15 +187,15 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      * **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`.
      * It is recommended to render the selected items in a separate container.
      */
-    multiple?: boolean;
+    multiple?: boolean | undefined;
     /**
      * Whether to close the combobox when an item is selected.
      */
-    closeOnSelect?: boolean;
+    closeOnSelect?: boolean | undefined;
     /**
      * Function to get the display value of the selected item
      */
-    getSelectionValue?: (details: SelectionValueDetails<T>) => string;
+    getSelectionValue?: ((details: SelectionValueDetails<T>) => string) | undefined;
     /**
      * Whether to open the combobox on arrow key press
      * @default true
@@ -204,7 +204,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Function to scroll to a specific index
      */
-    scrollToIndexFn?: (details: ScrollToIndexDetails) => void;
+    scrollToIndexFn?: ((details: ScrollToIndexDetails) => void) | undefined;
     /**
      * Whether the combobox is a composed with other composite widgets like tabs
      * @default true
@@ -213,7 +213,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * Whether to disable registering this a dismissable layer
      */
-    disableLayer?: boolean;
+    disableLayer?: boolean | undefined;
 }
 type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<PublicContext<T>, "id" | "collection">;
 type ComputedContext = Readonly<{
@@ -270,13 +270,13 @@ interface TriggerProps {
     /**
      * Whether the trigger is focusable
      */
-    focusable?: boolean;
+    focusable?: boolean | undefined;
 }
 interface ItemProps {
     /**
      * Whether hovering outside should clear the highlighted state
      */
-    persistFocus?: boolean;
+    persistFocus?: boolean | undefined;
     /**
      * The item to render
      */

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.74.2",
+  "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.74.2",
-    "@zag-js/aria-hidden": "0.74.2",
-    "@zag-js/collection": "0.74.2",
-    "@zag-js/core": "0.74.2",
-    "@zag-js/dismissable": "0.74.2",
-    "@zag-js/dom-query": "0.74.2",
-    "@zag-js/dom-event": "0.74.2",
-    "@zag-js/utils": "0.74.2",
-    "@zag-js/popper": "0.74.2",
-    "@zag-js/types": "0.74.2"
+    "@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"