prosekit/preact/autocomplete

Interfaces

AutocompleteEmptyProps

Props for the AutocompleteEmpty component.

Extends

Partial<CreateProps<Props, Events>>

AutocompleteItemProps

Props for the AutocompleteItem component.

Extends

Partial<CreateProps<AutocompleteItemProps, AutocompleteItemEvents>>

Properties

onSelect?: (event: CustomEvent<void>) => void

value?: string

The value of the item, which will be matched against the query.

If not provided, the value is the item’s text content.

Default

""

AutocompleteListProps

Props for the AutocompleteList component.

Extends

Partial<CreateProps<AutocompleteListProps, AutocompleteListEvents>>

Properties

filter?: null | ItemFilter

The filter function to determine if an item should be shown in the listbox. By default, a simple case-insensitive substring match is used. You can provide a custom filter function to match against a more complex pattern. You can also pass null to disable filtering and allow all items to be shown.

Default

defaultItemFilter

onValueChange?: (event: string) => void

AutocompletePopoverProps

Props for the AutocompletePopover component.

Extends

Partial<CreateProps<AutocompletePopoverProps, AutocompletePopoverEvents>>

Properties

altBoundary?: boolean

Whether to check the alternate elementContext’s boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default

false

autoUpdate?: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

https://floating-ui.com/docs/autoUpdate

Default

true

boundary?: Boundary

Default

"The body element"

elementContext?: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default

'floating'

fitViewport?: boolean

Default

true

flip?: boolean | Placement[]

Whether to flip the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred placement does not fit.

Default

true

hide?: boolean

Whether to hide the floating element when the reference element or the floating element is fully clipped.

Default

false

hoist?: boolean

Default

true

inline?: boolean

Default

true

offset?: OffsetOptions

The distance between the popover and the hovered block.

Default

onOpenChange?: (event: boolean) => void

onQueryChange?: (event: string) => void

overflowPadding?: number

Default

overlap?: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default

false

placement?: Placement

The placement of the popover, relative to the text cursor.

Default

"bottom-start"

regex?: null | RegExp

The regular expression to match the query text to autocomplete.

Default

null

rootBoundary?: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default

'viewport'

sameHeight?: boolean

Whether to constrain the floating element’s height so that it matches the reference element.

Default

false

sameWidth?: boolean

Whether to constrain the floating element’s width so that it matches the reference element.

Default

false

shift?: boolean

Whether the floating element should shift to keep it in view.

Default

true

strategy?: "fixed" | "absolute"

The strategy to use for positioning

Default

"absolute"

transform?: boolean

Whether to use CSS transforms to position the floating element instead of layout (top and left CSS properties). CSS transforms are more performant, but can cause conflicts with transform animations.

Default

false

Variables