@zag-js/combobox 1.6.2 → 1.8.0

package/dist/index.d.mts

@@ -38,6 +38,10 @@ interface NavigateDetails {
     value: string | null;
     node: HTMLAnchorElement;
 }
+interface SelectionDetails {
+    value: string[];
+    itemValue: string;
+}
 interface IntlTranslations {
     triggerLabel?: string | undefined;
     clearTriggerLabel?: string | undefined;
@@ -187,6 +191,10 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
      * or keyboard navigation.
      */
     onHighlightChange?: ((details: HighlightChangeDetails<T>) => void) | undefined;
+    /**
+     * Function called when an item is selected
+     */
+    onSelect?: ((details: SelectionDetails) => void) | undefined;
     /**
      * Function called when the popup is opened
      */

package/dist/index.d.ts

@@ -38,6 +38,10 @@ interface NavigateDetails {
     value: string | null;
     node: HTMLAnchorElement;
 }
+interface SelectionDetails {
+    value: string[];
+    itemValue: string;
+}
 interface IntlTranslations {
     triggerLabel?: string | undefined;
     clearTriggerLabel?: string | undefined;
@@ -187,6 +191,10 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
      * or keyboard navigation.
      */
     onHighlightChange?: ((details: HighlightChangeDetails<T>) => void) | undefined;
+    /**
+     * Function called when an item is selected
+     */
+    onSelect?: ((details: SelectionDetails) => void) | undefined;
     /**
      * Function called when the popup is opened
      */

package/dist/index.js

@@ -87,7 +87,7 @@ function connect(service, normalize) {
   function getItemState(props2) {
     const disabled2 = collection2.getItemDisabled(props2.item);
     const value = collection2.getItemValue(props2.item);
-    utils.ensure(value, `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
+    utils.ensure(value, () => `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
     return {
       value,
       disabled: Boolean(disabled2 || disabled2),
@@ -449,7 +449,8 @@ function connect(service, normalize) {
         ...parts.itemGroup.attrs,
         dir: prop("dir"),
         id: getItemGroupId(scope, id),
-        "aria-labelledby": getItemGroupLabelId(scope, id)
+        "aria-labelledby": getItemGroupLabelId(scope, id),
+        role: "group"
       });
     },
     getItemGroupLabelProps(props2) {
@@ -458,7 +459,7 @@ function connect(service, normalize) {
         ...parts.itemGroupLabel.attrs,
         dir: prop("dir"),
         id: getItemGroupLabelId(scope, htmlFor),
-        role: "group"
+        role: "presentation"
       });
     }
   };
@@ -1224,6 +1225,7 @@ var machine = core.createMachine({
         const highlightedValue = context.get("highlightedValue");
         if (!highlightedValue) return;
         const nextValue = prop("multiple") ? utils.addOrRemove(context.get("value"), highlightedValue) : [highlightedValue];
+        prop("onSelect")?.({ value: nextValue, itemValue: highlightedValue });
         context.set("value", nextValue);
         context.set("inputValue", getInputValue(params));
       },
@@ -1232,6 +1234,7 @@ var machine = core.createMachine({
         if (event.value == null) return;
         flush(() => {
           const nextValue = prop("multiple") ? utils.addOrRemove(context.get("value"), event.value) : [event.value];
+          prop("onSelect")?.({ value: nextValue, itemValue: event.value });
           context.set("value", nextValue);
           context.set("inputValue", getInputValue(params));
         });
@@ -1461,6 +1464,7 @@ var props = types.createProps()([
   "onOpenChange",
   "onOpenChange",
   "onPointerDownOutside",
+  "onSelect",
   "onValueChange",
   "open",
   "openOnChange",

package/dist/index.mjs

@@ -85,7 +85,7 @@ function connect(service, normalize) {
   function getItemState(props2) {
     const disabled2 = collection2.getItemDisabled(props2.item);
     const value = collection2.getItemValue(props2.item);
-    ensure(value, `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
+    ensure(value, () => `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
     return {
       value,
       disabled: Boolean(disabled2 || disabled2),
@@ -447,7 +447,8 @@ function connect(service, normalize) {
         ...parts.itemGroup.attrs,
         dir: prop("dir"),
         id: getItemGroupId(scope, id),
-        "aria-labelledby": getItemGroupLabelId(scope, id)
+        "aria-labelledby": getItemGroupLabelId(scope, id),
+        role: "group"
       });
     },
     getItemGroupLabelProps(props2) {
@@ -456,7 +457,7 @@ function connect(service, normalize) {
         ...parts.itemGroupLabel.attrs,
         dir: prop("dir"),
         id: getItemGroupLabelId(scope, htmlFor),
-        role: "group"
+        role: "presentation"
       });
     }
   };
@@ -1222,6 +1223,7 @@ var machine = createMachine({
         const highlightedValue = context.get("highlightedValue");
         if (!highlightedValue) return;
         const nextValue = prop("multiple") ? addOrRemove(context.get("value"), highlightedValue) : [highlightedValue];
+        prop("onSelect")?.({ value: nextValue, itemValue: highlightedValue });
         context.set("value", nextValue);
         context.set("inputValue", getInputValue(params));
       },
@@ -1230,6 +1232,7 @@ var machine = createMachine({
         if (event.value == null) return;
         flush(() => {
           const nextValue = prop("multiple") ? addOrRemove(context.get("value"), event.value) : [event.value];
+          prop("onSelect")?.({ value: nextValue, itemValue: event.value });
           context.set("value", nextValue);
           context.set("inputValue", getInputValue(params));
         });
@@ -1459,6 +1462,7 @@ var props = createProps()([
   "onOpenChange",
   "onOpenChange",
   "onPointerDownOutside",
+  "onSelect",
   "onValueChange",
   "open",
   "openOnChange",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/combobox",
-  "version": "1.6.2",
+  "version": "1.8.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.6.2",
-    "@zag-js/aria-hidden": "1.6.2",
-    "@zag-js/collection": "1.6.2",
-    "@zag-js/core": "1.6.2",
-    "@zag-js/dismissable": "1.6.2",
-    "@zag-js/dom-query": "1.6.2",
-    "@zag-js/utils": "1.6.2",
-    "@zag-js/popper": "1.6.2",
-    "@zag-js/types": "1.6.2"
+    "@zag-js/anatomy": "1.8.0",
+    "@zag-js/aria-hidden": "1.8.0",
+    "@zag-js/collection": "1.8.0",
+    "@zag-js/core": "1.8.0",
+    "@zag-js/dismissable": "1.8.0",
+    "@zag-js/dom-query": "1.8.0",
+    "@zag-js/utils": "1.8.0",
+    "@zag-js/popper": "1.8.0",
+    "@zag-js/types": "1.8.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"