diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index 6b8566b7ed5..c496ae92850 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -9,10 +9,9 @@ import { ApplicationLauncherGroup } from './ApplicationLauncherGroup'; import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator'; import { ApplicationLauncherItem } from './ApplicationLauncherItem'; import { ApplicationLauncherContext } from './ApplicationLauncherContext'; -import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper'; import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites'; -export interface ApplicationLauncherProps extends ToggleMenuBaseProps, React.HTMLProps { +export interface ApplicationLauncherProps extends React.HTMLProps { /** Additional element css classes */ className?: string; /** Display menu above or below dropdown toggle */ @@ -35,6 +34,14 @@ export interface ApplicationLauncherProps extends ToggleMenuBaseProps, React.HTM isGrouped?: boolean; /** Toggle Icon, optional to override the icon used for the toggle */ toggleIcon?: React.ReactNode; + /** 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')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; /** ID list of favorited ApplicationLauncherItems */ favorites?: string[]; /** Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked */ diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx index 1a7c356dc7e..49d9aa9652f 100644 --- a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx +++ b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx @@ -10,7 +10,6 @@ import { TextInput } from '../TextInput'; import { InputGroup } from '../InputGroup'; import { KEY_CODES } from '../../helpers/constants'; import { FocusTrap } from '../../helpers'; -import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper'; import { Popper } from '../../helpers/Popper/Popper'; import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers'; @@ -18,7 +17,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers'; let currentId = 0; const newId = currentId++; -export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps { +export interface ContextSelectorProps extends OUIAProps { /** content rendered inside the Context Selector */ children?: React.ReactNode; /** Classes applied to root element of Context Selector */ @@ -29,6 +28,14 @@ export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps { onToggle?: (event: any, value: boolean) => void; /** Function callback called when user selects item */ onSelect?: (event: any, value: React.ReactNode) => void; + /** 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')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; /** Flag indicating that the context selector should expand to full height */ isFullHeight?: boolean; /** Labels the Context Selector for Screen Readers */ diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 47da93af9f3..cc7b002d1b3 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; import { DropdownPosition, DropdownDirection, DropdownContext } from './dropdownConstants'; import { DropdownWithContext } from './DropdownWithContext'; -import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper'; import { OUIAProps, useOUIAId } from '../../helpers'; -export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps, OUIAProps { +export interface DropdownProps extends React.HTMLProps, OUIAProps { /** Anything which can be rendered in a dropdown */ children?: React.ReactNode; /** Classes applied to root element of dropdown */ @@ -32,6 +31,14 @@ export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps document.body} + * menuAppendTo={document.getElementById('target')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; /** Flag to indicate if dropdown has groups */ isGrouped?: boolean; /** Toggle for the dropdown, examples: or */ @@ -54,6 +61,7 @@ export const Dropdown: React.FunctionComponent = ({ ouiaSafe, alignments, contextProps, + menuAppendTo = 'inline', ...props }: DropdownProps) => ( = ({ ...contextProps }} > - + ); Dropdown.displayName = 'Dropdown'; diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx index 69ce2c4841c..5924d70767a 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx @@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/OptionsMenu/options- import { DropdownContext } from '../Dropdown'; import { DropdownWithContext } from '../Dropdown/DropdownWithContext'; import { OUIAProps, useOUIAId } from '../../helpers'; -import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper'; export enum OptionsMenuPosition { right = 'right', @@ -15,7 +14,7 @@ export enum OptionsMenuDirection { down = 'down' } -export interface OptionsMenuProps extends ToggleMenuBaseProps, React.HTMLProps, OUIAProps { +export interface OptionsMenuProps extends React.HTMLProps, OUIAProps { /** Classes applied to root element of the options menu */ className?: string; /** Id of the root element of the options menu */ @@ -36,6 +35,14 @@ export interface OptionsMenuProps extends ToggleMenuBaseProps, React.HTMLProps document.body} + * menuAppendTo={document.getElementById('target')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; } export const OptionsMenu: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index 633dae124f4..ee1bfea8734 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -33,7 +33,7 @@ import { } from '../../helpers'; import { KeyTypes } from '../../helpers/constants'; import { Divider } from '../Divider'; -import { ToggleMenuBaseProps, Popper } from '../../helpers/Popper/Popper'; +import { Popper } from '../../helpers/Popper/Popper'; import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites'; import { ValidatedOptions } from '../../helpers/constants'; import { findTabbableElements } from '../../helpers/util'; @@ -48,8 +48,7 @@ export interface SelectViewMoreObject { onClick: (event: React.MouseEvent | React.ChangeEvent) => void; } export interface SelectProps - extends ToggleMenuBaseProps, - Omit, 'onSelect' | 'ref' | 'checked' | 'selected'>, + extends Omit, 'onSelect' | 'ref' | 'checked' | 'selected'>, OUIAProps { /** Content rendered inside the Select. Must be React.ReactElement[] */ children?: React.ReactElement[]; @@ -163,6 +162,14 @@ export interface SelectProps shouldResetOnSelect?: boolean; /** Content rendered in the footer of the select menu */ footer?: React.ReactNode; + /** 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')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; } export interface SelectState { diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 42d2a1a0815..85788593cb7 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -14,17 +14,6 @@ const getOppositePlacement = (placement: Placement): any => (matched: string) => hash[matched as 'left' | 'right' | 'bottom' | 'top'] as BasePlacement ); -export interface ToggleMenuBaseProps { - /** 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')} - */ - menuAppendTo?: HTMLElement | (() => HTMLElement) | 'parent' | 'inline'; -} - export const getOpacityTransition = (animationDuration: number) => `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;