As the context selector component is now deprecated, a context selector may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new dropdown component that is built off of menu.
Props
MenuToggle
| Name | Type | Default | Description |
|---|---|---|---|
| badge | BadgeProps | React.ReactNode | Optional badge rendered inside the toggle, after the children content | |
| children | React.ReactNode | Content rendered inside the toggle | |
| className | string | Additional classes added to the toggle | |
| icon | React.ReactNode | Optional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component. | |
| isDisabled | boolean | Flag indicating the toggle is disabled | |
| isExpanded | boolean | Flag indicating the toggle has expanded styling | |
| isFullHeight | boolean | Flag indicating the toggle is full height | |
| isFullWidth | boolean | Flag indicating the toggle takes up the full width of its parent | |
| isPlaceholder | boolean | Flag indicating the toggle contains placeholder text | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| size | 'default' | 'sm' | Adds styling which affects the size of the menu toggle | |
| splitButtonItems | React.ReactNode[] | Elements to display before the toggle button. When included, renders the menu toggle as a split button. | |
| status | 'success' | 'warning' | 'danger' | Status styles of the menu toggle | |
| statusIcon | React.ReactNode | Overrides the status icon | |
| variant | 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead' | Variant styles of the menu toggle |
MenuFooter
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the footer | |
| className | string | '' | Additional classes added to the footer |
MenuSearch
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Items within search |
MenuSearchInput
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Items within input |
Divider
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the divider | |
| component | 'hr' | 'li' | 'div' | DividerVariant.hr | The component type to use |
| inset | { default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; } | Insets at various breakpoints. | |
| orientation | { default?: 'vertical' | 'horizontal'; sm?: 'vertical' | 'horizontal'; md?: 'vertical' | 'horizontal'; lg?: 'vertical' | 'horizontal'; xl?: 'vertical' | 'horizontal'; '2xl'?: 'vertical' | 'horizontal'; } | Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout. |
InputGroup
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the input group. | |
| className | string | Additional classes added to the input group. |
SearchInput
| Name | Type | Default | Description |
|---|---|---|---|
| advancedSearchDelimiter | string | Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props. | |
| attributes | string[] | SearchInputSearchAttribute[] | [] | Array of attribute values used for dynamically generated advanced search. |
| className | string | Additional classes added to the advanced search menu. | |
| formAdditionalItems | React.ReactNode | ||
| getAttrValueMap | () => { [key: string]: string } | Function which builds an attribute-value map by parsing the value in the search input. | |
| hasWordsAttrLabel | React.ReactNode | 'Has words' | Attribute label for strings unassociated with one of the provided listed attributes. |
| isSearchMenuOpen | boolean | Flag for toggling the open/close state of the advanced search menu. | |
| onChange | (event: React.FormEvent<HTMLInputElement>, value: string) => void | A callback for when the input value changes. | |
| onClear | (event: React.SyntheticEvent<HTMLButtonElement>) => void | A callback for when the user clicks the clear button. | |
| onSearch | ( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => void | A callback for when the search button is clicked. | |
| onToggleAdvancedMenu | (e: React.SyntheticEvent<HTMLButtonElement>) => void | A callback for when the open advanced search button is clicked. | |
| parentInputRef | React.RefObject<any> | Ref of the input element within the search input. | |
| parentRef | React.RefObject<any> | Ref of the div wrapping the whole search input. | |
| resetButtonLabel | string | 'Reset' | Label for the button which resets the advanced search form and clears the search input. |
| submitSearchButtonLabel | string | 'Search' | Label for the button which calls the onSearch event handler. |
| value | string | '' | Value of the search input. |
Dropdown
| Name | Type | Default | Description |
|---|---|---|---|
| togglerequired | DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode) | Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property. | |
| children | React.ReactNode | Anything which can be rendered in a dropdown. | |
| className | string | Classes applied to root element of dropdown. | |
| focusTimeoutDelay | number | Time in ms to wait before firing the toggles' focus event. Defaults to 0 | |
| isOpen | boolean | Flag to indicate if menu is opened. | |
| isPlain | boolean | Indicates if the menu should be without the outer box-shadow. | |
| isScrollable | boolean | Indicates if the menu should be scrollable. | |
| maxMenuHeight | string | Maximum height of dropdown menu | |
| menuHeight | string | Height of the dropdown menu | |
| onOpenChange | (isOpen: boolean) => void | Callback to allow the dropdown component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. | |
| onOpenChangeKeys | string[] | Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. | |
| onSelect | (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void | Function callback called when user selects item. | |
| onToggleKeydown | (event: KeyboardEvent) => void | Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| popperProps | DropdownPopperProps | Additional properties to pass to the Popper | |
| shouldFocusFirstItemOnOpen Beta | boolean | Flag indicating the first menu item should be focused after opening the dropdown. | |
| shouldFocusToggleOnSelect | boolean | Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. | |
| shouldPreventScrollOnItemFocus | boolean | Flag indicating if scroll on focus of the first menu item should occur. | |
| zIndex | number | z-index of the dropdown menu |
DropdownGroup
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything which can be rendered in a dropdown group. | |
| className | string | Classes applied to root element of dropdown group | |
| label | string | Label of the dropdown group | |
| labelHeadingLevel | No type info | 'h1' |
DropdownList
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything which can be rendered in a dropdown list | |
| className | string | Classes applied to root element of dropdown list |
DropdownItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Anything which can be rendered in a dropdown item | |
| className | string | Classes applied to root element of dropdown item | |
| description | React.ReactNode | Description of the dropdown item | |
| isAriaDisabled | boolean | Render item as aria-disabled option | |
| isDisabled | boolean | Render item as disabled option | |
| onClick | (event?: any) => void | Callback for item click | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| tooltipProps | TooltipProps | Props for adding a tooltip to a menu item | |
| value | any | Identifies the component in the dropdown onSelect callback |