#SelectMenu

The <SelectMenu> component is made up of two elements: a disclosure (triggerable button), and a popover list of options.

#Import

import { SelectMenu } from 'bumbag'

#Usage

#Fields

You can also use the <SelectMenuField> component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.

It accepts a combination of SelectMenu props and FieldWrapper props.

#Disabled

#Disabled options

#Multi-select

#With tags

#Loading indicator

#Option icons

#Fetching data (async)

#Pagination

#Deferred

#Custom disclosure

#Custom option component

#Custom empty text

#Custom empty component

#Accessibility

#Patterns

  • SelectMenu has a role of combobox.
  • The SelectMenu trigger button has a role of button.
  • The trigger button has aria-expanded set to true/false depending on the visibility of the popover listbox.
  • The trigger button has aria-haspopup set to listbox.
  • The trigger button has it's aria-controls value set to the ID of the popover listbox.
  • The SelectMenu popover has a role of listbox.
  • Pressing Enter or Space on the trigger button will trigger the popover listbox.
  • If the menu is open, pressing Esc will close the listbox.
  • If the menu is open, clicking outside the menu bounds will close the listbox.
  • If the menu is open, pressing or will navigate the menu items.

#Props

#SelectMenu Props

cacheKey string

The key to cache the loadOptions results against.

defer boolean

Whether or not the invocation of loadOptions should be deferred until it the Autosuggest is opened.

disabled boolean

Indicates if the Autosuggest is disabled.

disableClear boolean

Indicates if the clear button should be disabled.

hasSearch boolean

Indicates if the select menu has a search component.

hasTags boolean

Indicates if the select menu should have tags of the selected options.

isLoading boolean

Indicates if the select menu is loading.

isMultiSelect boolean

Indicates if multiple options should be selected.

limit number

Applies a limit to the number of options that appear in the list.

loadOptions

(options: { page?: number; searchText?: string; variables?: any; }) => Promise<{ options: Options; }>

Supply an async function to loadOptions to load options from an external data source.

loadVariables { [key: string]: any; }

Supply variables (i.e. query parameters) to the loadOptions function.

options Option[]

Options to show in the list. If loadOptions is supplied, then you don't need to supply this.

onChange Required

(newOptions: ""
  | Option
  | Option[], option: ""
  | Option) => void

Function to invoke when the option has been changed.

pagination boolean

Indicates if the list should be paginated. If true, then pagination will be applied to loadOptions.

popoverHeight string

Sets the height of the popover list.

placeholder string

Sets the placeholder of the search input.

state string

Sets the visual state of the Autosuggest.

value { key?: ReactText; label?: string; value?: any; } Required

Sets the value of the Autosuggest. Must be in the shape of an option (i.e. { key: 1, label: 'Jake', value: 'legend' }).

errorText string

emptyText string

loadingText string

loadingMoreText string

renderDisclosure any

renderError any

renderEmpty any

renderLoading any

renderLoadingMore any

renderOption any

buttonProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 798 more ...;
  spinnerProps?: SpinnerProps;
}

itemProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 808 more ...;
  isTabbable?: boolean;
}

popoverProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 809 more ...;
  isTabbable?: boolean;
}

searchInputProps

