Select: Expose menuPortalTarget on SelectBase (#37456)

* Select: Expose Select props for greater flexibility

* Select: only expose menuPortalTarget

* Select: Add deprecation notice for menuPortalTarget prop

* Select: Add deprecation warning to component
This commit is contained in:
Ashley Harrison 2021-08-03 10:55:09 +01:00 committed by GitHub
parent e530d66275
commit 9934c883cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 1 deletions

View File

@ -20,6 +20,7 @@ import { useTheme2 } from '../../themes';
import { getSelectStyles } from './getSelectStyles';
import { cleanValue, findSelectedValue } from './utils';
import { SelectBaseProps, SelectValue } from './types';
import { deprecationWarning } from '@grafana/data';
interface ExtraValuesIndicatorProps {
maxVisibleValues?: number | undefined;
@ -116,6 +117,7 @@ export function SelectBase<T>({
minMenuHeight,
maxVisibleValues,
menuPlacement = 'auto',
menuPortalTarget,
menuPosition,
noOptionsMessage = 'No options found',
onBlur,
@ -136,6 +138,11 @@ export function SelectBase<T>({
width,
isValidNewOption,
}: SelectBaseProps<T>) {
if (menuPortalTarget !== undefined) {
deprecationWarning('SelectBase', 'menuPortalTarget');
} else {
menuPortalTarget = document.body;
}
const theme = useTheme2();
const styles = getSelectStyles(theme);
const onChangeWithEmpty = useCallback(
@ -199,7 +206,7 @@ export function SelectBase<T>({
maxVisibleValues,
menuIsOpen: isOpen,
menuPlacement,
menuPortalTarget: document.body,
menuPortalTarget,
menuPosition,
menuShouldBlockScroll: true,
menuShouldScrollIntoView: false,

View File

@ -41,6 +41,12 @@ export interface SelectCommonProps<T> {
minMenuHeight?: number;
maxVisibleValues?: number;
menuPlacement?: 'auto' | 'bottom' | 'top';
/**
* @deprecated Setting `menuPortalTarget` to null will revert to previous `Select` behaviour.
* This is provided as an escape hatch for cases where portalling is a breaking change (e.g. `Select` wrapped in `ClickOutsideWrapper`).
* It's recommended to achieve the same behaviour using `onCloseMenu`, as this will be removed at some point.
*/
menuPortalTarget?: HTMLElement | null;
menuPosition?: 'fixed' | 'absolute';
/** The message to display when no options could be found */
noOptionsMessage?: string;