Skip to main content

multishift

package multishift

variable Actions

The action creators which can be dispatched via the reducer.

Signature:

Actions: {
itemMouseMove: typeof itemMouseMove;
itemMouseLeave: typeof itemMouseLeave;
itemClick: typeof itemClick;
menuBlur: typeof menuBlur;
toggleButtonBlur: typeof toggleButtonBlur;
inputBlur: typeof inputBlur;
toggleButtonClick: typeof toggleButtonClick;
menuSpecialKeyDown: typeof menuSpecialKeyDown;
toggleButtonSpecialKeyDown: typeof toggleButtonSpecialKeyDown;
inputSpecialKeyDown: typeof inputSpecialKeyDown;
menuCharacterKeyDown: typeof menuCharacterKeyDown;
outerTouchEnd: typeof outerTouchEnd;
outerMouseUp: typeof outerMouseUp;
selectItems: typeof selectItems;
selectItem: typeof selectItem;
removeSelectedItems: typeof removeSelectedItems;
removeSelectedItem: typeof removeSelectedItem;
setState: typeof setState;
clearSelection: typeof clearSelection;
setHoverItemIndex: typeof setHoverItemIndex;
inputValueChange: typeof inputValueChange;
clearInputValue: typeof clearInputValue;
toggleMenu: typeof toggleMenu;
closeMenu: typeof closeMenu;
openMenu: typeof openMenu;
setHighlightedIndexes: typeof setHighlightedIndexes;
setHighlightedIndex: typeof setHighlightedIndex;
clearHighlighted: typeof clearHighlighted;
reset: typeof reset;
clearJumpText: typeof clearJumpText;
}

variable MultishiftActionTypes

Signature:

MultishiftActionTypes: {
readonly SelectItems: "$$__SELECT_ITEMS__";
readonly SelectItem: "$$__SELECT_ITEM__";
readonly RemoveSelectedItems: "$$_REMOVE__SELECTED_ITEMS__";
readonly RemoveSelectedItem: "$$__REMOVE_SELECTED_ITEM__";
readonly ClearSelection: "$$__CLEAR_SELECTION__";
readonly SetHoverItemIndex: "$$__SET_HOVER_ITEM_INDEX__";
readonly ToggleMenu: "$$__TOGGLE_MENU__";
readonly CloseMenu: "$$__CLOSE_MENU__";
readonly OpenMenu: "$$__OPEN_MENU__";
readonly SetHighlightedIndexes: "$$__SET_HIGHLIGHTED_INDEXES__";
readonly SetHighlightedIndex: "$$__SET_HIGHLIGHTED_INDEX__";
readonly ClearHighlighted: "$$__CLEAR_HIGHLIGHTED__";
readonly ClearHover: "$$__CLEAR_HOVER__";
readonly Reset: "$$__RESET__";
readonly SetState: "$$__SET_STATE__";
readonly ItemMouseMove: "$$__ITEM_MOUSE_MOVE__";
readonly ItemMouseLeave: "$$__ITEM_MOUSE_LEAVE__";
readonly ItemClick: "$$__ITEM_CLICK__";
readonly ToggleButtonClick: "$$__TOGGLE_BUTTON_CLICK__";
readonly ToggleButtonBlur: "$$__TOGGLE_BUTTON_BLUR__";
readonly ToggleButtonSpecialKeyDown: "$$__TOGGLE_BUTTON_SPECIAL_KEY_DOWN__";
readonly MenuBlur: "$$__MENU_BLUR__";
readonly MenuSpecialKeyDown: "$$__MENU_SPECIAL_KEY_DOWN__";
readonly MenuCharacterKeyDown: "$$__MENU_CHARACTER_KEY_DOWN__";
readonly InputBlur: "$$__INPUT_BLUR__";
readonly InputSpecialKeyDown: "$$__INPUT_SPECIAL_KEY_DOWN__";
readonly ClearJumpText: "$$__CLEAR_JUMP_TEXT__";
readonly InputValueChange: "$$__INPUT_VALUE_CHANGE__";
readonly ClearInputValue: "$$__CLEAR_INPUT_VALUE__";
readonly OuterMouseUp: "$$__OUTER_MOUSE_UP__";
readonly OuterTouchEnd: "$$__OUTER_TOUCH_END__";
}

variable SPECIAL_INPUT_KEYS

Signature:

SPECIAL_INPUT_KEYS: readonly ["ArrowDown", "ArrowUp", "Enter", "Escape"]

variable SPECIAL_KEYS

Signature:

