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

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -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,

packages/grafana-ui/src/components/Select/types.ts

@@ -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;