@zag-js/combobox 1.33.0 → 1.34.0

package/dist/index.d.mts

@@ -3,9 +3,9 @@ export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { CollectionOptions, ListCollection, CollectionItem } from '@zag-js/collection';
 export { CollectionItem, CollectionOptions } from '@zag-js/collection';
-import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, EventObject, Machine } from '@zag-js/core';
+import { Machine, EventObject, Service } from '@zag-js/core';
 import { PositioningOptions, Placement } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 

package/dist/index.d.ts

@@ -3,9 +3,9 @@ export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { CollectionOptions, ListCollection, CollectionItem } from '@zag-js/collection';
 export { CollectionItem, CollectionOptions } from '@zag-js/collection';
-import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, EventObject, Machine } from '@zag-js/core';
+import { Machine, EventObject, Service } from '@zag-js/core';
 import { PositioningOptions, Placement } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 

package/dist/index.js

@@ -7,6 +7,7 @@ var popper = require('@zag-js/popper');
 var utils = require('@zag-js/utils');
 var core = require('@zag-js/core');
 var dismissable = require('@zag-js/dismissable');
+var focusVisible = require('@zag-js/focus-visible');
 var types = require('@zag-js/types');
 
 // src/combobox.anatomy.ts
@@ -57,8 +58,10 @@ var getItemEl = (ctx, value) => {
 };
 var focusInputEl = (ctx) => {
   const inputEl = getInputEl(ctx);
-  if (ctx.isActiveElement(inputEl)) return;
-  inputEl?.focus({ preventScroll: true });
+  if (!ctx.isActiveElement(inputEl)) {
+    inputEl?.focus({ preventScroll: true });
+  }
+  domQuery.setCaretToEnd(inputEl);
 };
 var focusTriggerEl = (ctx) => {
   const triggerEl = getTriggerEl(ctx);
@@ -85,12 +88,12 @@ function connect(service, normalize) {
     placement: context.get("currentPlacement")
   });
   function getItemState(props2) {
-    const disabled2 = collection2.getItemDisabled(props2.item);
+    const itemDisabled = collection2.getItemDisabled(props2.item);
     const value = collection2.getItemValue(props2.item);
     utils.ensure(value, () => `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
     return {
       value,
-      disabled: Boolean(disabled2 || disabled2),
+      disabled: Boolean(disabled || itemDisabled),
       highlighted: highlightedValue === value,
       selected: context.get("value").includes(value)
     };
@@ -323,7 +326,7 @@ function connect(service, normalize) {
           if (!domQuery.isLeftClick(event2)) return;
           event2.preventDefault();
           queueMicrotask(() => {
-            getInputEl(scope)?.focus({ preventScroll: true });
+            focusInputEl(scope);
           });
         },
         onKeyDown(event2) {
@@ -409,7 +412,7 @@ function connect(service, normalize) {
         tabIndex: -1,
         "data-highlighted": domQuery.dataAttr(itemState.highlighted),
         "data-state": itemState.selected ? "checked" : "unchecked",
-        "aria-selected": domQuery.ariaAttr(itemState.highlighted),
+        "aria-selected": domQuery.ariaAttr(itemState.selected),
         "aria-disabled": domQuery.ariaAttr(itemState.disabled),
         "data-disabled": domQuery.dataAttr(itemState.disabled),
         "data-value": itemState.value,
@@ -531,7 +534,8 @@ var machine = createMachine({
           const context = getContext();
           const prevSelectedItems = context.get("selectedItems");
           const collection2 = prop("collection");
-          const nextItems = value.map((v) => {
+          const effectiveValue = prop("value") || value;
+          const nextItems = effectiveValue.map((v) => {
             const item = prevSelectedItems.find((item2) => collection2.getItemValue(item2) === v);
             return item || collection2.find(v);
           });
@@ -766,8 +770,7 @@ var machine = createMachine({
         "INPUT.ARROW_UP": [
           // == group 1 ==
           {
-            guard: "autoComplete",
-            target: "interacting",
+            guard: and("isOpenControlled", "autoComplete"),
             actions: ["invokeOnOpen"]
           },
           {
@@ -777,7 +780,7 @@ var machine = createMachine({
           },
           // == group 2 ==
           {
-            target: "interacting",
+            guard: "isOpenControlled",
             actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
           },
           {
@@ -803,7 +806,7 @@ var machine = createMachine({
     interacting: {
       tags: ["open", "focused"],
       entry: ["setInitialFocus"],
-      effects: ["scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
+      effects: ["trackFocusVisible", "scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -978,7 +981,7 @@ var machine = createMachine({
     },
     suggesting: {
       tags: ["open", "focused"],
-      effects: ["trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement"],
+      effects: ["trackFocusVisible", "trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement"],
       entry: ["setInitialFocus"],
       on: {
         "CONTROLLED.CLOSE": [
@@ -1161,6 +1164,9 @@ var machine = createMachine({
       hasCollectionItems: ({ prop }) => prop("collection").size > 0
     },
     effects: {
+      trackFocusVisible({ scope }) {
+        return focusVisible.trackFocusVisible({ root: scope.getRootNode?.() });
+      },
       trackDismissableLayer({ send, prop, scope }) {
         if (prop("disableLayer")) return;
         const contentEl = () => getContentEl(scope);
@@ -1193,13 +1199,14 @@ var machine = createMachine({
           }
         });
       },
-      scrollToHighlightedItem({ context, prop, scope, event }) {
+      scrollToHighlightedItem({ context, prop, scope }) {
         const inputEl = getInputEl(scope);
         let cleanups = [];
         const exec = (immediate) => {
-          const pointer = event.current().type.includes("POINTER");
+          const modality = focusVisible.getInteractionModality();
+          if (modality === "pointer") return;
           const highlightedValue = context.get("highlightedValue");
-          if (pointer || !highlightedValue) return;
+          if (!highlightedValue) return;
           const contentEl = getContentEl(scope);
           const scrollToIndexFn = prop("scrollToIndexFn");
           if (scrollToIndexFn) {
@@ -1217,7 +1224,10 @@ var machine = createMachine({
           });
           cleanups.push(raf_cleanup);
         };
-        const rafCleanup = domQuery.raf(() => exec(true));
+        const rafCleanup = domQuery.raf(() => {
+          focusVisible.setInteractionModality("virtual");
+          exec(true);
+        });
         cleanups.push(rafCleanup);
         const observerCleanup = domQuery.observeAttributes(inputEl, {
           attributes: ["aria-activedescendant"],

package/dist/index.mjs

@@ -1,10 +1,11 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { ListCollection } from '@zag-js/collection';
-import { raf, setCaretToEnd, nextTick, scrollIntoView, observeAttributes, clickIfLink, query, dataAttr, ariaAttr, isDownloadingEvent, isOpeningInNewTab, isContextMenuEvent, isLeftClick, getEventKey, isComposingEvent, isAnchorElement } from '@zag-js/dom-query';
+import { raf, setCaretToEnd, nextTick, scrollIntoView, observeAttributes, clickIfLink, query, dataAttr, isDownloadingEvent, isOpeningInNewTab, isContextMenuEvent, ariaAttr, isLeftClick, getEventKey, isComposingEvent, isAnchorElement } from '@zag-js/dom-query';
 import { getPlacement, getPlacementStyles } from '@zag-js/popper';
 import { match, remove, addOrRemove, isBoolean, isEqual, createSplitProps, ensure } from '@zag-js/utils';
 import { setup } from '@zag-js/core';
 import { trackDismissableElement } from '@zag-js/dismissable';
+import { setInteractionModality, trackFocusVisible, getInteractionModality } from '@zag-js/focus-visible';
 import { createProps } from '@zag-js/types';
 
 // src/combobox.anatomy.ts
@@ -55,8 +56,10 @@ var getItemEl = (ctx, value) => {
 };
 var focusInputEl = (ctx) => {
   const inputEl = getInputEl(ctx);
-  if (ctx.isActiveElement(inputEl)) return;
-  inputEl?.focus({ preventScroll: true });
+  if (!ctx.isActiveElement(inputEl)) {
+    inputEl?.focus({ preventScroll: true });
+  }
+  setCaretToEnd(inputEl);
 };
 var focusTriggerEl = (ctx) => {
   const triggerEl = getTriggerEl(ctx);
@@ -83,12 +86,12 @@ function connect(service, normalize) {
     placement: context.get("currentPlacement")
   });
   function getItemState(props2) {
-    const disabled2 = collection2.getItemDisabled(props2.item);
+    const itemDisabled = collection2.getItemDisabled(props2.item);
     const value = collection2.getItemValue(props2.item);
     ensure(value, () => `[zag-js] No value found for item ${JSON.stringify(props2.item)}`);
     return {
       value,
-      disabled: Boolean(disabled2 || disabled2),
+      disabled: Boolean(disabled || itemDisabled),
       highlighted: highlightedValue === value,
       selected: context.get("value").includes(value)
     };
@@ -321,7 +324,7 @@ function connect(service, normalize) {
           if (!isLeftClick(event2)) return;
           event2.preventDefault();
           queueMicrotask(() => {
-            getInputEl(scope)?.focus({ preventScroll: true });
+            focusInputEl(scope);
           });
         },
         onKeyDown(event2) {
@@ -407,7 +410,7 @@ function connect(service, normalize) {
         tabIndex: -1,
         "data-highlighted": dataAttr(itemState.highlighted),
         "data-state": itemState.selected ? "checked" : "unchecked",
-        "aria-selected": ariaAttr(itemState.highlighted),
+        "aria-selected": ariaAttr(itemState.selected),
         "aria-disabled": ariaAttr(itemState.disabled),
         "data-disabled": dataAttr(itemState.disabled),
         "data-value": itemState.value,
@@ -529,7 +532,8 @@ var machine = createMachine({
           const context = getContext();
           const prevSelectedItems = context.get("selectedItems");
           const collection2 = prop("collection");
-          const nextItems = value.map((v) => {
+          const effectiveValue = prop("value") || value;
+          const nextItems = effectiveValue.map((v) => {
             const item = prevSelectedItems.find((item2) => collection2.getItemValue(item2) === v);
             return item || collection2.find(v);
           });
@@ -764,8 +768,7 @@ var machine = createMachine({
         "INPUT.ARROW_UP": [
           // == group 1 ==
           {
-            guard: "autoComplete",
-            target: "interacting",
+            guard: and("isOpenControlled", "autoComplete"),
             actions: ["invokeOnOpen"]
           },
           {
@@ -775,7 +778,7 @@ var machine = createMachine({
           },
           // == group 2 ==
           {
-            target: "interacting",
+            guard: "isOpenControlled",
             actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
           },
           {
@@ -801,7 +804,7 @@ var machine = createMachine({
     interacting: {
       tags: ["open", "focused"],
       entry: ["setInitialFocus"],
-      effects: ["scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
+      effects: ["trackFocusVisible", "scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
       on: {
         "CONTROLLED.CLOSE": [
           {
@@ -976,7 +979,7 @@ var machine = createMachine({
     },
     suggesting: {
       tags: ["open", "focused"],
-      effects: ["trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement"],
+      effects: ["trackFocusVisible", "trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement"],
       entry: ["setInitialFocus"],
       on: {
         "CONTROLLED.CLOSE": [
@@ -1159,6 +1162,9 @@ var machine = createMachine({
       hasCollectionItems: ({ prop }) => prop("collection").size > 0
     },
     effects: {
+      trackFocusVisible({ scope }) {
+        return trackFocusVisible({ root: scope.getRootNode?.() });
+      },
       trackDismissableLayer({ send, prop, scope }) {
         if (prop("disableLayer")) return;
         const contentEl = () => getContentEl(scope);
@@ -1191,13 +1197,14 @@ var machine = createMachine({
           }
         });
       },
-      scrollToHighlightedItem({ context, prop, scope, event }) {
+      scrollToHighlightedItem({ context, prop, scope }) {
         const inputEl = getInputEl(scope);
         let cleanups = [];
         const exec = (immediate) => {
-          const pointer = event.current().type.includes("POINTER");
+          const modality = getInteractionModality();
+          if (modality === "pointer") return;
           const highlightedValue = context.get("highlightedValue");
-          if (pointer || !highlightedValue) return;
+          if (!highlightedValue) return;
           const contentEl = getContentEl(scope);
           const scrollToIndexFn = prop("scrollToIndexFn");
           if (scrollToIndexFn) {
@@ -1215,7 +1222,10 @@ var machine = createMachine({
           });
           cleanups.push(raf_cleanup);
         };
-        const rafCleanup = raf(() => exec(true));
+        const rafCleanup = raf(() => {
+          setInteractionModality("virtual");
+          exec(true);
+        });
         cleanups.push(rafCleanup);
         const observerCleanup = observeAttributes(inputEl, {
           attributes: ["aria-activedescendant"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/combobox",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "Core logic for the combobox widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,15 +26,16 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.33.0",
-    "@zag-js/collection": "1.33.0",
-    "@zag-js/core": "1.33.0",
-    "@zag-js/aria-hidden": "1.33.0",
-    "@zag-js/dismissable": "1.33.0",
-    "@zag-js/utils": "1.33.0",
-    "@zag-js/dom-query": "1.33.0",
-    "@zag-js/popper": "1.33.0",
-    "@zag-js/types": "1.33.0"
+    "@zag-js/anatomy": "1.34.0",
+    "@zag-js/aria-hidden": "1.34.0",
+    "@zag-js/collection": "1.34.0",
+    "@zag-js/core": "1.34.0",
+    "@zag-js/dismissable": "1.34.0",
+    "@zag-js/focus-visible": "1.34.0",
+    "@zag-js/dom-query": "1.34.0",
+    "@zag-js/popper": "1.34.0",
+    "@zag-js/types": "1.34.0",
+    "@zag-js/utils": "1.34.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"