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 | |
splitButtonOptions | SplitButtonOptions | Object used to configure a split button menu toggle | |
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. | |
appendTo | HTMLElement | (() => HTMLElement) | 'inline' | The container to append the menu to. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: appendTo={() => document.body} appendTo={document.getElementById('target')} | |
aria-label | string | An accessible label for the search input. | |
attributes | string[] | SearchInputSearchAttribute[] | Array of attribute values used for dynamically generated advanced search. | |
className | string | Additional classes added to the search input. | |
expandableInput | SearchInputExpandable | Object that makes the search input expandable/collapsible. | |
formAdditionalItems | React.ReactNode | ||
hasWordsAttrLabel | React.ReactNode | Attribute label for strings unassociated with one of the provided listed attributes. | |
hint | string | A suggestion for autocompleting. | |
isAdvancedSearchOpen | boolean | A flag for controlling the open state of a custom advanced search implementation. | |
isDisabled | boolean | Flag indicating if search input is disabled. | |
isNextNavigationButtonDisabled | boolean | Flag indicating if the next navigation button is disabled. | |
isPreviousNavigationButtonDisabled | boolean | Flag indicating if the previous navigation button is disabled. | |
name | string | Name attribue for the search input | |
nextNavigationButtonAriaLabel | string | Accessible label for the button to navigate to next result. | |
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. | |
onNextClick | (event: React.SyntheticEvent<HTMLButtonElement>) => void | A callback for when the user clicks to navigate to next result. | |
onPreviousClick | (event: React.SyntheticEvent<HTMLButtonElement>) => void | A callback for when the user clicks to navigate to previous result. | |
onSearch | ( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => void | A callback for when the search button is clicked. | |
onToggleAdvancedSearch | (event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => void | A callback for when the open advanced search button is clicked. | |
openMenuButtonAriaLabel | string | Accessible label for the button which opens the advanced search form menu. | |
placeholder | string | Placeholder text of the search input. | |
previousNavigationButtonAriaLabel | string | Accessible label for the button to navigate to previous result. | |
resetButtonLabel | string | Label for the button which resets the advanced search form and clears the search input. | |
resultsCount | number | string | The number of search results returned. Either a total number of results, or a string representing the current result over the total number of results. i.e. "1 / 5". | |
submitSearchButtonLabel | string | Label for the button which calls the onSearch event handler. | |
value | string | Value of the search input. | |
zIndex | number | z-index of the advanced search form when appendTo is not inline. |
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. | |
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. | |
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. | |
onOpenChangeKeysBeta | 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. | |
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 | |
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. | |
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 |
View source on GitHub