@zag-js/combobox 1.7.0 → 1.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +8 -0
  2. package/dist/index.d.ts +8 -0
  3. package/dist/index.js +7 -3
  4. package/dist/index.mjs +7 -3
  5. package/package.json +10 -10
package/dist/index.d.mts CHANGED
@@ -38,6 +38,10 @@ interface NavigateDetails {
38
38
  value: string | null;
39
39
  node: HTMLAnchorElement;
40
40
  }
41
+ interface SelectionDetails {
42
+ value: string[];
43
+ itemValue: string;
44
+ }
41
45
  interface IntlTranslations {
42
46
  triggerLabel?: string | undefined;
43
47
  clearTriggerLabel?: string | undefined;
@@ -187,6 +191,10 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
187
191
  * or keyboard navigation.
188
192
  */
189
193
  onHighlightChange?: ((details: HighlightChangeDetails<T>) => void) | undefined;
194
+ /**
195
+ * Function called when an item is selected
196
+ */
197
+ onSelect?: ((details: SelectionDetails) => void) | undefined;
190
198
  /**
191
199
  * Function called when the popup is opened
192
200
  */
package/dist/index.d.ts CHANGED
@@ -38,6 +38,10 @@ interface NavigateDetails {
38
38
  value: string | null;
39
39
  node: HTMLAnchorElement;
40
40
  }
41
+ interface SelectionDetails {
42
+ value: string[];
43
+ itemValue: string;
44
+ }
41
45
  interface IntlTranslations {
42
46
  triggerLabel?: string | undefined;
43
47
  clearTriggerLabel?: string | undefined;
@@ -187,6 +191,10 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
187
191
  * or keyboard navigation.
188
192
  */
189
193
  onHighlightChange?: ((details: HighlightChangeDetails<T>) => void) | undefined;
194
+ /**
195
+ * Function called when an item is selected
196
+ */
197
+ onSelect?: ((details: SelectionDetails) => void) | undefined;
190
198
  /**
191
199
  * Function called when the popup is opened
192
200
  */
package/dist/index.js CHANGED
@@ -87,7 +87,7 @@ function connect(service, normalize) {
87
87
  function getItemState(props2) {
88
88
  const disabled2 = collection2.getItemDisabled(props2.item);
89
89
  const value = collection2.getItemValue(props2.item);
90
- utils.ensure(value, `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
90
+ utils.ensure(value, () => `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
91
91
  return {
92
92
  value,
93
93
  disabled: Boolean(disabled2 || disabled2),
@@ -449,7 +449,8 @@ function connect(service, normalize) {
449
449
  ...parts.itemGroup.attrs,
450
450
  dir: prop("dir"),
451
451
  id: getItemGroupId(scope, id),
452
- "aria-labelledby": getItemGroupLabelId(scope, id)
452
+ "aria-labelledby": getItemGroupLabelId(scope, id),
453
+ role: "group"
453
454
  });
454
455
  },
455
456
  getItemGroupLabelProps(props2) {
@@ -458,7 +459,7 @@ function connect(service, normalize) {
458
459
  ...parts.itemGroupLabel.attrs,
459
460
  dir: prop("dir"),
460
461
  id: getItemGroupLabelId(scope, htmlFor),
461
- role: "group"
462
+ role: "presentation"
462
463
  });
463
464
  }
464
465
  };
@@ -1224,6 +1225,7 @@ var machine = core.createMachine({
1224
1225
  const highlightedValue = context.get("highlightedValue");
1225
1226
  if (!highlightedValue) return;
1226
1227
  const nextValue = prop("multiple") ? utils.addOrRemove(context.get("value"), highlightedValue) : [highlightedValue];
1228
+ prop("onSelect")?.({ value: nextValue, itemValue: highlightedValue });
1227
1229
  context.set("value", nextValue);
1228
1230
  context.set("inputValue", getInputValue(params));
1229
1231
  },
@@ -1232,6 +1234,7 @@ var machine = core.createMachine({
1232
1234
  if (event.value == null) return;
1233
1235
  flush(() => {
1234
1236
  const nextValue = prop("multiple") ? utils.addOrRemove(context.get("value"), event.value) : [event.value];
1237
+ prop("onSelect")?.({ value: nextValue, itemValue: event.value });
1235
1238
  context.set("value", nextValue);
1236
1239
  context.set("inputValue", getInputValue(params));
1237
1240
  });
@@ -1461,6 +1464,7 @@ var props = types.createProps()([
1461
1464
  "onOpenChange",
1462
1465
  "onOpenChange",
1463
1466
  "onPointerDownOutside",
1467
+ "onSelect",
1464
1468
  "onValueChange",
1465
1469
  "open",
1466
1470
  "openOnChange",
package/dist/index.mjs CHANGED
@@ -85,7 +85,7 @@ function connect(service, normalize) {
85
85
  function getItemState(props2) {
86
86
  const disabled2 = collection2.getItemDisabled(props2.item);
87
87
  const value = collection2.getItemValue(props2.item);
88
- ensure(value, `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
88
+ ensure(value, () => `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
89
89
  return {
90
90
  value,
91
91
  disabled: Boolean(disabled2 || disabled2),
@@ -447,7 +447,8 @@ function connect(service, normalize) {
447
447
  ...parts.itemGroup.attrs,
448
448
  dir: prop("dir"),
449
449
  id: getItemGroupId(scope, id),
450
- "aria-labelledby": getItemGroupLabelId(scope, id)
450
+ "aria-labelledby": getItemGroupLabelId(scope, id),
451
+ role: "group"
451
452
  });
452
453
  },
453
454
  getItemGroupLabelProps(props2) {
@@ -456,7 +457,7 @@ function connect(service, normalize) {
456
457
  ...parts.itemGroupLabel.attrs,
457
458
  dir: prop("dir"),
458
459
  id: getItemGroupLabelId(scope, htmlFor),
459
- role: "group"
460
+ role: "presentation"
460
461
  });
461
462
  }
462
463
  };
@@ -1222,6 +1223,7 @@ var machine = createMachine({
1222
1223
  const highlightedValue = context.get("highlightedValue");
1223
1224
  if (!highlightedValue) return;
1224
1225
  const nextValue = prop("multiple") ? addOrRemove(context.get("value"), highlightedValue) : [highlightedValue];
1226
+ prop("onSelect")?.({ value: nextValue, itemValue: highlightedValue });
1225
1227
  context.set("value", nextValue);
1226
1228
  context.set("inputValue", getInputValue(params));
1227
1229
  },
@@ -1230,6 +1232,7 @@ var machine = createMachine({
1230
1232
  if (event.value == null) return;
1231
1233
  flush(() => {
1232
1234
  const nextValue = prop("multiple") ? addOrRemove(context.get("value"), event.value) : [event.value];
1235
+ prop("onSelect")?.({ value: nextValue, itemValue: event.value });
1233
1236
  context.set("value", nextValue);
1234
1237
  context.set("inputValue", getInputValue(params));
1235
1238
  });
@@ -1459,6 +1462,7 @@ var props = createProps()([
1459
1462
  "onOpenChange",
1460
1463
  "onOpenChange",
1461
1464
  "onPointerDownOutside",
1465
+ "onSelect",
1462
1466
  "onValueChange",
1463
1467
  "open",
1464
1468
  "openOnChange",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/combobox",
3
- "version": "1.7.0",
3
+ "version": "1.8.1",
4
4
  "description": "Core logic for the combobox widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -26,15 +26,15 @@
26
26
  "url": "https://github.com/chakra-ui/zag/issues"
27
27
  },
28
28
  "dependencies": {
29
- "@zag-js/anatomy": "1.7.0",
30
- "@zag-js/collection": "1.7.0",
31
- "@zag-js/core": "1.7.0",
32
- "@zag-js/dismissable": "1.7.0",
33
- "@zag-js/dom-query": "1.7.0",
34
- "@zag-js/utils": "1.7.0",
35
- "@zag-js/popper": "1.7.0",
36
- "@zag-js/types": "1.7.0",
37
- "@zag-js/aria-hidden": "1.7.0"
29
+ "@zag-js/anatomy": "1.8.1",
30
+ "@zag-js/aria-hidden": "1.8.1",
31
+ "@zag-js/collection": "1.8.1",
32
+ "@zag-js/core": "1.8.1",
33
+ "@zag-js/dismissable": "1.8.1",
34
+ "@zag-js/dom-query": "1.8.1",
35
+ "@zag-js/utils": "1.8.1",
36
+ "@zag-js/popper": "1.8.1",
37
+ "@zag-js/types": "1.8.1"
38
38
  },
39
39
  "devDependencies": {
40
40
  "clean-package": "2.2.0"