From 52e632ce558ae49e335c251fa43e76effda8ca91 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 4 Apr 2022 10:54:04 -0400 Subject: [PATCH 1/3] expose menuAppendTo in Dropdown prop docs --- packages/react-core/src/components/Dropdown/Dropdown.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 47da93af9f3..5952d2e6bee 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -54,6 +54,7 @@ export const Dropdown: React.FunctionComponent = ({ ouiaSafe, alignments, contextProps, + menuAppendTo = 'inline', ...props }: DropdownProps) => ( = ({ ...contextProps }} > - + ); Dropdown.displayName = 'Dropdown'; From 35f9ad3af972bca78e8c9823ed97942e9953d081 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 11 Apr 2022 11:22:58 -0400 Subject: [PATCH 2/3] pr feedback from Eric --- .../ApplicationLauncher/ApplicationLauncher.tsx | 8 ++++++++ .../src/components/ContextSelector/ContextSelector.tsx | 8 ++++++++ packages/react-core/src/components/Dropdown/Dropdown.tsx | 8 ++++++++ .../react-core/src/components/OptionsMenu/OptionsMenu.tsx | 8 ++++++++ packages/react-core/src/components/Select/Select.tsx | 8 ++++++++ 5 files changed, 40 insertions(+) diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index 6b8566b7ed5..5cb0f29d7f9 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -35,6 +35,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..8cd22aa6751 100644 --- a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx +++ b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx @@ -29,6 +29,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 5952d2e6bee..c82e0f7e892 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -32,6 +32,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 */ diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx index 69ce2c4841c..986fc75d060 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx @@ -36,6 +36,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..173e04598ca 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -163,6 +163,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 { From 8074876dd3d4306f385e4d72c82fb5d0cab2d616 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 11 Apr 2022 17:06:49 -0400 Subject: [PATCH 3/3] fix circular dependency error --- .../ApplicationLauncher/ApplicationLauncher.tsx | 3 +-- .../components/ContextSelector/ContextSelector.tsx | 3 +-- .../react-core/src/components/Dropdown/Dropdown.tsx | 3 +-- .../src/components/OptionsMenu/OptionsMenu.tsx | 3 +-- packages/react-core/src/components/Select/Select.tsx | 5 ++--- packages/react-core/src/helpers/Popper/Popper.tsx | 11 ----------- 6 files changed, 6 insertions(+), 22 deletions(-) diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index 5cb0f29d7f9..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 */ diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx index 8cd22aa6751..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 */ diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index c82e0f7e892..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 */ diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx index 986fc75d060..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 */ diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index 173e04598ca..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[]; 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)`;