{
  children?: string | number | boolean | {
     | (string & {
      ) | (number & {
        ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
        ......

tagProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 779 more ...;
  size?: Flexible<...>;
}

dropdownMenuInitialState

{
  baseId?: string;
  unstable_virtual?: boolean;
  orientation?: "horizontal" | "vertical";
  currentId?: string;
  rtl?: boolean;
  loop?: boolean | "horizontal" | "vertical";
  wrap?: boolean | "horizontal" | "vertical";
  ... 10 more ...;
  unstable_preventOverflow?: boolean;
}
Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#SelectMenuField Props

addonBefore

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Addon component to the input (before). Similar to the addon components in Input.

addonAfter

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Addon component to the input (after). Similar to the addon components in Input.

selectMenuProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 807 more ...;
  dropdownMenuInitialState?: Partial<...>;
}

Additional props for the SelectMenu component

orientation "horizontal" | "vertical"

If addonBefore or addonAfter exists, then the addons will render vertically.

Inherits SelectMenu props

cacheKey string

The key to cache the loadOptions results against.

defer boolean

Whether or not the invocation of loadOptions should be deferred until it the Autosuggest is opened.

disabled boolean

Indicates if the Autosuggest is disabled.

disableClear boolean

Indicates if the clear button should be disabled.

hasSearch boolean

Indicates if the select menu has a search component.

hasTags boolean

Indicates if the select menu should have tags of the selected options.

isLoading boolean

Indicates if the select menu is loading.

isMultiSelect boolean

Indicates if multiple options should be selected.

limit number

Applies a limit to the number of options that appear in the list.

loadOptions

(options: { page?: number; searchText?: string; variables?: any; }) => Promise<{ options: Options; }>

Supply an async function to loadOptions to load options from an external data source.

loadVariables { [key: string]: any; }

Supply variables (i.e. query parameters) to the loadOptions function.

options Option[]

Options to show in the list. If loadOptions is supplied, then you don't need to supply this.

onChange Required

(newOptions: ""
  | Option
  | Option[], option: ""
  | Option) => void

Function to invoke when the option has been changed.

pagination boolean

Indicates if the list should be paginated. If true, then pagination will be applied to loadOptions.

popoverHeight string

Sets the height of the popover list.

placeholder string

Sets the placeholder of the search input.

state string

Sets the visual state of the Autosuggest.

value { key?: ReactText; label?: string; value?: any; } Required

Sets the value of the Autosuggest. Must be in the shape of an option (i.e. { key: 1, label: 'Jake', value: 'legend' }).

errorText string

emptyText string

loadingText string

loadingMoreText string

renderDisclosure any

renderError any

renderEmpty any

renderLoading any

renderLoadingMore any

renderOption any

buttonProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 798 more ...;
  spinnerProps?: SpinnerProps;
}

itemProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 808 more ...;
  isTabbable?: boolean;
}

popoverProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 809 more ...;
  isTabbable?: boolean;
}

searchInputProps

{
  children?: string | number | boolean | {
     | (string & {
      ) | (number & {
        ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
        ......

tagProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 779 more ...;
  size?: Flexible<...>;
}

dropdownMenuInitialState

{
  baseId?: string;
  unstable_virtual?: boolean;
  orientation?: "horizontal" | "vertical";
  currentId?: string;
  rtl?: boolean;
  loop?: boolean | "horizontal" | "vertical";
  wrap?: boolean | "horizontal" | "vertical";
  ... 10 more ...;
  unstable_preventOverflow?: boolean;
}
Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Inherits FieldWrapper props

description

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the description text of the field wrapper.

hint

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the bottom hint text of the field wrapper.

isOptional boolean

Sets the optional flag (and displays optional text) on the field wrapper.

isRequired boolean

Sets the required flag (and a required astrix) on the field wrapper.

label

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the label on the field wrapper.

labelType "label" | "legend"

Sets the label type on the field wrapper.

tooltip

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

tooltipTriggerComponent

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip trigger component.

validationText string

Sets the bottom validation text of the field wrapper.

#Theming

SelectMenu.styles.base
SelectMenu.Button.styles.base
SelectMenu.ButtonText.styles.base
SelectMenu.ButtonIconsWrapper.styles.base
SelectMenu.ButtonIcon.styles.base
SelectMenu.Popover.styles.base
SelectMenu.Item.styles.base
SelectMenu.ItemText.styles.base
SelectMenu.SearchInputWrapper.styles.base
SelectMenu.SearchInput.styles.base
SelectMenu.StaticItem.styles.base
Copyright © 2020 Jake Moxey