From d19c13a9206f303ea8fae3e30b206feffd47f12b Mon Sep 17 00:00:00 2001 From: Titani Labaj <39532947+tlabaj@users.noreply.github.com> Date: Tue, 10 May 2022 09:13:49 -0400 Subject: [PATCH] Revert "docs(Dropdown): expose menuAppendTo in Dropdown prop docs (#7173)" This reverts commit fdbf6f9e4b3121a02a1dee50746bdb76dddfaa32. --- .../ApplicationLauncher/ApplicationLauncher.tsx | 11 ++--------- .../components/ContextSelector/ContextSelector.tsx | 11 ++--------- .../src/components/Dropdown/Dropdown.tsx | 14 +++----------- .../src/components/OptionsMenu/OptionsMenu.tsx | 11 ++--------- .../react-core/src/components/Select/Select.tsx | 13 +++---------- packages/react-core/src/helpers/Popper/Popper.tsx | 11 +++++++++++ 6 files changed, 23 insertions(+), 48 deletions(-) diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index c496ae92850..6b8566b7ed5 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -9,9 +9,10 @@ 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 React.HTMLProps { +export interface ApplicationLauncherProps extends ToggleMenuBaseProps, React.HTMLProps { /** Additional element css classes */ className?: string; /** Display menu above or below dropdown toggle */ @@ -34,14 +35,6 @@ export interface ApplicationLauncherProps extends React.HTMLProps 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 775264f0d8b..18ca643319e 100644 --- a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx +++ b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx @@ -10,6 +10,7 @@ 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'; @@ -17,7 +18,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers'; let currentId = 0; const newId = currentId++; -export interface ContextSelectorProps extends OUIAProps { +export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps { /** content rendered inside the Context Selector */ children?: React.ReactNode; /** Classes applied to root element of Context Selector */ @@ -28,14 +29,6 @@ export interface ContextSelectorProps extends 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 cc7b002d1b3..47da93af9f3 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -2,9 +2,10 @@ 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 React.HTMLProps, OUIAProps { +export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps, OUIAProps { /** Anything which can be rendered in a dropdown */ children?: React.ReactNode; /** Classes applied to root element of dropdown */ @@ -31,14 +32,6 @@ export interface DropdownProps extends React.HTMLProps, OUIAProp }; /** Display menu above or below dropdown toggle */ direction?: DropdownDirection | 'up' | 'down'; - /** 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 to indicate if dropdown has groups */ isGrouped?: boolean; /** Toggle for the dropdown, examples: or */ @@ -61,7 +54,6 @@ 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 5924d70767a..69ce2c4841c 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx @@ -3,6 +3,7 @@ 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', @@ -14,7 +15,7 @@ export enum OptionsMenuDirection { down = 'down' } -export interface OptionsMenuProps extends React.HTMLProps, OUIAProps { +export interface OptionsMenuProps extends ToggleMenuBaseProps, React.HTMLProps, OUIAProps { /** Classes applied to root element of the options menu */ className?: string; /** Id of the root element of the options menu */ @@ -35,14 +36,6 @@ export interface OptionsMenuProps extends React.HTMLProps, OUIAP position?: 'right' | 'left'; /** Menu will open up or open down from the options menu toggle */ direction?: 'up' | 'down'; - /** 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 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 22d1b05e09b..93ea4acf960 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 { Popper } from '../../helpers/Popper/Popper'; +import { ToggleMenuBaseProps, Popper } from '../../helpers/Popper/Popper'; import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites'; import { ValidatedOptions } from '../../helpers/constants'; import { findTabbableElements } from '../../helpers/util'; @@ -48,7 +48,8 @@ export interface SelectViewMoreObject { onClick: (event: React.MouseEvent | React.ChangeEvent) => void; } export interface SelectProps - extends Omit, 'onSelect' | 'ref' | 'checked' | 'selected'>, + extends ToggleMenuBaseProps, + Omit, 'onSelect' | 'ref' | 'checked' | 'selected'>, OUIAProps { /** Content rendered inside the Select. Must be React.ReactElement[] */ children?: React.ReactElement[]; @@ -164,14 +165,6 @@ 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 9d1a4235c88..453d52c0a7e 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -14,6 +14,17 @@ 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)`;