diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a6444f46f6..46982f048f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Converted `EuiStepNumber` to TS ([#1893](https://github.com/elastic/eui/pull/1893)) - Converted `EuiFormControlLayoutClearButton` to TS ([#1922](https://github.com/elastic/eui/pull/1922)) - Added `data-test-subj` property to `EuiDraggable` and `EuiDroppable` ([#1943](https://github.com/elastic/eui/pull/1943)) +- Add type definitions to `EuiSuperSelect` ([##1752](https://github.com/elastic/eui/issues/1752)) ## [`11.1.0`](https://github.com/elastic/eui/tree/v11.1.0) diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts index 3463ca41dd3..b30a4131a8a 100644 --- a/src/components/form/index.d.ts +++ b/src/components/form/index.d.ts @@ -10,6 +10,7 @@ import { CommonProps } from '../common'; /// /// /// +/// /// /// diff --git a/src/components/form/super_select/index.d.ts b/src/components/form/super_select/index.d.ts new file mode 100644 index 00000000000..cf7ecbfd93b --- /dev/null +++ b/src/components/form/super_select/index.d.ts @@ -0,0 +1,74 @@ +import { CommonProps } from '../../common'; + +import {FunctionComponent, ReactNode, ButtonHTMLAttributes} from 'react'; + +declare module '@elastic/eui' { + /** + * @see './super_select.js' + */ + + export type EuiSuperSelectProps = CommonProps & ButtonHTMLAttributes & { + /** + * Pass an array of options that must at least include: + * `value`: storing unique value of item, + * `inputDisplay`: what shows inside the form input when selected + * `dropdownDisplay` (optional): what shows for the item in the dropdown + */ + options: Array<{ + value: string; + inputDisplay?: ReactNode; + dropdownDisplay?: ReactNode; + }>; + + valueOfSelected?: string; + + /** + * Classes for the context menu item + */ + itemClassName?: string; + + /** + * You must pass an `onChange` function to handle the update of the value + */ + onChange?: (value: string) => void; + + /** + * Change to `true` if you want horizontal lines between options. + * This is best used when options are multi-line. + */ + hasDividers?: boolean; + + /** + * Change `EuiContextMenuItem` layout position of icon + */ + itemLayoutAlign?: string; + + /** + * Make it wide. Default: false + */ + fullWidth?: boolean; + + /** + * Provides invalid styling. Default: false + */ + isInvalid?: boolean; + + /** + * Make it short. Default: false + */ + compressed?: boolean; + + /** + * Applied to the outermost wrapper (popover) + */ + popoverClassName?: string; + + /** + * Controls whether the options are shown. Default: false + */ + isOpen?: boolean; + + }; + + export const EuiSuperSelect: FunctionComponent; +}