| 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 | false | 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')} |
| onSearchButtonClick | (event?: React.SyntheticEvent<HTMLButtonElement>) => void | () => undefined as any | Function callback for when Search Button is clicked |
| onSearchInputChange | (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 |
| ouiaSafe | No type info | true | |
| 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 |
