@zag-js/combobox 1.0.0 → 1.0.2

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 { DirectionProperty, CommonProperties, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, EventObject } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 import { PositioningOptions, Placement } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 
@@ -198,7 +198,7 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * The collection of items
      */
-    collection?: ListCollection<any> | undefined;
+    collection?: ListCollection<T> | undefined;
     /**
      * Whether to allow multiple selection.
      *
@@ -234,7 +234,6 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
     navigate?: ((details: NavigateDetails) => void) | undefined;
 }
 type PropsWithDefault = "openOnChange" | "openOnKeyPress" | "composite" | "navigate" | "loopFocus" | "positioning" | "openOnClick" | "openOnChange" | "inputBehavior" | "collection" | "selectionBehavior" | "closeOnSelect" | "translations" | "positioning";
-type ComboboxService<T extends CollectionItem = CollectionItem> = Service<ComboboxSchema<T>>;
 interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
     props: RequiredBy<ComboboxProps<T>, PropsWithDefault>;
     state: "idle" | "focused" | "suggesting" | "interacting";
@@ -260,6 +259,8 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
     effect: string;
     guard: string;
 }
+type ComboboxService<T extends CollectionItem = CollectionItem> = Service<ComboboxSchema<T>>;
+type ComboboxMachine<T extends CollectionItem = CollectionItem> = Machine<ComboboxSchema<T>>;
 interface TriggerProps {
     /**
      * Whether the trigger is focusable
@@ -408,7 +409,7 @@ interface ComboboxApi<T extends PropTypes = PropTypes, V extends CollectionItem
 
 declare function connect<T extends PropTypes, V extends CollectionItem>(service: ComboboxService<V>, normalize: NormalizeProps<T>): ComboboxApi<T, V>;
 
-declare const machine: _zag_js_core.MachineConfig<ComboboxSchema<any>>;
+declare const machine: _zag_js_core.Machine<ComboboxSchema<any>>;
 
 declare const props: (keyof ComboboxProps<any>)[];
 declare const splitProps: <Props extends Partial<ComboboxProps<any>>>(props: Props) => [Partial<ComboboxProps<any>>, Omit<Props, keyof ComboboxProps<any>>];
@@ -419,4 +420,4 @@ declare const splitItemGroupProps: <Props extends ItemGroupProps>(props: Props)
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 
-export { type ComboboxApi as Api, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type NavigateDetails, type OpenChangeDetails, type ComboboxProps as Props, type ScrollToIndexDetails, type ComboboxService as Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, itemGroupLabelProps, itemGroupProps, itemProps, machine, props, splitItemGroupLabelProps, splitItemGroupProps, splitItemProps, splitProps };
+export { type ComboboxApi as Api, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type ComboboxMachine as Machine, type NavigateDetails, type OpenChangeDetails, type ComboboxProps as Props, type ScrollToIndexDetails, type ComboboxService as Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, itemGroupLabelProps, itemGroupProps, itemProps, machine, props, splitItemGroupLabelProps, splitItemGroupProps, splitItemProps, splitProps };

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 { DirectionProperty, CommonProperties, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, EventObject } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 import { PositioningOptions, Placement } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 
@@ -198,7 +198,7 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
     /**
      * The collection of items
      */
-    collection?: ListCollection<any> | undefined;
+    collection?: ListCollection<T> | undefined;
     /**
      * Whether to allow multiple selection.
      *
@@ -234,7 +234,6 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
     navigate?: ((details: NavigateDetails) => void) | undefined;
 }
 type PropsWithDefault = "openOnChange" | "openOnKeyPress" | "composite" | "navigate" | "loopFocus" | "positioning" | "openOnClick" | "openOnChange" | "inputBehavior" | "collection" | "selectionBehavior" | "closeOnSelect" | "translations" | "positioning";
-type ComboboxService<T extends CollectionItem = CollectionItem> = Service<ComboboxSchema<T>>;
 interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
     props: RequiredBy<ComboboxProps<T>, PropsWithDefault>;
     state: "idle" | "focused" | "suggesting" | "interacting";
@@ -260,6 +259,8 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
     effect: string;
     guard: string;
 }
+type ComboboxService<T extends CollectionItem = CollectionItem> = Service<ComboboxSchema<T>>;
+type ComboboxMachine<T extends CollectionItem = CollectionItem> = Machine<ComboboxSchema<T>>;
 interface TriggerProps {
     /**
      * Whether the trigger is focusable
@@ -408,7 +409,7 @@ interface ComboboxApi<T extends PropTypes = PropTypes, V extends CollectionItem
 
 declare function connect<T extends PropTypes, V extends CollectionItem>(service: ComboboxService<V>, normalize: NormalizeProps<T>): ComboboxApi<T, V>;
 
-declare const machine: _zag_js_core.MachineConfig<ComboboxSchema<any>>;
+declare const machine: _zag_js_core.Machine<ComboboxSchema<any>>;
 
 declare const props: (keyof ComboboxProps<any>)[];
 declare const splitProps: <Props extends Partial<ComboboxProps<any>>>(props: Props) => [Partial<ComboboxProps<any>>, Omit<Props, keyof ComboboxProps<any>>];
@@ -419,4 +420,4 @@ declare const splitItemGroupProps: <Props extends ItemGroupProps>(props: Props)
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 
-export { type ComboboxApi as Api, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type NavigateDetails, type OpenChangeDetails, type ComboboxProps as Props, type ScrollToIndexDetails, type ComboboxService as Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, itemGroupLabelProps, itemGroupProps, itemProps, machine, props, splitItemGroupLabelProps, splitItemGroupProps, splitItemProps, splitProps };
+export { type ComboboxApi as Api, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type ComboboxMachine as Machine, type NavigateDetails, type OpenChangeDetails, type ComboboxProps as Props, type ScrollToIndexDetails, type ComboboxService as Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, itemGroupLabelProps, itemGroupProps, itemProps, machine, props, splitItemGroupLabelProps, splitItemGroupProps, splitItemProps, splitProps };

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.0",
+  "version": "1.0.2",
   "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.0",
-    "@zag-js/aria-hidden": "1.0.0",
-    "@zag-js/collection": "1.0.0",
-    "@zag-js/core": "1.0.0",
-    "@zag-js/dismissable": "1.0.0",
-    "@zag-js/dom-query": "1.0.0",
-    "@zag-js/utils": "1.0.0",
-    "@zag-js/popper": "1.0.0",
-    "@zag-js/types": "1.0.0"
+    "@zag-js/anatomy": "1.0.2",
+    "@zag-js/aria-hidden": "1.0.2",
+    "@zag-js/collection": "1.0.2",
+    "@zag-js/core": "1.0.2",
+    "@zag-js/dismissable": "1.0.2",
+    "@zag-js/dom-query": "1.0.2",
+    "@zag-js/utils": "1.0.2",
+    "@zag-js/popper": "1.0.2",
+    "@zag-js/types": "1.0.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"