@zag-js/combobox 1.21.7 → 1.21.8

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 +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +18 -5
  4. package/dist/index.mjs +18 -5
  5. package/package.json +10 -10
package/dist/index.d.mts CHANGED
@@ -43,6 +43,7 @@ interface OpenChangeDetails {
43
43
  interface ScrollToIndexDetails {
44
44
  index: number;
45
45
  immediate?: boolean | undefined;
46
+ getElement: () => HTMLElement | null;
46
47
  }
47
48
  interface NavigateDetails {
48
49
  value: string;
package/dist/index.d.ts CHANGED
@@ -43,6 +43,7 @@ interface OpenChangeDetails {
43
43
  interface ScrollToIndexDetails {
44
44
  index: number;
45
45
  immediate?: boolean | undefined;
46
+ getElement: () => HTMLElement | null;
46
47
  }
47
48
  interface NavigateDetails {
48
49
  value: string;
package/dist/index.js CHANGED
@@ -52,7 +52,7 @@ var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
52
52
  var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
53
53
  var getClearTriggerEl = (ctx) => ctx.getById(getClearTriggerId(ctx));
54
54
  var getItemEl = (ctx, value) => {
55
- if (value == null) return;
55
+ if (value == null) return null;
56
56
  const selector = `[role=option][data-value="${CSS.escape(value)}"]`;
57
57
  return domQuery.query(getContentEl(ctx), selector);
58
58
  };
@@ -1194,14 +1194,18 @@ var machine = createMachine({
1194
1194
  const pointer = event.current().type.includes("POINTER");
1195
1195
  const highlightedValue = context.get("highlightedValue");
1196
1196
  if (pointer || !highlightedValue) return;
1197
- const itemEl = getItemEl(scope, highlightedValue);
1198
1197
  const contentEl = getContentEl(scope);
1199
1198
  const scrollToIndexFn = prop("scrollToIndexFn");
1200
1199
  if (scrollToIndexFn) {
1201
1200
  const highlightedIndex = prop("collection").indexOf(highlightedValue);
1202
- scrollToIndexFn({ index: highlightedIndex, immediate });
1201
+ scrollToIndexFn({
1202
+ index: highlightedIndex,
1203
+ immediate,
1204
+ getElement: () => getItemEl(scope, highlightedValue)
1205
+ });
1203
1206
  return;
1204
1207
  }
1208
+ const itemEl = getItemEl(scope, highlightedValue);
1205
1209
  const raf_cleanup = domQuery.raf(() => {
1206
1210
  domQuery.scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" });
1207
1211
  });
@@ -1264,7 +1268,11 @@ var machine = createMachine({
1264
1268
  const scrollToIndexFn = prop("scrollToIndexFn");
1265
1269
  if (scrollToIndexFn) {
1266
1270
  const highlightedIndex = prop("collection").indexOf(highlightedValue);
1267
- scrollToIndexFn({ index: highlightedIndex, immediate: true });
1271
+ scrollToIndexFn({
1272
+ index: highlightedIndex,
1273
+ immediate: true,
1274
+ getElement: () => getItemEl(scope, highlightedValue)
1275
+ });
1268
1276
  return;
1269
1277
  }
1270
1278
  domQuery.scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" });
@@ -1365,7 +1373,12 @@ var machine = createMachine({
1365
1373
  scrollContentToTop({ prop, scope }) {
1366
1374
  const scrollToIndexFn = prop("scrollToIndexFn");
1367
1375
  if (scrollToIndexFn) {
1368
- scrollToIndexFn({ index: 0, immediate: true });
1376
+ const firstValue = prop("collection").firstValue;
1377
+ scrollToIndexFn({
1378
+ index: 0,
1379
+ immediate: true,
1380
+ getElement: () => getItemEl(scope, firstValue)
1381
+ });
1369
1382
  } else {
1370
1383
  const contentEl = getContentEl(scope);
1371
1384
  if (!contentEl) return;
package/dist/index.mjs CHANGED
@@ -50,7 +50,7 @@ var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
50
50
  var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
51
51
  var getClearTriggerEl = (ctx) => ctx.getById(getClearTriggerId(ctx));
52
52
  var getItemEl = (ctx, value) => {
53
- if (value == null) return;
53
+ if (value == null) return null;
54
54
  const selector = `[role=option][data-value="${CSS.escape(value)}"]`;
55
55
  return query(getContentEl(ctx), selector);
56
56
  };
@@ -1192,14 +1192,18 @@ var machine = createMachine({
1192
1192
  const pointer = event.current().type.includes("POINTER");
1193
1193
  const highlightedValue = context.get("highlightedValue");
1194
1194
  if (pointer || !highlightedValue) return;
1195
- const itemEl = getItemEl(scope, highlightedValue);
1196
1195
  const contentEl = getContentEl(scope);
1197
1196
  const scrollToIndexFn = prop("scrollToIndexFn");
1198
1197
  if (scrollToIndexFn) {
1199
1198
  const highlightedIndex = prop("collection").indexOf(highlightedValue);
1200
- scrollToIndexFn({ index: highlightedIndex, immediate });
1199
+ scrollToIndexFn({
1200
+ index: highlightedIndex,
1201
+ immediate,
1202
+ getElement: () => getItemEl(scope, highlightedValue)
1203
+ });
1201
1204
  return;
1202
1205
  }
1206
+ const itemEl = getItemEl(scope, highlightedValue);
1203
1207
  const raf_cleanup = raf(() => {
1204
1208
  scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" });
1205
1209
  });
@@ -1262,7 +1266,11 @@ var machine = createMachine({
1262
1266
  const scrollToIndexFn = prop("scrollToIndexFn");
1263
1267
  if (scrollToIndexFn) {
1264
1268
  const highlightedIndex = prop("collection").indexOf(highlightedValue);
1265
- scrollToIndexFn({ index: highlightedIndex, immediate: true });
1269
+ scrollToIndexFn({
1270
+ index: highlightedIndex,
1271
+ immediate: true,
1272
+ getElement: () => getItemEl(scope, highlightedValue)
1273
+ });
1266
1274
  return;
1267
1275
  }
1268
1276
  scrollIntoView(itemEl, { rootEl: contentEl, block: "nearest" });
@@ -1363,7 +1371,12 @@ var machine = createMachine({
1363
1371
  scrollContentToTop({ prop, scope }) {
1364
1372
  const scrollToIndexFn = prop("scrollToIndexFn");
1365
1373
  if (scrollToIndexFn) {
1366
- scrollToIndexFn({ index: 0, immediate: true });
1374
+ const firstValue = prop("collection").firstValue;
1375
+ scrollToIndexFn({
1376
+ index: 0,
1377
+ immediate: true,
1378
+ getElement: () => getItemEl(scope, firstValue)
1379
+ });
1367
1380
  } else {
1368
1381
  const contentEl = getContentEl(scope);
1369
1382
  if (!contentEl) return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/combobox",
3
- "version": "1.21.7",
3
+ "version": "1.21.8",
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.21.7",
30
- "@zag-js/aria-hidden": "1.21.7",
31
- "@zag-js/collection": "1.21.7",
32
- "@zag-js/core": "1.21.7",
33
- "@zag-js/dismissable": "1.21.7",
34
- "@zag-js/dom-query": "1.21.7",
35
- "@zag-js/utils": "1.21.7",
36
- "@zag-js/popper": "1.21.7",
37
- "@zag-js/types": "1.21.7"
29
+ "@zag-js/anatomy": "1.21.8",
30
+ "@zag-js/aria-hidden": "1.21.8",
31
+ "@zag-js/collection": "1.21.8",
32
+ "@zag-js/core": "1.21.8",
33
+ "@zag-js/dismissable": "1.21.8",
34
+ "@zag-js/dom-query": "1.21.8",
35
+ "@zag-js/utils": "1.21.8",
36
+ "@zag-js/popper": "1.21.8",
37
+ "@zag-js/types": "1.21.8"
38
38
  },
39
39
  "devDependencies": {
40
40
  "clean-package": "2.2.0"