@zag-js/combobox 0.69.0 → 0.71.0

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.
package/dist/index.js CHANGED
@@ -1,35 +1,17 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
1
+ 'use strict';
19
2
 
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- anatomy: () => anatomy,
24
- collection: () => collection,
25
- connect: () => connect,
26
- machine: () => machine
27
- });
28
- module.exports = __toCommonJS(src_exports);
3
+ var anatomy$1 = require('@zag-js/anatomy');
4
+ var collection$1 = require('@zag-js/collection');
5
+ var core = require('@zag-js/core');
6
+ var domEvent = require('@zag-js/dom-event');
7
+ var domQuery = require('@zag-js/dom-query');
8
+ var popper = require('@zag-js/popper');
9
+ var ariaHidden = require('@zag-js/aria-hidden');
10
+ var dismissable = require('@zag-js/dismissable');
11
+ var utils = require('@zag-js/utils');
29
12
 
30
13
  // src/combobox.anatomy.ts
31
- var import_anatomy = require("@zag-js/anatomy");
32
- var anatomy = (0, import_anatomy.createAnatomy)("combobox").parts(
14
+ var anatomy = anatomy$1.createAnatomy("combobox").parts(
33
15
  "root",
34
16
  "clearTrigger",
35
17
  "content",
@@ -46,25 +28,13 @@ var anatomy = (0, import_anatomy.createAnatomy)("combobox").parts(
46
28
  "trigger"
47
29
  );
48
30
  var parts = anatomy.build();
49
-
50
- // src/combobox.collection.ts
51
- var import_collection = require("@zag-js/collection");
52
- var import_core = require("@zag-js/core");
53
31
  var collection = (options) => {
54
- return (0, import_core.ref)(new import_collection.ListCollection(options));
32
+ return core.ref(new collection$1.ListCollection(options));
55
33
  };
56
34
  collection.empty = () => {
57
- return (0, import_core.ref)(new import_collection.ListCollection({ items: [] }));
35
+ return core.ref(new collection$1.ListCollection({ items: [] }));
58
36
  };
59
-
60
- // src/combobox.connect.ts
61
- var import_dom_event = require("@zag-js/dom-event");
62
- var import_dom_query2 = require("@zag-js/dom-query");
63
- var import_popper = require("@zag-js/popper");
64
-
65
- // src/combobox.dom.ts
66
- var import_dom_query = require("@zag-js/dom-query");
67
- var dom = (0, import_dom_query.createScope)({
37
+ var dom = domQuery.createScope({
68
38
  getRootId: (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`,
69
39
  getLabelId: (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`,
70
40
  getControlId: (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`,
@@ -86,7 +56,7 @@ var dom = (0, import_dom_query.createScope)({
86
56
  const value = ctx.highlightedValue;
87
57
  if (value == null) return;
88
58
  const selector = `[role=option][data-value="${CSS.escape(value)}"`;
89
- return (0, import_dom_query.query)(dom.getContentEl(ctx), selector);
59
+ return domQuery.query(dom.getContentEl(ctx), selector);
90
60
  },
91
61
  focusInputEl: (ctx) => {
92
62
  const inputEl = dom.getInputEl(ctx);
@@ -112,7 +82,7 @@ function connect(state, send, normalize) {
112
82
  const focused = state.hasTag("focused");
113
83
  const composite = state.context.composite;
114
84
  const highlightedValue = state.context.highlightedValue;
115
- const popperStyles = (0, import_popper.getPlacementStyles)({
85
+ const popperStyles = popper.getPlacementStyles({
116
86
  ...state.context.positioning,
117
87
  placement: state.context.currentPlacement
118
88
  });
@@ -175,8 +145,8 @@ function connect(state, send, normalize) {
175
145
  ...parts.root.attrs,
176
146
  dir: state.context.dir,
177
147
  id: dom.getRootId(state.context),
178
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
179
- "data-readonly": (0, import_dom_query2.dataAttr)(readOnly)
148
+ "data-invalid": domQuery.dataAttr(invalid),
149
+ "data-readonly": domQuery.dataAttr(readOnly)
180
150
  });
181
151
  },
182
152
  getLabelProps() {
@@ -185,10 +155,10 @@ function connect(state, send, normalize) {
185
155
  dir: state.context.dir,
186
156
  htmlFor: dom.getInputId(state.context),
187
157
  id: dom.getLabelId(state.context),
188
- "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
189
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
190
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
191
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
158
+ "data-readonly": domQuery.dataAttr(readOnly),
159
+ "data-disabled": domQuery.dataAttr(disabled),
160
+ "data-invalid": domQuery.dataAttr(invalid),
161
+ "data-focus": domQuery.dataAttr(focused),
192
162
  onClick(event) {
193
163
  if (composite) return;
194
164
  event.preventDefault();
@@ -202,9 +172,9 @@ function connect(state, send, normalize) {
202
172
  dir: state.context.dir,
203
173
  id: dom.getControlId(state.context),
204
174
  "data-state": open ? "open" : "closed",
205
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
206
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
207
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid)
175
+ "data-focus": domQuery.dataAttr(focused),
176
+ "data-disabled": domQuery.dataAttr(disabled),
177
+ "data-invalid": domQuery.dataAttr(invalid)
208
178
  });
209
179
  },
210
180
  getPositionerProps() {
@@ -219,8 +189,8 @@ function connect(state, send, normalize) {
219
189
  return normalize.input({
220
190
  ...parts.input.attrs,
221
191
  dir: state.context.dir,
222
- "aria-invalid": (0, import_dom_query2.ariaAttr)(invalid),
223
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
192
+ "aria-invalid": domQuery.ariaAttr(invalid),
193
+ "data-invalid": domQuery.dataAttr(invalid),
224
194
  name: state.context.name,
225
195
  form: state.context.form,
226
196
  disabled,
@@ -261,7 +231,7 @@ function connect(state, send, normalize) {
261
231
  onKeyDown(event) {
262
232
  if (event.defaultPrevented) return;
263
233
  if (!interactive) return;
264
- if (event.ctrlKey || event.shiftKey || (0, import_dom_query2.isComposingEvent)(event)) return;
234
+ if (event.ctrlKey || event.shiftKey || domQuery.isComposingEvent(event)) return;
265
235
  const openOnKeyPress = state.context.openOnKeyPress;
266
236
  const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
267
237
  const keypress = true;
@@ -296,14 +266,14 @@ function connect(state, send, normalize) {
296
266
  event2.preventDefault();
297
267
  }
298
268
  const itemEl = dom.getHighlightedItemEl(state.context);
299
- (0, import_dom_event.clickIfLink)(itemEl);
269
+ domEvent.clickIfLink(itemEl);
300
270
  },
301
271
  Escape() {
302
272
  send({ type: "INPUT.ESCAPE", keypress });
303
273
  event.preventDefault();
304
274
  }
305
275
  };
306
- const key = (0, import_dom_event.getEventKey)(event, state.context);
276
+ const key = domEvent.getEventKey(event, state.context);
307
277
  const exec = keymap[key];
308
278
  exec?.(event);
309
279
  }
@@ -322,10 +292,10 @@ function connect(state, send, normalize) {
322
292
  "data-state": open ? "open" : "closed",
323
293
  "aria-controls": open ? dom.getContentId(state.context) : void 0,
324
294
  disabled,
325
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
326
- "data-focusable": (0, import_dom_query2.dataAttr)(props.focusable),
327
- "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
328
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
295
+ "data-invalid": domQuery.dataAttr(invalid),
296
+ "data-focusable": domQuery.dataAttr(props.focusable),
297
+ "data-readonly": domQuery.dataAttr(readOnly),
298
+ "data-disabled": domQuery.dataAttr(disabled),
329
299
  onFocus() {
330
300
  if (!props.focusable) return;
331
301
  send({ type: "INPUT.FOCUS", src: "trigger" });
@@ -333,7 +303,7 @@ function connect(state, send, normalize) {
333
303
  onClick(event) {
334
304
  if (event.defaultPrevented) return;
335
305
  if (!interactive) return;
336
- if (!(0, import_dom_event.isLeftClick)(event)) return;
306
+ if (!domEvent.isLeftClick(event)) return;
337
307
  send("TRIGGER.CLICK");
338
308
  },
339
309
  onPointerDown(event) {
@@ -355,7 +325,7 @@ function connect(state, send, normalize) {
355
325
  send({ type: "INPUT.ARROW_UP", src: "trigger" });
356
326
  }
357
327
  };
358
- const key = (0, import_dom_event.getEventKey)(event, state.context);
328
+ const key = domEvent.getEventKey(event, state.context);
359
329
  const exec = keyMap[key];
360
330
  if (exec) {
361
331
  exec(event);
@@ -397,7 +367,7 @@ function connect(state, send, normalize) {
397
367
  type: "button",
398
368
  tabIndex: -1,
399
369
  disabled,
400
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
370
+ "data-invalid": domQuery.dataAttr(invalid),
401
371
  "aria-label": translations.clearTriggerLabel,
402
372
  "aria-controls": dom.getInputId(state.context),
403
373
  hidden: !state.context.value.length,
@@ -421,11 +391,11 @@ function connect(state, send, normalize) {
421
391
  id: dom.getItemId(state.context, value),
422
392
  role: "option",
423
393
  tabIndex: -1,
424
- "data-highlighted": (0, import_dom_query2.dataAttr)(itemState.highlighted),
394
+ "data-highlighted": domQuery.dataAttr(itemState.highlighted),
425
395
  "data-state": itemState.selected ? "checked" : "unchecked",
426
- "aria-selected": (0, import_dom_query2.ariaAttr)(itemState.highlighted),
427
- "aria-disabled": (0, import_dom_query2.ariaAttr)(itemState.disabled),
428
- "data-disabled": (0, import_dom_query2.dataAttr)(itemState.disabled),
396
+ "aria-selected": domQuery.ariaAttr(itemState.highlighted),
397
+ "aria-disabled": domQuery.ariaAttr(itemState.disabled),
398
+ "data-disabled": domQuery.dataAttr(itemState.disabled),
429
399
  "data-value": itemState.value,
430
400
  onPointerMove() {
431
401
  if (itemState.disabled) return;
@@ -440,9 +410,9 @@ function connect(state, send, normalize) {
440
410
  send({ type: "ITEM.POINTER_LEAVE", value });
441
411
  },
442
412
  onClick(event) {
443
- if ((0, import_dom_query2.isDownloadingEvent)(event)) return;
444
- if ((0, import_dom_query2.isOpeningInNewTab)(event)) return;
445
- if ((0, import_dom_event.isContextMenuEvent)(event)) return;
413
+ if (domQuery.isDownloadingEvent(event)) return;
414
+ if (domQuery.isOpeningInNewTab(event)) return;
415
+ if (domEvent.isContextMenuEvent(event)) return;
446
416
  if (itemState.disabled) return;
447
417
  send({ type: "ITEM.CLICK", src: "click", value });
448
418
  }
@@ -454,8 +424,8 @@ function connect(state, send, normalize) {
454
424
  ...parts.itemText.attrs,
455
425
  dir: state.context.dir,
456
426
  "data-state": itemState.selected ? "checked" : "unchecked",
457
- "data-disabled": (0, import_dom_query2.dataAttr)(itemState.disabled),
458
- "data-highlighted": (0, import_dom_query2.dataAttr)(itemState.highlighted)
427
+ "data-disabled": domQuery.dataAttr(itemState.disabled),
428
+ "data-highlighted": domQuery.dataAttr(itemState.highlighted)
459
429
  });
460
430
  },
461
431
  getItemIndicatorProps(props) {
@@ -488,18 +458,10 @@ function connect(state, send, normalize) {
488
458
  }
489
459
  };
490
460
  }
491
-
492
- // src/combobox.machine.ts
493
- var import_aria_hidden = require("@zag-js/aria-hidden");
494
- var import_core2 = require("@zag-js/core");
495
- var import_dismissable = require("@zag-js/dismissable");
496
- var import_dom_query3 = require("@zag-js/dom-query");
497
- var import_popper2 = require("@zag-js/popper");
498
- var import_utils = require("@zag-js/utils");
499
- var { and, not } = import_core2.guards;
461
+ var { and, not } = core.guards;
500
462
  function machine(userContext) {
501
- const ctx = (0, import_utils.compact)(userContext);
502
- return (0, import_core2.createMachine)(
463
+ const ctx = utils.compact(userContext);
464
+ return core.createMachine(
503
465
  {
504
466
  id: "combobox",
505
467
  initial: ctx.open ? "suggesting" : "idle",
@@ -525,7 +487,6 @@ function machine(userContext) {
525
487
  collection: ctx.collection ?? collection.empty(),
526
488
  positioning: {
527
489
  placement: "bottom",
528
- flip: false,
529
490
  sameWidth: true,
530
491
  ...ctx.positioning
531
492
  },
@@ -1053,7 +1014,7 @@ function machine(userContext) {
1053
1014
  closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
1054
1015
  isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
1055
1016
  openOnChange: (ctx2, evt) => {
1056
- if ((0, import_utils.isBoolean)(ctx2.openOnChange)) return ctx2.openOnChange;
1017
+ if (utils.isBoolean(ctx2.openOnChange)) return ctx2.openOnChange;
1057
1018
  return !!ctx2.openOnChange?.({ inputValue: evt.value });
1058
1019
  },
1059
1020
  restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
@@ -1063,7 +1024,7 @@ function machine(userContext) {
1063
1024
  trackDismissableLayer(ctx2, _evt, { send }) {
1064
1025
  if (ctx2.disableLayer) return;
1065
1026
  const contentEl = () => dom.getContentEl(ctx2);
1066
- return (0, import_dismissable.trackDismissableElement)(contentEl, {
1027
+ return dismissable.trackDismissableElement(contentEl, {
1067
1028
  defer: true,
1068
1029
  exclude: () => [dom.getInputEl(ctx2), dom.getTriggerEl(ctx2), dom.getClearTriggerEl(ctx2)],
1069
1030
  onFocusOutside: ctx2.onFocusOutside,
@@ -1080,13 +1041,13 @@ function machine(userContext) {
1080
1041
  });
1081
1042
  },
1082
1043
  hideOtherElements(ctx2) {
1083
- return (0, import_aria_hidden.ariaHidden)([dom.getInputEl(ctx2), dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
1044
+ return ariaHidden.ariaHidden([dom.getInputEl(ctx2), dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
1084
1045
  },
1085
1046
  computePlacement(ctx2) {
1086
1047
  const controlEl = () => dom.getControlEl(ctx2);
1087
1048
  const positionerEl = () => dom.getPositionerEl(ctx2);
1088
1049
  ctx2.currentPlacement = ctx2.positioning.placement;
1089
- return (0, import_popper2.getPlacement)(controlEl, positionerEl, {
1050
+ return popper.getPlacement(controlEl, positionerEl, {
1090
1051
  ...ctx2.positioning,
1091
1052
  defer: true,
1092
1053
  onComplete(data) {
@@ -1099,7 +1060,7 @@ function machine(userContext) {
1099
1060
  if (!ctx2.autoHighlight) return;
1100
1061
  const exec = () => send("CHILDREN_CHANGE");
1101
1062
  const contentEl = () => dom.getContentEl(ctx2);
1102
- return (0, import_dom_query3.observeChildren)(contentEl, {
1063
+ return domQuery.observeChildren(contentEl, {
1103
1064
  callback: exec,
1104
1065
  defer: true
1105
1066
  });
@@ -1118,14 +1079,14 @@ function machine(userContext) {
1118
1079
  ctx2.scrollToIndexFn({ index: highlightedIndex, immediate });
1119
1080
  return;
1120
1081
  }
1121
- const rafCleanup2 = (0, import_dom_query3.raf)(() => {
1122
- (0, import_dom_query3.scrollIntoView)(itemEl, { rootEl: contentEl, block: "nearest" });
1082
+ const rafCleanup2 = domQuery.raf(() => {
1083
+ domQuery.scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" });
1123
1084
  });
1124
1085
  cleanups.push(rafCleanup2);
1125
1086
  };
1126
- const rafCleanup = (0, import_dom_query3.raf)(() => exec(true));
1087
+ const rafCleanup = domQuery.raf(() => exec(true));
1127
1088
  cleanups.push(rafCleanup);
1128
- const observerCleanup = (0, import_dom_query3.observeAttributes)(inputEl, {
1089
+ const observerCleanup = domQuery.observeAttributes(inputEl, {
1129
1090
  attributes: ["aria-activedescendant"],
1130
1091
  callback: () => exec(false)
1131
1092
  });
@@ -1139,7 +1100,7 @@ function machine(userContext) {
1139
1100
  reposition(ctx2, evt) {
1140
1101
  const controlEl = () => dom.getControlEl(ctx2);
1141
1102
  const positionerEl = () => dom.getPositionerEl(ctx2);
1142
- (0, import_popper2.getPlacement)(controlEl, positionerEl, {
1103
+ popper.getPlacement(controlEl, positionerEl, {
1143
1104
  ...ctx2.positioning,
1144
1105
  ...evt.options,
1145
1106
  defer: true,
@@ -1169,12 +1130,12 @@ function machine(userContext) {
1169
1130
  set.value(ctx2, value);
1170
1131
  },
1171
1132
  setInitialFocus(ctx2) {
1172
- (0, import_dom_query3.raf)(() => {
1133
+ domQuery.raf(() => {
1173
1134
  dom.focusInputEl(ctx2);
1174
1135
  });
1175
1136
  },
1176
1137
  setFinalFocus(ctx2) {
1177
- (0, import_dom_query3.raf)(() => {
1138
+ domQuery.raf(() => {
1178
1139
  const triggerEl = dom.getTriggerEl(ctx2);
1179
1140
  if (triggerEl?.dataset.focusable == null) {
1180
1141
  dom.focusInputEl(ctx2);
@@ -1201,7 +1162,7 @@ function machine(userContext) {
1201
1162
  set.inputValue(ctx2, "");
1202
1163
  },
1203
1164
  revertInputValue(ctx2) {
1204
- const inputValue = (0, import_utils.match)(ctx2.selectionBehavior, {
1165
+ const inputValue = utils.match(ctx2.selectionBehavior, {
1205
1166
  replace: ctx2.hasSelectedItems ? ctx2.valueAsString : "",
1206
1167
  preserve: ctx2.inputValue,
1207
1168
  clear: ""
@@ -1215,7 +1176,7 @@ function machine(userContext) {
1215
1176
  ctx2.selectedItems = selectedItems;
1216
1177
  ctx2.valueAsString = valueAsString;
1217
1178
  if (ctx2.inputValue.trim() || ctx2.multiple) return;
1218
- ctx2.inputValue = (0, import_utils.match)(ctx2.selectionBehavior, {
1179
+ ctx2.inputValue = utils.match(ctx2.selectionBehavior, {
1219
1180
  preserve: ctx2.inputValue || valueAsString,
1220
1181
  replace: valueAsString,
1221
1182
  clear: ""
@@ -1227,7 +1188,7 @@ function machine(userContext) {
1227
1188
  }
1228
1189
  },
1229
1190
  setSelectedItems(ctx2, evt) {
1230
- if (!(0, import_utils.isArray)(evt.value)) return;
1191
+ if (!utils.isArray(evt.value)) return;
1231
1192
  set.value(ctx2, evt.value);
1232
1193
  },
1233
1194
  clearSelectedItems(ctx2) {
@@ -1249,20 +1210,20 @@ function machine(userContext) {
1249
1210
  ctx2.onOpenChange?.({ open: false });
1250
1211
  },
1251
1212
  highlightFirstItem(ctx2) {
1252
- (0, import_dom_query3.raf)(() => {
1213
+ domQuery.raf(() => {
1253
1214
  const value = ctx2.collection.firstValue;
1254
1215
  set.highlightedValue(ctx2, value, true);
1255
1216
  });
1256
1217
  },
1257
1218
  highlightFirstItemIfNeeded(ctx2) {
1258
1219
  if (!ctx2.autoHighlight) return;
1259
- (0, import_dom_query3.raf)(() => {
1220
+ domQuery.raf(() => {
1260
1221
  const value = ctx2.collection.firstValue;
1261
1222
  set.highlightedValue(ctx2, value);
1262
1223
  });
1263
1224
  },
1264
1225
  highlightLastItem(ctx2) {
1265
- (0, import_dom_query3.raf)(() => {
1226
+ domQuery.raf(() => {
1266
1227
  const value = ctx2.collection.lastValue;
1267
1228
  set.highlightedValue(ctx2, value);
1268
1229
  });
@@ -1288,13 +1249,13 @@ function machine(userContext) {
1288
1249
  set.highlightedValue(ctx2, value);
1289
1250
  },
1290
1251
  highlightFirstSelectedItem(ctx2) {
1291
- (0, import_dom_query3.raf)(() => {
1252
+ domQuery.raf(() => {
1292
1253
  const [value] = ctx2.collection.sort(ctx2.value);
1293
1254
  set.highlightedValue(ctx2, value);
1294
1255
  });
1295
1256
  },
1296
1257
  highlightFirstOrSelectedItem(ctx2) {
1297
- (0, import_dom_query3.raf)(() => {
1258
+ domQuery.raf(() => {
1298
1259
  let value = null;
1299
1260
  if (ctx2.hasSelectedItems) {
1300
1261
  value = ctx2.collection.sort(ctx2.value)[0];
@@ -1305,7 +1266,7 @@ function machine(userContext) {
1305
1266
  });
1306
1267
  },
1307
1268
  highlightLastOrSelectedItem(ctx2) {
1308
- (0, import_dom_query3.raf)(() => {
1269
+ domQuery.raf(() => {
1309
1270
  let value = null;
1310
1271
  if (ctx2.hasSelectedItems) {
1311
1272
  value = ctx2.collection.sort(ctx2.value)[0];
@@ -1319,7 +1280,7 @@ function machine(userContext) {
1319
1280
  const inputEl = dom.getInputEl(ctx2);
1320
1281
  if (!ctx2.autoComplete || !inputEl || !evt.keypress) return;
1321
1282
  const valueText = ctx2.collection.stringify(ctx2.highlightedValue);
1322
- (0, import_dom_query3.raf)(() => {
1283
+ domQuery.raf(() => {
1323
1284
  inputEl.value = valueText || ctx2.inputValue;
1324
1285
  });
1325
1286
  },
@@ -1357,7 +1318,7 @@ var sync = {
1357
1318
  valueAsString
1358
1319
  });
1359
1320
  } else {
1360
- inputValue = (0, import_utils.match)(ctx.selectionBehavior, {
1321
+ inputValue = utils.match(ctx.selectionBehavior, {
1361
1322
  replace: ctx.valueAsString,
1362
1323
  preserve: ctx.inputValue,
1363
1324
  clear: ""
@@ -1390,37 +1351,34 @@ var invoke = {
1390
1351
  };
1391
1352
  var set = {
1392
1353
  value: (ctx, value, force = false) => {
1393
- if ((0, import_utils.isEqual)(ctx.value, value)) return;
1354
+ if (utils.isEqual(ctx.value, value)) return;
1394
1355
  if (value == null && !force) return;
1395
1356
  if (value == null && force) {
1396
1357
  ctx.value = [];
1397
1358
  invoke.valueChange(ctx);
1398
1359
  return;
1399
1360
  }
1400
- if ((0, import_utils.isArray)(value)) {
1361
+ if (utils.isArray(value)) {
1401
1362
  ctx.value = value;
1402
1363
  } else if (value != null) {
1403
- ctx.value = ctx.multiple ? (0, import_utils.addOrRemove)(ctx.value, value) : [value];
1364
+ ctx.value = ctx.multiple ? utils.addOrRemove(ctx.value, value) : [value];
1404
1365
  }
1405
1366
  invoke.valueChange(ctx);
1406
1367
  },
1407
1368
  highlightedValue: (ctx, value, force = false) => {
1408
- if ((0, import_utils.isEqual)(ctx.highlightedValue, value)) return;
1369
+ if (utils.isEqual(ctx.highlightedValue, value)) return;
1409
1370
  if (!value && !force) return;
1410
1371
  ctx.highlightedValue = value || null;
1411
1372
  invoke.highlightChange(ctx);
1412
1373
  },
1413
1374
  inputValue: (ctx, value) => {
1414
- if ((0, import_utils.isEqual)(ctx.inputValue, value)) return;
1375
+ if (utils.isEqual(ctx.inputValue, value)) return;
1415
1376
  ctx.inputValue = value;
1416
1377
  invoke.inputChange(ctx);
1417
1378
  }
1418
1379
  };
1419
- // Annotate the CommonJS export names for ESM import in node:
1420
- 0 && (module.exports = {
1421
- anatomy,
1422
- collection,
1423
- connect,
1424
- machine
1425
- });
1426
- //# sourceMappingURL=index.js.map
1380
+
1381
+ exports.anatomy = anatomy;
1382
+ exports.collection = collection;
1383
+ exports.connect = connect;
1384
+ exports.machine = machine;
package/dist/index.mjs CHANGED
@@ -1,5 +1,14 @@
1
+ import { createAnatomy } from '@zag-js/anatomy';
2
+ import { ListCollection } from '@zag-js/collection';
3
+ import { ref, createMachine, guards } from '@zag-js/core';
4
+ import { getEventKey, isLeftClick, isContextMenuEvent, clickIfLink } from '@zag-js/dom-event';
5
+ import { createScope, query, dataAttr, ariaAttr, isComposingEvent, isDownloadingEvent, isOpeningInNewTab, observeChildren, raf, observeAttributes, scrollIntoView } from '@zag-js/dom-query';
6
+ import { getPlacementStyles, getPlacement } from '@zag-js/popper';
7
+ import { ariaHidden } from '@zag-js/aria-hidden';
8
+ import { trackDismissableElement } from '@zag-js/dismissable';
9
+ import { compact, isBoolean, match, isArray, isEqual, addOrRemove } from '@zag-js/utils';
10
+
1
11
  // src/combobox.anatomy.ts
2
- import { createAnatomy } from "@zag-js/anatomy";
3
12
  var anatomy = createAnatomy("combobox").parts(
4
13
  "root",
5
14
  "clearTrigger",
@@ -17,24 +26,12 @@ var anatomy = createAnatomy("combobox").parts(
17
26
  "trigger"
18
27
  );
19
28
  var parts = anatomy.build();
20
-
21
- // src/combobox.collection.ts
22
- import { ListCollection } from "@zag-js/collection";
23
- import { ref } from "@zag-js/core";
24
29
  var collection = (options) => {
25
30
  return ref(new ListCollection(options));
26
31
  };
27
32
  collection.empty = () => {
28
33
  return ref(new ListCollection({ items: [] }));
29
34
  };
30
-
31
- // src/combobox.connect.ts
32
- import { clickIfLink, getEventKey, isContextMenuEvent, isLeftClick } from "@zag-js/dom-event";
33
- import { ariaAttr, dataAttr, isComposingEvent, isDownloadingEvent, isOpeningInNewTab } from "@zag-js/dom-query";
34
- import { getPlacementStyles } from "@zag-js/popper";
35
-
36
- // src/combobox.dom.ts
37
- import { createScope, query } from "@zag-js/dom-query";
38
35
  var dom = createScope({
39
36
  getRootId: (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`,
40
37
  getLabelId: (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`,
@@ -459,14 +456,6 @@ function connect(state, send, normalize) {
459
456
  }
460
457
  };
461
458
  }
462
-
463
- // src/combobox.machine.ts
464
- import { ariaHidden } from "@zag-js/aria-hidden";
465
- import { createMachine, guards } from "@zag-js/core";
466
- import { trackDismissableElement } from "@zag-js/dismissable";
467
- import { observeAttributes, observeChildren, raf, scrollIntoView } from "@zag-js/dom-query";
468
- import { getPlacement } from "@zag-js/popper";
469
- import { addOrRemove, compact, isArray, isBoolean, isEqual, match } from "@zag-js/utils";
470
459
  var { and, not } = guards;
471
460
  function machine(userContext) {
472
461
  const ctx = compact(userContext);
@@ -496,7 +485,6 @@ function machine(userContext) {
496
485
  collection: ctx.collection ?? collection.empty(),
497
486
  positioning: {
498
487
  placement: "bottom",
499
- flip: false,
500
488
  sameWidth: true,
501
489
  ...ctx.positioning
502
490
  },
@@ -1387,10 +1375,5 @@ var set = {
1387
1375
  invoke.inputChange(ctx);
1388
1376
  }
1389
1377
  };
1390
- export {
1391
- anatomy,
1392
- collection,
1393
- connect,
1394
- machine
1395
- };
1396
- //# sourceMappingURL=index.mjs.map
1378
+
1379
+ export { anatomy, collection, connect, machine };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/combobox",
3
- "version": "0.69.0",
3
+ "version": "0.71.0",
4
4
  "description": "Core logic for the combobox widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -17,8 +17,7 @@
17
17
  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/combobox",
18
18
  "sideEffects": false,
19
19
  "files": [
20
- "dist",
21
- "src"
20
+ "dist"
22
21
  ],
23
22
  "publishConfig": {
24
23
  "access": "public"
@@ -27,16 +26,16 @@
27
26
  "url": "https://github.com/chakra-ui/zag/issues"
28
27
  },
29
28
  "dependencies": {
30
- "@zag-js/anatomy": "0.69.0",
31
- "@zag-js/aria-hidden": "0.69.0",
32
- "@zag-js/collection": "0.69.0",
33
- "@zag-js/core": "0.69.0",
34
- "@zag-js/dismissable": "0.69.0",
35
- "@zag-js/dom-query": "0.69.0",
36
- "@zag-js/dom-event": "0.69.0",
37
- "@zag-js/utils": "0.69.0",
38
- "@zag-js/popper": "0.69.0",
39
- "@zag-js/types": "0.69.0"
29
+ "@zag-js/anatomy": "0.71.0",
30
+ "@zag-js/aria-hidden": "0.71.0",
31
+ "@zag-js/collection": "0.71.0",
32
+ "@zag-js/core": "0.71.0",
33
+ "@zag-js/dismissable": "0.71.0",
34
+ "@zag-js/dom-query": "0.71.0",
35
+ "@zag-js/dom-event": "0.71.0",
36
+ "@zag-js/utils": "0.71.0",
37
+ "@zag-js/popper": "0.71.0",
38
+ "@zag-js/types": "0.71.0"
40
39
  },
41
40
  "devDependencies": {
42
41
  "clean-package": "2.2.0"