@zag-js/combobox 1.0.1 → 1.1.0

package/dist/index.js

@@ -4,10 +4,10 @@ var anatomy$1 = require('@zag-js/anatomy');
 var collection$1 = require('@zag-js/collection');
 var domQuery = require('@zag-js/dom-query');
 var popper = require('@zag-js/popper');
+var utils = require('@zag-js/utils');
 var ariaHidden = require('@zag-js/aria-hidden');
 var core = require('@zag-js/core');
 var dismissable = require('@zag-js/dismissable');
-var utils = require('@zag-js/utils');
 var types = require('@zag-js/types');
 
 // src/combobox.anatomy.ts
@@ -87,6 +87,7 @@ function connect(service, normalize) {
   function getItemState(props2) {
     const disabled2 = 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),
@@ -479,7 +480,7 @@ var machine = core.createMachine({
         domQuery.clickIfLink(node);
       },
       collection: collection.empty(),
-      ...utils.compact(props2),
+      ...props2,
       positioning: {
         placement: "bottom",
         sameWidth: true,
@@ -1313,21 +1314,20 @@ var machine = core.createMachine({
       invokeOnClose({ prop }) {
         prop("onOpenChange")?.({ open: false });
       },
-      highlightFirstItem({ context, prop }) {
-        domQuery.raf(() => {
+      highlightFirstItem({ context, prop, scope }) {
+        const exec = getContentEl(scope) ? queueMicrotask : domQuery.raf;
+        exec(() => {
           const value = prop("collection").firstValue;
-          context.set("highlightedValue", value);
+          if (value) context.set("highlightedValue", value);
         });
       },
-      highlightFirstItemIfNeeded({ context, prop, computed }) {
+      highlightFirstItemIfNeeded({ computed, action }) {
         if (!computed("autoHighlight")) return;
-        domQuery.raf(() => {
-          const value = prop("collection").firstValue;
-          if (value) context.set("highlightedValue", value);
-        });
+        action(["highlightFirstItem"]);
       },
-      highlightLastItem({ context, prop }) {
-        domQuery.raf(() => {
+      highlightLastItem({ context, prop, scope }) {
+        const exec = getContentEl(scope) ? queueMicrotask : domQuery.raf;
+        exec(() => {
           const value = prop("collection").lastValue;
           if (value) context.set("highlightedValue", value);
         });

package/dist/index.mjs

@@ -2,10 +2,10 @@ import { createAnatomy } from '@zag-js/anatomy';
 import { ListCollection } from '@zag-js/collection';
 import { clickIfLink, observeChildren, raf, observeAttributes, dataAttr, ariaAttr, isComposingEvent, getEventKey, isLeftClick, isDownloadingEvent, isOpeningInNewTab, isContextMenuEvent, scrollIntoView, query, isAnchorElement } from '@zag-js/dom-query';
 import { getPlacement, getPlacementStyles } from '@zag-js/popper';
+import { match, isBoolean, addOrRemove, remove, createSplitProps, ensure } from '@zag-js/utils';
 import { ariaHidden } from '@zag-js/aria-hidden';
 import { createGuards, createMachine } from '@zag-js/core';
 import { trackDismissableElement } from '@zag-js/dismissable';
-import { compact, match, isBoolean, addOrRemove, remove, createSplitProps } from '@zag-js/utils';
 import { createProps } from '@zag-js/types';
 
 // src/combobox.anatomy.ts
@@ -85,6 +85,7 @@ function connect(service, normalize) {
   function getItemState(props2) {
     const disabled2 = 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),
@@ -477,7 +478,7 @@ var machine = createMachine({
         clickIfLink(node);
       },
       collection: collection.empty(),
-      ...compact(props2),
+      ...props2,
       positioning: {
         placement: "bottom",
         sameWidth: true,
@@ -1311,21 +1312,20 @@ var machine = createMachine({
       invokeOnClose({ prop }) {
         prop("onOpenChange")?.({ open: false });
       },
-      highlightFirstItem({ context, prop }) {
-        raf(() => {
+      highlightFirstItem({ context, prop, scope }) {
+        const exec = getContentEl(scope) ? queueMicrotask : raf;
+        exec(() => {
           const value = prop("collection").firstValue;
-          context.set("highlightedValue", value);
+          if (value) context.set("highlightedValue", value);
         });
       },
-      highlightFirstItemIfNeeded({ context, prop, computed }) {
+      highlightFirstItemIfNeeded({ computed, action }) {
         if (!computed("autoHighlight")) return;
-        raf(() => {
-          const value = prop("collection").firstValue;
-          if (value) context.set("highlightedValue", value);
-        });
+        action(["highlightFirstItem"]);
       },
-      highlightLastItem({ context, prop }) {
-        raf(() => {
+      highlightLastItem({ context, prop, scope }) {
+        const exec = getContentEl(scope) ? queueMicrotask : raf;
+        exec(() => {
           const value = prop("collection").lastValue;
           if (value) context.set("highlightedValue", value);
         });

package/package.json

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