Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface KeyboardMovementOptions<D, CE, IE>

The options for custom keyboard movement.

Type parameters

  • D = unknown

    the type of each item within the item list

  • CE: HTMLElement = HTMLElement

    the type of the DOM element for the keyboard event handler.

  • IE: HTMLElement = HTMLElement

    the type of the DOM element for the keyboard event handler.

Hierarchy

Index

Properties

decrementKeys: readonly IncrementMovementKey[]

The keys that can trigger a move to the previous item. If the loopable config is enabled, this will loop to the last item if the first item is currently "focused".

findMatchIndex?: (value: string, values: readonly string[], startIndex: number, isSelfMatchable?: boolean) => number

Type declaration

    • (value: string, values: readonly string[], startIndex: number, isSelfMatchable?: boolean): number
    • A function that is used to find the next match index within a list of values by comparing the start values ignoring case.

      If a match can not be found from the search string, -1 will be returned. The search value is self-matchable by default, but it can be omitted by disabling the isSelfMatchable argument. This will make a self-match return -1.

      internal

      Parameters

      • value: string

        The current search value

      • values: readonly string[]

        A list of values to search within

      • startIndex: number

        The index within the values list to start the search from

      • isSelfMatchable: boolean = true

        Boolean if the current index can be included in the search

      Returns number

focusedIndex: number

The currently focused index within the item list. This will need to be updated due to the onChange callback being called for this hook to work as it is fully "controlled" by a parent hook/component.

getItemValue?: GetItemValue<D>

A function that will get a string value from each item. The default implementation will:

  • return a number as a string
  • return a string as itself
  • return the result of item() if it is a function (this will also be used if the valueKey on an object is a function).
  • return item[valueKey] if it's an object (this uses typeof item === "object")
  • return the empty string for all other data types
incrementKeys: readonly IncrementMovementKey[]

The keys that can trigger a move to the next item. If the loopable config is enabled, this will loop to the first item if the last item is currently "focused".

items: readonly D[]

The list of items that should be searched whenever the user types a letter.

jumpToFirstKeys: readonly JumpMovementKey[]

The keys that can trigger a move to the first item.

jumpToLastKeys: readonly JumpMovementKey[]

The keys that can trigger a move to the last item.

loopable?: boolean

Boolean if the keyboard movement should be able to loop around once it has reached the start or end of all the items.

onKeyDown?: KeyboardEventHandler<CE>

An optional onKeyDown event handler that should be merged with the search functionality.

Note: This will be called before the search functionality is triggered.

resetTime?: number

The amount of time that a "search" value should be kept before resetting. The default value works for most cases, but it might be nice to configure it based on your use case.

searchable?: boolean

Boolean if the movement should also include printable characters search movement.

stopPropagation?: boolean

Boolean if the event should trigger event.stopPropagation() when the custom keyboard movement is triggered. This should generally be kept as false or undefined by default, but enabled when creating more complex 2-dimensional movement cases such as grids.

valueKey?: string

The key to use to get a value string if the item is an object.

Methods

Generated using TypeDoc