| children | React.ReactNode | null | content rendered inside the Context Selector |
| className | string | '' | Classes applied to root element of Context Selector |
| disableFocusTrap | boolean | false | Flag to disable focus trap |
| footer | React.ReactNode | null | Footer of the context selector |
| id | string | | Id of the context selector |
| isFlipEnabled | boolean | true | Flag for indicating that the context selector menu should automatically flip vertically when
it reaches the boundary. This prop can only be used when the context selector component is not
appended inline, e.g. `menuAppendTo="parent"` |
| isFullHeight | boolean | | Flag indicating that the context selector should expand to full height |
| isOpen | boolean | false | Flag to indicate if Context Selector is opened |
| isPlain | boolean | false | Flag to indicate the toggle has no border or background |
| isText | boolean | false | Flag to indicate if toggle is textual toggle |
| menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | 'parent' | 'inline' | The container to append the menu to. Defaults to 'inline'.
If your menu is being cut off you can append it to an element higher up the DOM tree.
Some examples:
menuAppendTo="parent"
menuAppendTo={() => document.body}
menuAppendTo={document.getElementById('target')} |
| menuAriaLabel | string | | Adds an accessible label to the context selector menu. |
| onSearchButtonClick | (event?: React.SyntheticEvent<HTMLButtonElement>) => void | () => undefined as any | Function callback for when Search Button is clicked |
| onSearchInputChange | (event: React.FormEvent<HTMLInputElement>, value: string) => void | () => undefined as any | Function callback called when user changes the Search Input |
| onSelect | (event: any, value: React.ReactNode) => void | () => undefined as any | Function callback called when user selects item |
| onToggle | (event: any, value: boolean) => void | () => undefined as any | Function callback called when user clicks toggle button |
| ouiaId | number | string | | Value to overwrite the randomly generated data-ouia-component-id. |
| ouiaSafe | boolean | true | 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. |
| screenReaderLabel | string | '' | Labels the Context Selector for Screen Readers |
| searchButtonAriaLabel | string | 'Search menu items' | Aria-label for the Context Selector Search Button |
| searchInputPlaceholder | string | 'Search' | Search Input placeholder |
| searchInputValue | string | '' | Value in the Search field |
| toggleText | React.ReactNode | '' | Component or string that will be used in the context selector.
This prop is placed in a button, and cannot contain any interactive elements |
| zIndex | number | 9999 | z-index of the context selector when menuAppendTo is not inline. |
