@zag-js/combobox 0.49.0 → 0.51.0

package/dist/index.d.mts

@@ -9,7 +9,7 @@ import { StateMachine } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"input" | "label" | "content" | "root" | "positioner" | "control" | "trigger" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"input" | "label" | "content" | "item" | "root" | "positioner" | "control" | "trigger" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel">;
 
 declare const collection: {
     <T extends unknown>(options: CollectionOptions<T>): Collection<T>;
@@ -22,7 +22,7 @@ interface ValueChangeDetails<T extends CollectionItem = CollectionItem> {
 }
 interface HighlightChangeDetails<T extends CollectionItem = CollectionItem> {
     highlightedValue: string | null;
-    highligtedItem: T | null;
+    highlightedItem: T | null;
 }
 interface InputValueChangeDetails {
     inputValue: string;
@@ -111,6 +111,8 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      *
      * - `autohighlight`: The first focused item is highlighted as the user types
      * - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated
+     *
+     * @default "none"
      */
     inputBehavior: "autohighlight" | "autocomplete" | "none";
     /**
@@ -119,6 +121,8 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      * - `replace`: The selected item string is set as the input value
      * - `clear`: The input value is cleared
      * - `preserve`: The input value is preserved
+     *
+     * @default "replace"
      */
     selectionBehavior: "clear" | "replace" | "preserve";
     /**
@@ -127,10 +131,12 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     autoFocus?: boolean;
     /**
      * Whether to open the combobox popup on initial click on the input
+     * @default false
      */
     openOnClick?: boolean;
     /**
      * Whether to show the combobox when the input value changes
+     * @default true
      */
     openOnChange?: boolean | ((details: InputValueChangeDetails) => boolean);
     /**
@@ -139,6 +145,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     allowCustomValue?: boolean;
     /**
      * Whether to loop the keyboard navigation through the items
+     * @default true
      */
     loopFocus?: boolean;
     /**
@@ -184,6 +191,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     getSelectionValue?: (details: SelectionValueDetails<T>) => string;
     /**
      * Whether to open the combobox on arrow key press
+     * @default true
      */
     openOnKeyPress: boolean;
     /**
@@ -191,15 +199,14 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      */
     scrollToIndexFn?: (details: ScrollToIndexDetails) => void;
     /**
-     * The underling `aria-haspopup` attribute to use for the combobox
-     * - `listbox`: The combobox has a listbox popup (default)
-     * - `dialog`: The combobox has a dialog popup. Useful when in select only mode
+     * Whether the combobox is a composed with other composite widgets like tabs
+     * @default true
      */
-    popup: "listbox" | "dialog";
+    composite: boolean;
     /**
-     * Whether to register this combobox as a dismissable layer
+     * Whether to disable registering this a dismissable layer
      */
-    dismissable: boolean;
+    disableLayer?: boolean;
 }
 type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<PublicContext<T>, "id" | "collection">;
 type ComputedContext = Readonly<{
@@ -251,6 +258,12 @@ interface MachineState {
 }
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+interface TriggerProps {
+    /**
+     * Whether the trigger is focusable
+     */
+    focusable?: boolean;
+}
 interface ItemProps {
     /**
      * Whether hovering outside should clear the highlighted state
@@ -294,10 +307,6 @@ interface MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem =
      * Whether the combobox is open
      */
     open: boolean;
-    /**
-     * Whether the combobox input value is empty
-     */
-    inputEmpty: boolean;
     /**
      * The value of the combobox input
      */
@@ -313,7 +322,7 @@ interface MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem =
     /**
      * The value of the combobox input
      */
-    highlightValue(value: string): void;
+    setHighlightValue(value: string): void;
     /**
      * The selected items
      */
@@ -376,7 +385,7 @@ interface MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem =
     positionerProps: T["element"];
     inputProps: T["input"];
     contentProps: T["element"];
-    triggerProps: T["button"];
+    getTriggerProps(props?: TriggerProps): T["button"];
     clearTriggerProps: T["button"];
     listProps: T["element"];
     getItemProps(props: ItemProps): T["element"];
@@ -390,4 +399,4 @@ declare function connect<T extends PropTypes, V extends CollectionItem>(state: S
 
 declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type SelectionValueDetails, type ValueChangeDetails, anatomy, collection, connect, machine };
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type SelectionValueDetails, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { StateMachine } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"input" | "label" | "content" | "root" | "positioner" | "control" | "trigger" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"input" | "label" | "content" | "item" | "root" | "positioner" | "control" | "trigger" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel">;
 
 declare const collection: {
     <T extends unknown>(options: CollectionOptions<T>): Collection<T>;
@@ -22,7 +22,7 @@ interface ValueChangeDetails<T extends CollectionItem = CollectionItem> {
 }
 interface HighlightChangeDetails<T extends CollectionItem = CollectionItem> {
     highlightedValue: string | null;
-    highligtedItem: T | null;
+    highlightedItem: T | null;
 }
 interface InputValueChangeDetails {
     inputValue: string;
@@ -111,6 +111,8 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      *
      * - `autohighlight`: The first focused item is highlighted as the user types
      * - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated
+     *
+     * @default "none"
      */
     inputBehavior: "autohighlight" | "autocomplete" | "none";
     /**
@@ -119,6 +121,8 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      * - `replace`: The selected item string is set as the input value
      * - `clear`: The input value is cleared
      * - `preserve`: The input value is preserved
+     *
+     * @default "replace"
      */
     selectionBehavior: "clear" | "replace" | "preserve";
     /**
@@ -127,10 +131,12 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     autoFocus?: boolean;
     /**
      * Whether to open the combobox popup on initial click on the input
+     * @default false
      */
     openOnClick?: boolean;
     /**
      * Whether to show the combobox when the input value changes
+     * @default true
      */
     openOnChange?: boolean | ((details: InputValueChangeDetails) => boolean);
     /**
@@ -139,6 +145,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     allowCustomValue?: boolean;
     /**
      * Whether to loop the keyboard navigation through the items
+     * @default true
      */
     loopFocus?: boolean;
     /**
@@ -184,6 +191,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
     getSelectionValue?: (details: SelectionValueDetails<T>) => string;
     /**
      * Whether to open the combobox on arrow key press
+     * @default true
      */
     openOnKeyPress: boolean;
     /**
@@ -191,15 +199,14 @@ interface PublicContext<T extends CollectionItem = CollectionItem> extends Direc
      */
     scrollToIndexFn?: (details: ScrollToIndexDetails) => void;
     /**
-     * The underling `aria-haspopup` attribute to use for the combobox
-     * - `listbox`: The combobox has a listbox popup (default)
-     * - `dialog`: The combobox has a dialog popup. Useful when in select only mode
+     * Whether the combobox is a composed with other composite widgets like tabs
+     * @default true
      */
-    popup: "listbox" | "dialog";
+    composite: boolean;
     /**
-     * Whether to register this combobox as a dismissable layer
+     * Whether to disable registering this a dismissable layer
      */
-    dismissable: boolean;
+    disableLayer?: boolean;
 }
 type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<PublicContext<T>, "id" | "collection">;
 type ComputedContext = Readonly<{
@@ -251,6 +258,12 @@ interface MachineState {
 }
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+interface TriggerProps {
+    /**
+     * Whether the trigger is focusable
+     */
+    focusable?: boolean;
+}
 interface ItemProps {
     /**
      * Whether hovering outside should clear the highlighted state
@@ -294,10 +307,6 @@ interface MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem =
      * Whether the combobox is open
      */
     open: boolean;
-    /**
-     * Whether the combobox input value is empty
-     */
-    inputEmpty: boolean;
     /**
      * The value of the combobox input
      */
@@ -313,7 +322,7 @@ interface MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem =
     /**
      * The value of the combobox input
      */
-    highlightValue(value: string): void;
+    setHighlightValue(value: string): void;
     /**
      * The selected items
      */
@@ -376,7 +385,7 @@ interface MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem =
     positionerProps: T["element"];
     inputProps: T["input"];
     contentProps: T["element"];
-    triggerProps: T["button"];
+    getTriggerProps(props?: TriggerProps): T["button"];
     clearTriggerProps: T["button"];
     listProps: T["element"];
     getItemProps(props: ItemProps): T["element"];
@@ -390,4 +399,4 @@ declare function connect<T extends PropTypes, V extends CollectionItem>(state: S
 
 declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type SelectionValueDetails, type ValueChangeDetails, anatomy, collection, connect, machine };
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type SelectionValueDetails, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };