@zag-js/combobox 0.49.0 → 0.51.0

package/src/combobox.types.ts

@@ -15,7 +15,7 @@ export interface ValueChangeDetails<T extends CollectionItem = CollectionItem> {
 
 export interface HighlightChangeDetails<T extends CollectionItem = CollectionItem> {
   highlightedValue: string | null
-  highligtedItem: T | null
+  highlightedItem: T | null
 }
 
 export interface InputValueChangeDetails {
@@ -118,6 +118,8 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
    *
    * - `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"
   /**
@@ -126,6 +128,8 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
    * - `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"
   /**
@@ -134,10 +138,12 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
   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)
   /**
@@ -146,6 +152,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
   allowCustomValue?: boolean
   /**
    * Whether to loop the keyboard navigation through the items
+   * @default true
    */
   loopFocus?: boolean
   /**
@@ -191,6 +198,7 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
   getSelectionValue?: (details: SelectionValueDetails<T>) => string
   /**
    * Whether to open the combobox on arrow key press
+   * @default true
    */
   openOnKeyPress: boolean
   /**
@@ -198,15 +206,14 @@ interface PublicContext<T extends CollectionItem = CollectionItem>
    */
   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
 }
 
 export type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<
@@ -277,6 +284,13 @@ export type Send = S.Send<S.AnyEventObject>
  * Component API
  * -----------------------------------------------------------------------------*/
 
+export interface TriggerProps {
+  /**
+   * Whether the trigger is focusable
+   */
+  focusable?: boolean
+}
+
 export interface ItemProps {
   /**
    * Whether hovering outside should clear the highlighted state
@@ -324,10 +338,6 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio
    * Whether the combobox is open
    */
   open: boolean
-  /**
-   * Whether the combobox input value is empty
-   */
-  inputEmpty: boolean
   /**
    * The value of the combobox input
    */
@@ -343,7 +353,7 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio
   /**
    * The value of the combobox input
    */
-  highlightValue(value: string): void
+  setHighlightValue(value: string): void
   /**
    * The selected items
    */
@@ -407,7 +417,7 @@ export interface MachineApi<T extends PropTypes = PropTypes, V extends Collectio
   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"]

package/src/index.ts

@@ -21,5 +21,6 @@ export type {
   PositioningOptions,
   ScrollToIndexDetails,
   SelectionValueDetails,
+  TriggerProps,
   ValueChangeDetails,
 } from "./combobox.types"