SPECIAL_KEYS: readonly ["Tab", "Space", "Enter", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown", "SelectAll"]

variable SPECIAL_MENU_KEYS

Signature:

SPECIAL_MENU_KEYS: readonly ["ArrowDown", "ArrowUp", "Space", "Tab", "Enter", "Escape", "Home", "End", "SelectAll"]

variable SPECIAL_TOGGLE_BUTTON_KEYS

Signature:

SPECIAL_TOGGLE_BUTTON_KEYS: readonly ["ArrowDown", "ArrowUp", "Space"]

variable Type

Signature:

Type: {
readonly Select: "select";
readonly ComboBox: "combobox";
readonly ControlledMenu: "controlled-menu";
}

variable useMultishift

Multishift is a hook that provides all the necessary tools for building accessible dropdown components.

Signature:

useMultishift: <Item = any>(props: MultishiftProps<Item>) => MultishiftReturn<Item>

Remarks:

It supports select and autocomplete drop down experiences with built in support for multi-selection.

The library borrows (and steals) heavily from downshift but also adds some features which are really important for the remirror project.

  • Focus on typescript support - No React Native support - Multi selection support - Render with **only** menu support (fully controlled)

Eventually some of the code will be contributed back to the downshift library.

interface A11yStatusMessageProps

Signature:

export interface A11yStatusMessageProps<Item = any> 

property items

Signature:

items: Item[];

property itemsToString

Signature:

itemsToString: (items: Item[], itemToString?: (item: Item) => string) => string;

property state

Signature:

state: MultishiftState<Item>;

interface Action

Type representing Generic Action

Signature:

export interface Action<Type extends string = string> 

property type

Signature:

type: Type;

interface ActionCreatorsMapObject

Object whose values are action creator functions.

Signature:

export interface ActionCreatorsMapObject<A = any> 

Signature:

[key: string]: ActionCreator<A>;

interface ActionWithPayload

Type representing an Action with Payload

Signature:

export interface ActionWithPayload<Type extends string = string, Payload = any> 

property payload

Signature:

payload: Payload;

property type

Signature:

type: Type;

interface GetComboBoxPropsOptions

Signature:

export interface GetComboBoxPropsOptions<Element extends HTMLElement = any, RefKey extends string = 'ref'> extends RefProps<RefKey>, HTMLProps<Element> 

Extends: RefProps<RefKey>, HTMLProps<Element>

(Some inherited members may not be shown because they are not represented in the documentation.)

property refKey

A custom ref key which allows a reference to be obtained from non standard components.

Signature:

refKey?: RefKey;

interface GetItemPropsOptions

Signature:

export interface GetItemPropsOptions<Element extends HTMLElement = any, RefKey extends string = 'ref', Item = any> extends GetPropsWithRefOptions<Element, RefKey> 

Extends: GetPropsWithRefOptions<Element, RefKey>

(Some inherited members may not be shown because they are not represented in the documentation.)

property disabled

Determine whether or not the item can be highlighted and selected.

Signature:

disabled?: boolean;

property index

This is how downshift keeps track of your item when updating the highlightedIndex as the user keys around. By default, downshift will assume the index is the order in which you're calling getItemProps. This is often good enough, but if you find odd behavior, try setting this explicitly. It's probably best to be explicit about index when using a windowing library like react-virtualized.

Signature:

index: number;

property item

This is the item data that will be selected when the user selects a particular item.

Signature:

item: Item;

property refKey

A custom ref key which allows a reference to be obtained from non standard components.

Signature:

refKey?: RefKey;

interface GetPropsWithRefOptions

Signature:

export interface GetPropsWithRefOptions<Element extends HTMLElement = any, RefKey extends string = 'ref'> extends RefProps<RefKey>, HTMLProps<Element> 

Extends: RefProps<RefKey>, HTMLProps<Element>

(Some inherited members may not be shown because they are not represented in the documentation.)

property disabled

Determine whether or not the item can be highlighted and selected.

Signature:

disabled?: boolean;

property refKey

A custom ref key which allows a reference to be obtained from non standard components.

Signature:

refKey?: RefKey;

interface GetRemoveButtonOptions

Signature:

export interface GetRemoveButtonOptions<Element extends HTMLElement = any, Item = any> extends HTMLProps<Element> 

Extends: HTMLProps<Element>

(Some inherited members may not be shown because they are not represented in the documentation.)

property disabled

Prevents this from being selected.

Signature:

disabled?: boolean;

property item

You must provide the selectedItem property.

Signature:

item: Item;

interface GetRemoveButtonReturn

Signature:

export interface GetRemoveButtonReturn<Element extends HTMLElement = any> extends DetailedHTMLProps<HTMLAttributes<Element>, Element> 

Extends: DetailedHTMLProps<HTMLAttributes<Element>, Element>

(Some inherited members may not be shown because they are not represented in the documentation.)

property role

The aria role for the button. This can be overridden in the options.

Signature:

role: string;

interface IgnoredElementOptions

Signature:

export interface IgnoredElementOptions<Element extends HTMLElement = any, RefKey extends string = 'ref'> extends GetPropsWithRefOptions<Element, RefKey> 

Extends: GetPropsWithRefOptions<Element, RefKey>

(Some inherited members may not be shown because they are not represented in the documentation.)

property disabled

Determine whether or not the item can be highlighted and selected.

Signature:

disabled?: boolean;

property refKey

A custom ref key which allows a reference to be obtained from non standard components.

Signature:

refKey?: RefKey;

interface ItemClickPayload

Signature:

export interface ItemClickPayload 

property event

This is provided so that the state reducer has access to the event. It should not be stored.

Signature:

event: MouseEvent<any>;

property index

Signature:

index: number;

property modifiers

Signature:

modifiers: Modifier[];

interface ItemsPayload

Signature:

export interface ItemsPayload<Item = any> 

property items

Signature:

items: Item[];

property keepHighlights

By default whenever a selection is made the highlights are reset. Set this to true to hold onto the highlights

Signature:

keepHighlights?: boolean;

interface MultishiftA11yIdProps

Signature:

export interface MultishiftA11yIdProps 

property getItemA11yId

Get the item id which will be used to identifying the item in the dom for accessibility purposes.

Signature:

getItemA11yId?: (index?: number) => string;

property id

Signature:

id?: string;

property inputId

Signature:

inputId?: string;

property labelId

Signature:

labelId?: string;

property menuId

Signature:

menuId?: string;

property toggleButtonId

Signature:

toggleButtonId?: string;

interface MultishiftBaseProps

Signature:

export interface MultishiftBaseProps<Item = any> 

property getA11yStatusMessage

This function is passed as props to a status component nested within and allows you to create your own assertive ARIA statuses.

A default getA11yStatusMessage function is provided that will check items.current.length and return "No results." or if there are results but no item is highlighted, "resultCount results are available, use up and down arrow keys to navigate." If items are highlighted it will run itemToString(highlightedItem) and display the value of the highlightedItem.

Signature:

getA11yStatusMessage?: GetA11yStatusMessage;

property getItemId

A unique id for the item which is used to compare between two items.

This defaults to just returning the item directly which means items are identical when item === item.

The primary use case is when items are objects and the equality check above is always false even for objects with the same values. In that case you can define the getItemId prop.

const items = [{value: 'A', id: 'a'}, {value: 'B', id: 'b'}];
const getItemId = (item: typeof items[0]) => item.id;

This is very useful when an item is selected. By default multishift will run a uniqueness check and use the function provided above to prevent duplication.

Signature:

getItemId?: GetItemId<Item>;

property items

The list ot items which are visible in menu.

This can be changed via filtering.

Signature:

items: Item[];

property itemsToString

Takes a list of items and transforms them into a string.

This defaults to a comma separated list of the values.

Signature:

itemsToString?: ItemsToString<Item>;

property itemToString

Signature:

itemToString?: ItemToString<Item>;

property stateReducer

This function will be called each time multishift sets its internal state (or calls the onStateChange handler for controlled props). It allows you to modify the state change that will take place which can give you fine grained control over how the component interacts with user updates without having to use controlled Props. It gives you the current state and the state that will be set, and you return the state that you want to set.

Signature:

stateReducer?: (changesAndState: MultishiftStateChangeset<Item>, action: MultishiftRootActions<Item>, props: MultishiftProps<Item>) => MultishiftState<Item>;

interface MultishiftBehaviorProps

Signature:

export interface MultishiftBehaviorProps 

property autoSelectOnBlur

When true will automatically selected the higlightedIndexes on blur.

Signature:

autoSelectOnBlur?: boolean;

property circularNavigation

Controls the circular keyboard navigation between items. If set to true, when first item is highlighted, the ArrowUp will move highlight to the last item, and vice versa using ArrowDown.

Signature:

circularNavigation?: boolean;

property closeOnSelection

Whether the input should be closed when a selection is made. This default to false when multiple=true.

Signature:

closeOnSelection?: boolean;

property customA11yStatusMessage

Set a custom message to render for the duration provided by the timeout.

Signature:

customA11yStatusMessage?: string;

property direction

The direction which drop down should be rendered.

  • When vertical the ArrowUp and ArrowDown keyDown handlers are used. - When horizontal the ArrowLeft and ArrowRight handlers are used.

Signature:

direction?: 'horizontal' | 'vertical';

property ignoreJumpText

By default typing into non text input combo-box will jump to the closest index.

Setting this to false will ignore this behaviour

Signature:

ignoreJumpText?: boolean;

property includeHoveredIndexInSelection

When true will include the hovered index in the next selection (whether on blur) or active selection.

Signature:

includeHoveredIndexInSelection?: boolean;

property multiple

Set to true to allow multiple items to be selected in the list. When not specified (or set to false) only one item can be selected (and only one at a time.

Signature:

multiple?: boolean;

property type

The dropdown type affects how the dropdown should be set up.

### select

Use this to implement a selection drop down. With a toggle button and items. There is no autocomplete functionality and items typically don't change.

const items ['a', 'b', 'c'];
const { getToggleButtonProps, getMenuProps, getItemProps, getLabelProps } = useMultishift({ type: 'select', items });

return (
<div>
<label {...getLabelProps()}>Choose an element:</label>
<button {...getToggleButtonProps()}>{selectedItems[0] || 'Names'}</button>
<button onClick={() => clearSelection()}>Clear</button>
<ul {...getMenuProps()}>
{isOpen &&
items.map((option, index) => (
<li
style={{
userSelect:'none',
fontWeight: selectedItems.includes(option) ? 'bold' : 'normal',
...(itemHighlightedAtIndex(index) || hoveredIndex === index
? { backgroundColor: '#bde4ff' }
: {}),
}}
key={`${option}${index}`}
{...getItemProps({ item: option, index })}
>
{option}
</li>
))}
</ul>
</div>
)

### combobox

The combination of a select dropdown paired with an input for filtering the results.

The combobox usually will include both a toggle button and input box.

const items ['a', 'b', 'c'];
const {
getToggleButtonProps,
getMenuProps,
getItemProps,
getLabelProps,
getComboBoxProps,
getInputProps
} = useMultishift({ type: 'autocomplete', items });

return (
<div {...getComboBoxProps()}>
<label {...getLabelProps()}>Choose an element:</label>
<button {...getToggleButtonProps()}>{selectedItems[0] || 'Names'}</button>
<input {...getInputProps()}
<button onClick={() => clearSelection()}>Clear</button>
<ul {...getMenuProps()}>
{isOpen &&
items.map((item, index) => (
<li
key={`${item}${index}`}
{...getItemProps({ item: item, index })}
>
{item}
</li>
))}
</ul>
</div>
)

Signature:

type: DropdownType;

interface MultishiftChangeHandlerProps

Signature:

export interface MultishiftChangeHandlerProps<Item = any> 

property onHighlightedGroupEndIndexChange

Signature:

onHighlightedGroupEndIndexChange?: (highlightedGroupEndIndex: number | undefined, state: MultishiftState<Item>) => void;

property onHighlightedGroupStartIndexChange

Signature:

onHighlightedGroupStartIndexChange?: (highlightedGroupStartIndex: number, state: MultishiftState<Item>) => void;

property onHighlightedIndexesChange

Signature:

onHighlightedIndexesChange?: (highlightedIndexes: number[], state: MultishiftState<Item>) => void;

property onHoveredIndexChange

Signature:

onHoveredIndexChange?: (hoveredIndex: number, state: MultishiftState<Item>) => void;

property onInputValueChange

Signature:

onInputValueChange?: (inputValue: string, state: MultishiftState<Item>) => void;

property onIsOpenChange

Signature:

onIsOpenChange?: (isOpen: boolean, state: MultishiftState<Item>) => void;

property onJumpTextChange

Signature:

onJumpTextChange?: (jumpText: string, state: MultishiftState<Item>) => void;

property onOuterClick

Signature:

onOuterClick?: (state: MultishiftState<Item>) => void;

property onSelectedItemsChange

Called when the selected items change, either by the user selecting an item or the user clearing the selection. Called with the items that were selected or an empty array when removed

Signature:

onSelectedItemsChange?: (selectedItems: Item[], state: MultishiftState<Item>) => void;

property onStateChange

This function is called anytime the internal state changes. This can be useful if you're using multishift as a "controlled" component, where you manage some or all of the state (e.g. isOpen, selectedItems, highlightedIndexes, etc) and then pass it as props, rather than letting multishift control all its state itself.

The parameters both take the shape of internal state ({highlightedIndex: number, inputValue: string, isOpen: boolean, selectedItem: any}) but differ slightly.

Signature:

onStateChange?: (changes: MultishiftStateProps<Item>, state: MultishiftState<Item>) => void;

interface MultishiftDefaultValueProps

Signature:

export interface MultishiftDefaultValueProps<Item = any> 

property defaultHighlightedGroupEndIndex

Signature:

defaultHighlightedGroupEndIndex?: number;

property defaultHighlightedGroupStartIndex

Signature:

defaultHighlightedGroupStartIndex?: number;

property defaultHighlightedIndexes

Signature:

defaultHighlightedIndexes?: number[];

property defaultHoveredIndex

Signature:

defaultHoveredIndex?: number;

property defaultInputValue

Signature:

defaultInputValue?: string;

property defaultIsOpen

Signature:

defaultIsOpen?: boolean;

property defaultJumpText

Signature:

defaultJumpText?: string;

property defaultSelectedItems

Signature:

defaultSelectedItems?: Item[];

interface MultishiftFocusHelpers

Signature:

export interface MultishiftFocusHelpers 

property focusInput

Focus on the input element when defined.

Signature:

focusInput: () => void;

property focusMenu

Focus on the menu.

Signature:

focusMenu: () => void;

property focusMenuItem

Focus on a menu item by the provided index.

Signature:

focusMenuItem: (index: number) => void;

property focusToggleButton

Focus on the toggle button.

Signature:

focusToggleButton: () => void;

interface MultishiftHelpers

Signature:

export interface MultishiftHelpers<Item = any> 

property indexIsHovered

Return true when the provided item index is hovered.

Signature:

indexIsHovered: (index: number) => boolean;

property indexIsSelected

Return true when the provided item index is selected.

Signature:

indexIsSelected: (index: number) => boolean;

property indexOfItem

Return the index of the provided item within the list of items.

Signature:

indexOfItem: (item: Item) => number;

Remarks:

-1 when not found

property itemHighlightedAtIndex

Check if the item at the given index is highlighted.

Signature:

itemHighlightedAtIndex: (index: number) => boolean;

Remarks:

The highlight includes the current highlight (caused by hovers and the arrow keys> as well as multi selection highlighting when the shift key is pressed.

property itemIsHovered

Return true when the provided item is hovered.

Signature:

itemIsHovered: (item: Item) => boolean;

property itemIsSelected

Return true when the provided item is selected.

Signature:

itemIsSelected: (item: Item) => boolean;

property mostRecentHighlightedIndex

The most recently highlighted index which can be used when making a multiple selection.

When none is found it will return -1

Signature:

mostRecentHighlightedIndex: number;

interface MultishiftInitialValueProps

Signature:

export interface MultishiftInitialValueProps<Item = any> 

property initialHighlightedGroupEndIndex

Signature:

initialHighlightedGroupEndIndex?: number;

property initialHighlightedGroupStartIndex

Signature:

initialHighlightedGroupStartIndex?: number;

property initialHighlightedIndexes

Signature:

initialHighlightedIndexes?: number[];

property initialHoveredIndex

Signature:

initialHoveredIndex?: number;

property initialInputValue

Signature:

initialInputValue?: string;

property initialIsOpen

Signature:

initialIsOpen?: boolean;

property initialJumpText

Signature:

initialJumpText?: string;

property initialSelectedItems

Signature:

initialSelectedItems?: Item[];

interface MultishiftItemsChangeset

Signature:

export interface MultishiftItemsChangeset<Item = any> 

property current

Signature:

current: Item[];

property previous

Signature:

previous: Item[];

interface MultishiftPropGetters

These functions are used to apply props to the elements that you render. This gives you maximum flexibility to render what, when, and wherever you like.

Signature:

export interface MultishiftPropGetters<Item = any> 

Remarks:

You call these on the element in question For example:

<input {...getInputProps()} />

It's advisable to pass all your props to that function rather than applying them on the element yourself to avoid your props being overridden (or overriding the props returned). For example:

// Good
<input getInputProps({
onKeyUp(event) {
log(event);
}
}) />

// Bad
<input getInputProps() onKeyUp={event => {
log(event);
} />

property getComboBoxProps

Get the augmented props that will be used in the wrapper element on autocomplete dropdowns.

Signature:

getComboBoxProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: GetComboBoxPropsOptions<Element, RefKey>) => GetComboBoxPropsReturn<Element, RefKey>;

Remarks:

Return the props to be applied to the root element that is rendered. This should always be used for autocomplete dropdowns but will throw an error if used within a select dropdown.

property getIgnoredElementProps

Adds a ref to an element which will prevent blurring from happening when the element is in focus.

Signature:

getIgnoredElementProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: IgnoredElementOptions<Element, RefKey>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

  • Allows for autofocusing the input / toggle button or items when [a specific one] when focused.

property getInputProps

Get the augmented props for the autocomplete input element.

Signature:

getInputProps: <Element extends HTMLInputElement = any, RefKey extends string = 'ref'>(options?: GetPropsWithRefOptions<Element, RefKey>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

This method should be applied to the input you render. It is recommended that you pass all props as an object to this method which will compose together any of the event handlers you need to apply to the input while preserving the ones that downshift needs to apply to make the input behave.

There are no required properties for this method.

Optional properties:

disabled: If this is set to true, then no event handlers will be returned from getInputProps and a disabled prop will be returned (effectively disabling the input).

property getItemProps

Get the augmented props for each item being rendered.

Signature:

getItemProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options: GetItemPropsOptions<Element, RefKey, Item>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

The props returned from calling this function should be applied to any menu items you render.

This is an impure function, so it should only be called when you will actually be applying the props to an item.

property getLabelProps

This method should be applied to the label you render. It will generate an id that will be used to label the toggle button and the menu.

Signature:

getLabelProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: IgnoredElementOptions<Element, RefKey>) => GetLabelPropsWithRefReturn<Element, RefKey>;

Remarks:

There are no required properties for this method.

> Note: For accessibility purposes, calling this method is highly recommended.

property getMenuProps

Get the augmented props for your menu dropdown container element.

Signature:

getMenuProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: GetPropsWithRefOptions<Element, RefKey>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

This method should be applied to the element which contains your list of items. Typically, this will be a <div> or a <ul> that surrounds a map expression. This handles the proper ARIA roles and attributes.

refKey: if you're rendering a composite component, that component will need to accept a prop which it forwards to the root DOM element. Commonly, folks call this innerRef. So you'd call: getMenuProps({refKey: 'innerRef'}) and your composite component would forward like: <ul ref={props.innerRef} />. However, if you are just rendering a primitive component like <div>, there is no need to specify this property. Please keep in mind that menus, for accessiblity purposes, should always be rendered, regardless of whether you hide it or not. Otherwise, getMenuProps may throw error if you unmount and remount the menu.

aria-label: By default the menu will add an aria-labelledby that refers to the <label> rendered with getLabelProps. However, if you provide aria-label to give a more specific label that describes the options available, then aria-labelledby will not be provided and screen readers can use your aria-label instead. In some cases, you might want to completely bypass the refKey check. Then you can provide the object {suppressRefError : true} as the second argument to getMenuProps. Please use it with extreme care and only if you are absolutely sure that the ref is correctly forwarded otherwise Downshift will unexpectedly fail.

const {getMenuProps} = useMultishift({items})
const ui = (
<ul {...getMenuProps()}>
{!isOpen
? null
: items.map((item, index) => (
<li {...getItemProps({item, index, key: item.id})}>{item.name}</li>
))}
</ul>
)

> Note that for accessibility reasons it's best if you always render this > element whether or not downshift is in an isOpen state.

property getRemoveButtonProps

Gets the props to attach to a button that removes a selected item.

Signature:

getRemoveButtonProps: <Element extends HTMLElement = any>(options: GetRemoveButtonOptions<Element, Item>) => GetRemoveButtonReturn<Element>;

property getToggleButtonProps

Get the augmented props for the toggle button which typically opens and closes the menu.

Signature:

getToggleButtonProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: GetPropsWithRefOptions<Element, RefKey>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

Returns the props you should apply to any menu toggle button element you render.

interface MultishiftProps

Signature:

export interface MultishiftProps<Item = any> extends MultishiftA11yIdProps, MultishiftBehaviorProps, MultishiftBaseProps<Item>, MultishiftStateProps<Item>, MultishiftDefaultValueProps<Item>, MultishiftInitialValueProps<Item>, MultishiftChangeHandlerProps<Item> 

Extends: MultishiftA11yIdProps, MultishiftBehaviorProps, MultishiftBaseProps<Item>, MultishiftStateProps<Item>, MultishiftDefaultValueProps<Item>, MultishiftInitialValueProps<Item>, MultishiftChangeHandlerProps<Item>

(Some inherited members may not be shown because they are not represented in the documentation.)

property autoSelectOnBlur

When true will automatically selected the higlightedIndexes on blur.

Signature:

autoSelectOnBlur?: boolean;

property circularNavigation

Controls the circular keyboard navigation between items. If set to true, when first item is highlighted, the ArrowUp will move highlight to the last item, and vice versa using ArrowDown.

Signature:

circularNavigation?: boolean;

property closeOnSelection

Whether the input should be closed when a selection is made. This default to false when multiple=true.

Signature:

closeOnSelection?: boolean;

property customA11yStatusMessage

Set a custom message to render for the duration provided by the timeout.

Signature:

customA11yStatusMessage?: string;

property defaultHighlightedGroupEndIndex

Signature:

defaultHighlightedGroupEndIndex?: number;

property defaultHighlightedGroupStartIndex

Signature:

defaultHighlightedGroupStartIndex?: number;

property defaultHighlightedIndexes

Signature:

defaultHighlightedIndexes?: number[];

property defaultHoveredIndex

Signature:

defaultHoveredIndex?: number;

property defaultInputValue

Signature:

defaultInputValue?: string;

property defaultIsOpen

Signature:

defaultIsOpen?: boolean;

property defaultJumpText

Signature:

defaultJumpText?: string;

property defaultSelectedItems

Signature:

defaultSelectedItems?: Item[];

property direction

The direction which drop down should be rendered.

  • When vertical the ArrowUp and ArrowDown keyDown handlers are used. - When horizontal the ArrowLeft and ArrowRight handlers are used.

Signature:

direction?: 'horizontal' | 'vertical';

property getA11yStatusMessage

This function is passed as props to a status component nested within and allows you to create your own assertive ARIA statuses.

A default getA11yStatusMessage function is provided that will check items.current.length and return "No results." or if there are results but no item is highlighted, "resultCount results are available, use up and down arrow keys to navigate." If items are highlighted it will run itemToString(highlightedItem) and display the value of the highlightedItem.

Signature:

getA11yStatusMessage?: GetA11yStatusMessage;

property getItemA11yId

Get the item id which will be used to identifying the item in the dom for accessibility purposes.

Signature:

getItemA11yId?: (index?: number) => string;

property getItemId

A unique id for the item which is used to compare between two items.

This defaults to just returning the item directly which means items are identical when item === item.

The primary use case is when items are objects and the equality check above is always false even for objects with the same values. In that case you can define the getItemId prop.

const items = [{value: 'A', id: 'a'}, {value: 'B', id: 'b'}];
const getItemId = (item: typeof items[0]) => item.id;

This is very useful when an item is selected. By default multishift will run a uniqueness check and use the function provided above to prevent duplication.

Signature:

getItemId?: GetItemId<Item>;

property id

Signature:

id?: string;

property ignoreJumpText

By default typing into non text input combo-box will jump to the closest index.

Setting this to false will ignore this behaviour

Signature:

ignoreJumpText?: boolean;

property includeHoveredIndexInSelection

When true will include the hovered index in the next selection (whether on blur) or active selection.

Signature:

includeHoveredIndexInSelection?: boolean;

property initialHighlightedGroupEndIndex

Signature:

initialHighlightedGroupEndIndex?: number;

property initialHighlightedGroupStartIndex

Signature:

initialHighlightedGroupStartIndex?: number;

property initialHighlightedIndexes

Signature:

initialHighlightedIndexes?: number[];

property initialHoveredIndex

Signature:

initialHoveredIndex?: number;

property initialInputValue

Signature:

initialInputValue?: string;

property initialIsOpen

Signature:

initialIsOpen?: boolean;

property initialJumpText

Signature:

initialJumpText?: string;

property initialSelectedItems

Signature:

initialSelectedItems?: Item[];

property inputId

Signature:

inputId?: string;

property items

The list ot items which are visible in menu.

This can be changed via filtering.

Signature:

items: Item[];

property itemsToString

Takes a list of items and transforms them into a string.

This defaults to a comma separated list of the values.

Signature:

itemsToString?: ItemsToString<Item>;

property itemToString

Signature:

itemToString?: ItemToString<Item>;

property labelId

Signature:

labelId?: string;

property menuId

Signature:

menuId?: string;

property multiple

Set to true to allow multiple items to be selected in the list. When not specified (or set to false) only one item can be selected (and only one at a time.

Signature:

multiple?: boolean;

property onHighlightedGroupEndIndexChange

Signature:

onHighlightedGroupEndIndexChange?: (highlightedGroupEndIndex: number | undefined, state: MultishiftState<Item>) => void;

property onHighlightedGroupStartIndexChange

Signature:

onHighlightedGroupStartIndexChange?: (highlightedGroupStartIndex: number, state: MultishiftState<Item>) => void;

property onHighlightedIndexesChange

Signature:

onHighlightedIndexesChange?: (highlightedIndexes: number[], state: MultishiftState<Item>) => void;

property onHoveredIndexChange

Signature:

onHoveredIndexChange?: (hoveredIndex: number, state: MultishiftState<Item>) => void;

property onInputValueChange

Signature:

onInputValueChange?: (inputValue: string, state: MultishiftState<Item>) => void;

property onIsOpenChange

Signature:

onIsOpenChange?: (isOpen: boolean, state: MultishiftState<Item>) => void;

property onJumpTextChange

Signature:

onJumpTextChange?: (jumpText: string, state: MultishiftState<Item>) => void;

property onOuterClick

Signature:

onOuterClick?: (state: MultishiftState<Item>) => void;

property onSelectedItemsChange

Called when the selected items change, either by the user selecting an item or the user clearing the selection. Called with the items that were selected or an empty array when removed

Signature:

onSelectedItemsChange?: (selectedItems: Item[], state: MultishiftState<Item>) => void;

property onStateChange

This function is called anytime the internal state changes. This can be useful if you're using multishift as a "controlled" component, where you manage some or all of the state (e.g. isOpen, selectedItems, highlightedIndexes, etc) and then pass it as props, rather than letting multishift control all its state itself.

The parameters both take the shape of internal state ({highlightedIndex: number, inputValue: string, isOpen: boolean, selectedItem: any}) but differ slightly.

Signature:

onStateChange?: (changes: MultishiftStateProps<Item>, state: MultishiftState<Item>) => void;

property stateReducer

This function will be called each time multishift sets its internal state (or calls the onStateChange handler for controlled props). It allows you to modify the state change that will take place which can give you fine grained control over how the component interacts with user updates without having to use controlled Props. It gives you the current state and the state that will be set, and you return the state that you want to set.

Signature:

stateReducer?: (changesAndState: MultishiftStateChangeset<Item>, action: MultishiftRootActions<Item>, props: MultishiftProps<Item>) => MultishiftState<Item>;

property toggleButtonId

Signature:

toggleButtonId?: string;

property type

The dropdown type affects how the dropdown should be set up.

### select

Use this to implement a selection drop down. With a toggle button and items. There is no autocomplete functionality and items typically don't change.

const items ['a', 'b', 'c'];
const { getToggleButtonProps, getMenuProps, getItemProps, getLabelProps } = useMultishift({ type: 'select', items });

return (
<div>
<label {...getLabelProps()}>Choose an element:</label>
<button {...getToggleButtonProps()}>{selectedItems[0] || 'Names'}</button>
<button onClick={() => clearSelection()}>Clear</button>
<ul {...getMenuProps()}>
{isOpen &&
items.map((option, index) => (
<li
style={{
userSelect:'none',
fontWeight: selectedItems.includes(option) ? 'bold' : 'normal',
...(itemHighlightedAtIndex(index) || hoveredIndex === index
? { backgroundColor: '#bde4ff' }
: {}),
}}
key={`${option}${index}`}
{...getItemProps({ item: option, index })}
>
{option}
</li>
))}
</ul>
</div>
)

### combobox

The combination of a select dropdown paired with an input for filtering the results.

The combobox usually will include both a toggle button and input box.

const items ['a', 'b', 'c'];
const {
getToggleButtonProps,
getMenuProps,
getItemProps,
getLabelProps,
getComboBoxProps,
getInputProps
} = useMultishift({ type: 'autocomplete', items });

return (
<div {...getComboBoxProps()}>
<label {...getLabelProps()}>Choose an element:</label>
<button {...getToggleButtonProps()}>{selectedItems[0] || 'Names'}</button>
<input {...getInputProps()}
<button onClick={() => clearSelection()}>Clear</button>
<ul {...getMenuProps()}>
{isOpen &&
items.map((item, index) => (
<li
key={`${item}${index}`}
{...getItemProps({ item: item, index })}
>
{item}
</li>
))}
</ul>
</div>
)

Signature:

type: DropdownType;

interface MultishiftReturn

Signature:

export interface MultishiftReturn<Item = any> extends MultishiftState<Item>, MultishiftPropGetters<Item>, MultishiftDispatchActions<Item>, MultishiftStateHelpers<Item>, MultishiftHelpers, MultishiftFocusHelpers 

Extends: MultishiftState<Item>, MultishiftPropGetters<Item>, MultishiftDispatchActions<Item>, MultishiftStateHelpers<Item>, MultishiftHelpers, MultishiftFocusHelpers

(Some inherited members may not be shown because they are not represented in the documentation.)

property addItem

Add one item to the selectedItems.

Signature:

addItem: (item: Item) => any[];

property addItems

Add multiple items to the selectedItems.

Signature:

addItems: (items: Item[]) => any[];

property dispatch

Manually dispatch an action into the state reducer.

Signature:

dispatch: Dispatch<MultishiftRootActions<Item>>;

property focusInput

Focus on the input element when defined.

Signature:

focusInput: () => void;

property focusMenu

Focus on the menu.

Signature:

focusMenu: () => void;

property focusMenuItem

Focus on a menu item by the provided index.

Signature:

focusMenuItem: (index: number) => void;

property focusToggleButton

Focus on the toggle button.

Signature:

focusToggleButton: () => void;

property getComboBoxProps

Get the augmented props that will be used in the wrapper element on autocomplete dropdowns.

Signature:

getComboBoxProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: GetComboBoxPropsOptions<Element, RefKey>) => GetComboBoxPropsReturn<Element, RefKey>;

Remarks:

Return the props to be applied to the root element that is rendered. This should always be used for autocomplete dropdowns but will throw an error if used within a select dropdown.

property getIgnoredElementProps

Adds a ref to an element which will prevent blurring from happening when the element is in focus.

Signature:

getIgnoredElementProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: IgnoredElementOptions<Element, RefKey>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

  • Allows for autofocusing the input / toggle button or items when [a specific one] when focused.

property getInputProps

Get the augmented props for the autocomplete input element.

Signature:

getInputProps: <Element extends HTMLInputElement = any, RefKey extends string = 'ref'>(options?: GetPropsWithRefOptions<Element, RefKey>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

This method should be applied to the input you render. It is recommended that you pass all props as an object to this method which will compose together any of the event handlers you need to apply to the input while preserving the ones that downshift needs to apply to make the input behave.

There are no required properties for this method.

Optional properties:

disabled: If this is set to true, then no event handlers will be returned from getInputProps and a disabled prop will be returned (effectively disabling the input).

property getItemProps

Get the augmented props for each item being rendered.

Signature:

getItemProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options: GetItemPropsOptions<Element, RefKey, Item>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

The props returned from calling this function should be applied to any menu items you render.

This is an impure function, so it should only be called when you will actually be applying the props to an item.

property getLabelProps

This method should be applied to the label you render. It will generate an id that will be used to label the toggle button and the menu.

Signature:

getLabelProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: IgnoredElementOptions<Element, RefKey>) => GetLabelPropsWithRefReturn<Element, RefKey>;

Remarks:

There are no required properties for this method.

> Note: For accessibility purposes, calling this method is highly recommended.

property getMenuProps

Get the augmented props for your menu dropdown container element.

Signature:

getMenuProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: GetPropsWithRefOptions<Element, RefKey>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

This method should be applied to the element which contains your list of items. Typically, this will be a <div> or a <ul> that surrounds a map expression. This handles the proper ARIA roles and attributes.

refKey: if you're rendering a composite component, that component will need to accept a prop which it forwards to the root DOM element. Commonly, folks call this innerRef. So you'd call: getMenuProps({refKey: 'innerRef'}) and your composite component would forward like: <ul ref={props.innerRef} />. However, if you are just rendering a primitive component like <div>, there is no need to specify this property. Please keep in mind that menus, for accessiblity purposes, should always be rendered, regardless of whether you hide it or not. Otherwise, getMenuProps may throw error if you unmount and remount the menu.

aria-label: By default the menu will add an aria-labelledby that refers to the <label> rendered with getLabelProps. However, if you provide aria-label to give a more specific label that describes the options available, then aria-labelledby will not be provided and screen readers can use your aria-label instead. In some cases, you might want to completely bypass the refKey check. Then you can provide the object {suppressRefError : true} as the second argument to getMenuProps. Please use it with extreme care and only if you are absolutely sure that the ref is correctly forwarded otherwise Downshift will unexpectedly fail.

const {getMenuProps} = useMultishift({items})
const ui = (
<ul {...getMenuProps()}>
{!isOpen
? null
: items.map((item, index) => (
<li {...getItemProps({item, index, key: item.id})}>{item.name}</li>
))}
</ul>
)

> Note that for accessibility reasons it's best if you always render this > element whether or not downshift is in an isOpen state.

property getRemoveButtonProps

Gets the props to attach to a button that removes a selected item.

Signature:

getRemoveButtonProps: <Element extends HTMLElement = any>(options: GetRemoveButtonOptions<Element, Item>) => GetRemoveButtonReturn<Element>;

property getToggleButtonProps

Get the augmented props for the toggle button which typically opens and closes the menu.

Signature:

getToggleButtonProps: <Element extends HTMLElement = any, RefKey extends string = 'ref'>(options?: GetPropsWithRefOptions<Element, RefKey>) => GetPropsWithRefReturn<Element, RefKey>;

Remarks:

Returns the props you should apply to any menu toggle button element you render.

property highlightedGroupEndIndex

Marks the position as the end point for a new highlighted group.

Signature:

highlightedGroupEndIndex: number | undefined;

property highlightedGroupStartIndex

Marks the position as the starting point for a new highlighted group.

Signature:

highlightedGroupStartIndex: number;

property highlightedIndexes

Each index represents a position that is highlighted. This is to allow the selection of multiple items in one sweep.

Examples are - Ctrl / Cmd click - toggle one position / or start a new highlight group - Shift click - add start or complete a new highlighted group - Click and drag - drag over multiple items to select each one - ArrowKey shift - Select multiple highlighted items

Signature:

highlightedIndexes: number[];

property hoveredIndex

Marks the index of the currently hovered item.

Signature:

hoveredIndex: number;

property indexIsHovered

Return true when the provided item index is hovered.

Signature:

indexIsHovered: (index: number) => boolean;

property indexIsSelected

Return true when the provided item index is selected.

Signature:

indexIsSelected: (index: number) => boolean;

property indexOfItem

Return the index of the provided item within the list of items.

Signature:

indexOfItem: (item: Item) => number;

Remarks:

-1 when not found

property inputValue

This tracks the input value when filtering the items to insert.

Signature:

inputValue: string;

property isOpen

Determines whether or not the menu items should be displayed.

Signature:

isOpen: boolean;

property itemHighlightedAtIndex

Check if the item at the given index is highlighted.

Signature:

itemHighlightedAtIndex: (index: number) => boolean;

Remarks:

The highlight includes the current highlight (caused by hovers and the arrow keys> as well as multi selection highlighting when the shift key is pressed.

property itemIsHovered

Return true when the provided item is hovered.

Signature:

itemIsHovered: (item: Item) => boolean;

property itemIsSelected

Return true when the provided item is selected.

Signature:

itemIsSelected: (item: Item) => boolean;

property jumpText

This tracks the text typed when no input is available for filtering.

It allows the implementation of quick jump to item functionality.

Signature:

jumpText: string;

property mostRecentHighlightedIndex

The most recently highlighted index which can be used when making a multiple selection.

When none is found it will return -1

Signature:

mostRecentHighlightedIndex: number;

property removeItem

Remove one item from the selectedItems

Signature:

removeItem: (item: Item) => Item[];

property removeItems

Remove items from the selectedItems.

Signature:

removeItems: (items: Item[]) => Item[];

property selectedItems

Contains all the selected items.

When multiple selection is enabled this can contain more than one item.

Signature:

selectedItems: Item[];

property toggleItem

Signature:

toggleItem: (item: Item) => Item[];

property toggleItems

Toggle item selection

Signature:

toggleItems: (items: Item[]) => Item[];

interface MultishiftState

Signature:

export interface MultishiftState<Item = any> 

property highlightedGroupEndIndex

Marks the position as the end point for a new highlighted group.

Signature:

highlightedGroupEndIndex: number | undefined;

property highlightedGroupStartIndex

Marks the position as the starting point for a new highlighted group.

Signature:

highlightedGroupStartIndex: number;

property highlightedIndexes

Each index represents a position that is highlighted. This is to allow the selection of multiple items in one sweep.

Examples are - Ctrl / Cmd click - toggle one position / or start a new highlight group - Shift click - add start or complete a new highlighted group - Click and drag - drag over multiple items to select each one - ArrowKey shift - Select multiple highlighted items

Signature:

highlightedIndexes: number[];

property hoveredIndex

Marks the index of the currently hovered item.

Signature:

hoveredIndex: number;

property inputValue

This tracks the input value when filtering the items to insert.

Signature:

inputValue: string;

property isOpen

Determines whether or not the menu items should be displayed.

Signature:

isOpen: boolean;

property jumpText

This tracks the text typed when no input is available for filtering.

It allows the implementation of quick jump to item functionality.

Signature:

jumpText: string;

property selectedItems

Contains all the selected items.

When multiple selection is enabled this can contain more than one item.

Signature:

selectedItems: Item[];

interface MultishiftStateChangeset

Signature:

export interface MultishiftStateChangeset<Item = any> 

property changes

The changes accumulated so far.

Signature:

changes: MultishiftStateProps<Item>;

property prevState

The previous state object.

Signature:

prevState: MultishiftState<Item>;

property state

The current state object

Signature:

state: MultishiftState<Item>;

interface MultishiftStateHelpers

This provides utility methods which make updating the state for _uncontrolled_ components a bit simpler.

Signature:

export interface MultishiftStateHelpers<Item = any> 

property addItem

Add one item to the selectedItems.

Signature:

addItem: (item: Item) => any[];

property addItems

Add multiple items to the selectedItems.

Signature:

addItems: (items: Item[]) => any[];

property removeItem

Remove one item from the selectedItems

Signature:

removeItem: (item: Item) => Item[];

property removeItems

Remove items from the selectedItems.

Signature:

removeItems: (items: Item[]) => Item[];

property toggleItem

Signature:

toggleItem: (item: Item) => Item[];

property toggleItems

Toggle item selection

Signature:

toggleItems: (items: Item[]) => Item[];

interface RefProps

Signature:

export interface RefProps<RefKey extends string = 'ref'> 

property refKey

A custom ref key which allows a reference to be obtained from non standard components.

Signature:

refKey?: RefKey;

interface SpecialKeyDownPayload

Signature:

export interface SpecialKeyDownPayload 

property disabled

The indexes of disabled items.

Signature:

disabled: number[];

property event

This is provided so that the state reducer has access to the event. It should not be stored.

Signature:

event: KeyboardEvent<any>;

property key

Signature:

key: SpecialKey;

property modifiers

Signature:

modifiers: Modifier[];

type ActionCreator

An *action creator* is, quite simply, a function that creates an action. Do not confuse the two terms—again, an action is a payload of information, and an action creator is a factory that creates an action.

Calling an action creator only produces an action, but does not dispatch it. You need to call the store's dispatch function to actually cause the mutation. Sometimes we say *bound action creators* to mean functions that call an action creator and immediately dispatch its result to a specific store instance.

If an action creator needs to read the current state, perform an API call, or cause a side effect, like a routing transition, it should return an async action instead of an action.

Signature:

export declare type ActionCreator<A> = (...args: any[]) => A;

type ActionCreatorMapToDispatch

Signature:

export declare type ActionCreatorMapToDispatch<CreatorMap extends ActionCreatorsMapObject> = {
[P in keyof CreatorMap]: (...args: Parameters<CreatorMap[P]>) => void;
};

References: ActionCreatorsMapObject

type AllMultishiftActions

Signature:

export declare type AllMultishiftActions<Item = any> = Multishift.Actions<Item> & Multishift.CoreActions<Item>;

type AllMultishiftDispatchActions

Signature:

export declare type AllMultishiftDispatchActions<Item = any> = {
[P in keyof AllMultishiftActions<Item>]: (...args: Parameters<AllMultishiftActions<Item>[P]>) => void;
};

References: AllMultishiftActions

type CreateMultishiftAction

Signature:

export declare type CreateMultishiftAction<Type extends string, Payload = any, Args extends any[] = [Payload]> = (...args: Args) => ActionWithPayload<Type, Payload>;

References: ActionWithPayload

type Direction

Signature:

export declare type Direction = 'horizontal' | 'vertical';

type DropdownType

Signature:

export declare type DropdownType = Value<typeof Type>;

References: Value, Type

type GetA11yStatusMessage

Signature:

export declare type GetA11yStatusMessage<Item = any> = (options: A11yStatusMessageProps<Item>) => string;

References: A11yStatusMessageProps

type GetComboBoxPropsReturn

Signature:

export declare type GetComboBoxPropsReturn<Element extends HTMLElement = any, RefKey extends string = 'ref'> = DetailedHTMLProps<HTMLAttributes<Element>, Element> & {
[P in RefKey]: Ref<any>;
} & {
role: string;
'aria-expanded': boolean;
'aria-haspopup': boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
'aria-owns': string | undefined;
'aria-labelledby': string;
};

type GetItemId

Signature:

export declare type GetItemId<Item = any> = (items: Item) => any;

type GetLabelPropsWithRefReturn

Signature:

export declare type GetLabelPropsWithRefReturn<Element extends HTMLElement = any, RefKey extends string = 'ref'> = {
[P in Exclude<RefKey, 'key'>]: Ref<any>;
} & DetailedHTMLProps<HTMLAttributes<Element>, Element> & {
htmlFor?: string;
};

type GetPropsWithRefReturn

Signature:

export declare type GetPropsWithRefReturn<Element extends HTMLElement = any, RefKey extends string = 'ref'> = {
[P in Exclude<RefKey, 'key'>]: Ref<any>;
} & DetailedHTMLProps<HTMLAttributes<Element>, Element>;

type ItemsToString

Signature:

export declare type ItemsToString<Item = any> = (items: Item[], itemToString?: (item: Item) => string) => string;

type ItemToString

Signature:

export declare type ItemToString<Item = any> = (item: Item) => string;

type Modifier

Modifiers that are used to determine the behaviour of the click or key down action.

Signature:

export declare type Modifier = 'shiftKey' | 'altKey' | 'metaKey' | 'ctrlKey';

type MultishiftDispatchActions

Signature:

export declare type MultishiftDispatchActions<Item = any> = {
[P in keyof Multishift.CoreActions<Item>]: (...args: Parameters<Multishift.CoreActions<Item>[P]>) => void;
};

type MultishiftRootActions

Signature:

export declare type MultishiftRootActions<Item = any> = ActionType<AllMultishiftActions<Item>>;

References: AllMultishiftActions

type MultishiftStateProps

Signature:

export declare type MultishiftStateProps<Item = any> = Partial<MultishiftState<Item>>;

References: MultishiftState

type SpecialKey

Signature:

export declare type SpecialKey = typeof SPECIAL_KEYS[number];

References: SPECIAL_KEYS