@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 +82 -124
- package/dist/index.mjs +12 -29
- package/package.json +12 -13
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/combobox.anatomy.ts +0 -19
- package/src/combobox.collection.ts +0 -10
- package/src/combobox.connect.ts +0 -427
- package/src/combobox.dom.ts +0 -41
- package/src/combobox.machine.ts +0 -971
- package/src/combobox.props.ts +0 -57
- package/src/combobox.types.ts +0 -443
- package/src/index.ts +0 -27
package/dist/index.js
CHANGED
|
@@ -1,35 +1,17 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
|
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
|
|
32
|
+
return core.ref(new collection$1.ListCollection(options));
|
|
55
33
|
};
|
|
56
34
|
collection.empty = () => {
|
|
57
|
-
return
|
|
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
|
|
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 =
|
|
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":
|
|
179
|
-
"data-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":
|
|
189
|
-
"data-disabled":
|
|
190
|
-
"data-invalid":
|
|
191
|
-
"data-focus":
|
|
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":
|
|
206
|
-
"data-disabled":
|
|
207
|
-
"data-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":
|
|
223
|
-
"data-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 ||
|
|
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
|
-
|
|
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 =
|
|
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":
|
|
326
|
-
"data-focusable":
|
|
327
|
-
"data-readonly":
|
|
328
|
-
"data-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 (!
|
|
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 =
|
|
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":
|
|
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":
|
|
394
|
+
"data-highlighted": domQuery.dataAttr(itemState.highlighted),
|
|
425
395
|
"data-state": itemState.selected ? "checked" : "unchecked",
|
|
426
|
-
"aria-selected":
|
|
427
|
-
"aria-disabled":
|
|
428
|
-
"data-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 (
|
|
444
|
-
if (
|
|
445
|
-
if (
|
|
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":
|
|
458
|
-
"data-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 =
|
|
502
|
-
return
|
|
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 (
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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 =
|
|
1122
|
-
|
|
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 =
|
|
1087
|
+
const rafCleanup = domQuery.raf(() => exec(true));
|
|
1127
1088
|
cleanups.push(rafCleanup);
|
|
1128
|
-
const observerCleanup =
|
|
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
|
-
|
|
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
|
-
|
|
1133
|
+
domQuery.raf(() => {
|
|
1173
1134
|
dom.focusInputEl(ctx2);
|
|
1174
1135
|
});
|
|
1175
1136
|
},
|
|
1176
1137
|
setFinalFocus(ctx2) {
|
|
1177
|
-
|
|
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 =
|
|
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 =
|
|
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 (!
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 =
|
|
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 (
|
|
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 (
|
|
1361
|
+
if (utils.isArray(value)) {
|
|
1401
1362
|
ctx.value = value;
|
|
1402
1363
|
} else if (value != null) {
|
|
1403
|
-
ctx.value = ctx.multiple ?
|
|
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 (
|
|
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 (
|
|
1375
|
+
if (utils.isEqual(ctx.inputValue, value)) return;
|
|
1415
1376
|
ctx.inputValue = value;
|
|
1416
1377
|
invoke.inputChange(ctx);
|
|
1417
1378
|
}
|
|
1418
1379
|
};
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
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
|
-
|
|
1391
|
-
|
|
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.
|
|
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.
|
|
31
|
-
"@zag-js/aria-hidden": "0.
|
|
32
|
-
"@zag-js/collection": "0.
|
|
33
|
-
"@zag-js/core": "0.
|
|
34
|
-
"@zag-js/dismissable": "0.
|
|
35
|
-
"@zag-js/dom-query": "0.
|
|
36
|
-
"@zag-js/dom-event": "0.
|
|
37
|
-
"@zag-js/utils": "0.
|
|
38
|
-
"@zag-js/popper": "0.
|
|
39
|
-
"@zag-js/types": "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"
|