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 type ActionCreator<A> = (...args: any[]) => A;

type ActionCreatorMapToDispatch​

Signature:

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

References: ActionCreatorsMapObject

type AllMultishiftActions​

Signature:

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

type AllMultishiftDispatchActions​

Signature:

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

References: AllMultishiftActions

type CreateMultishiftAction​

Signature:

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

References: ActionWithPayload

type Direction​

Signature:

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

type DropdownType​

Signature:

export type DropdownType = Value<typeof Type>;

References: Value, Type

type GetA11yStatusMessage​

Signature:

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

References: A11yStatusMessageProps

type GetComboBoxPropsReturn​

Signature:

export 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 type GetItemId<Item = any> = (items: Item) => any;

type GetLabelPropsWithRefReturn​

Signature:

export 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 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 type ItemsToString<Item = any> = (items: Item[], itemToString?: (item: Item) => string) => string;

type ItemToString​

Signature:

export 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 type Modifier = 'shiftKey' | 'altKey' | 'metaKey' | 'ctrlKey';

type MultishiftDispatchActions​

Signature:

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

type MultishiftRootActions​

Signature:

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

References: AllMultishiftActions

type MultishiftStateProps​

Signature:

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

References: MultishiftState

type SpecialKey​

Signature:

export type SpecialKey = (typeof SPECIAL_KEYS)[number];

References: SPECIAL_KEYS