@patternfly/react-core 4.202.31 → 4.202.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.31",
+  "version": "4.202.34",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.53.31",
-    "@patternfly/react-styles": "^4.52.31",
-    "@patternfly/react-tokens": "^4.54.31",
+    "@patternfly/react-icons": "^4.53.34",
+    "@patternfly/react-styles": "^4.52.34",
+    "@patternfly/react-tokens": "^4.54.34",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "b4d39ebb37217775bd0e652d2c7e1428a3d0370a"
+  "gitHead": "de4c7f23a825d7acacd504503250374f7bb5b302"
 }

package/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<HTMLDivElement> {
+export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
   /** 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 */

package/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 */
@@ -85,6 +92,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
   }
 
   parentRef: React.RefObject<HTMLDivElement> = React.createRef();
+  popperRef: React.RefObject<HTMLDivElement> = React.createRef();
 
   onEnterPressed = (event: any) => {
     if (event.charCode === KEY_CODES.ENTER) {
@@ -154,7 +162,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     const popperContainer = (
       <div
         className={css(styles.contextSelector, isOpen && styles.modifiers.expanded, className)}
-        ref={this.parentRef}
+        ref={this.popperRef}
         {...props}
       >
         {isOpen && menuContainer}
@@ -182,7 +190,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
           isOpen={isOpen}
           toggleText={toggleText}
           id={toggleId}
-          parentRef={this.parentRef.current}
+          parentRef={menuAppendTo === 'inline' ? this.parentRef : this.popperRef}
           aria-labelledby={`${screenReaderLabelId} ${toggleId}`}
           isPlain={isPlain}
           isText={isText}

package/src/components/ContextSelector/ContextSelectorToggle.tsx

@@ -57,16 +57,16 @@ export class ContextSelectorToggle extends React.Component<ContextSelectorToggle
 
   onDocClick = (event: any) => {
     const { isOpen, parentRef, onToggle } = this.props;
-    if (isOpen && parentRef && !parentRef.contains(event.target)) {
+    if (isOpen && parentRef?.current && !parentRef.current.contains(event.target)) {
       onToggle(null, false);
       this.toggle.current.focus();
     }
   };
 
   onEscPress = (event: any) => {
-    const { isOpen, parentRef, onToggle } = this.props;
+    const { isOpen, onToggle } = this.props;
     const keyCode = event.keyCode || event.which;
-    if (isOpen && keyCode === KEY_CODES.ESCAPE_KEY && parentRef && parentRef.contains(event.target)) {
+    if (isOpen && keyCode === KEY_CODES.ESCAPE_KEY) {
       onToggle(null, false);
       this.toggle.current.focus();
     }

package/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<HTMLDivElement>, OUIAProps {
+export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, 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<HTML
   };
   /** 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: <DropdownToggle> or <DropdownToggleCheckbox> */
@@ -54,6 +61,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   ouiaSafe,
   alignments,
   contextProps,
+  menuAppendTo = 'inline',
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
@@ -79,7 +87,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       ...contextProps
     }}
   >
-    <DropdownWithContext {...props} />
+    <DropdownWithContext menuAppendTo={menuAppendTo} {...props} />
   </DropdownContext.Provider>
 );
 Dropdown.displayName = 'Dropdown';

package/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<HTMLDivElement>, OUIAProps {
+export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>, 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<H
   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<OptionsMenuProps> = ({

package/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<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
+  extends Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
     OUIAProps {
   /** Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] */
   children?: React.ReactElement[];
@@ -165,6 +164,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 {

package/src/components/Wizard/Wizard.tsx

@@ -54,6 +54,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   descriptionId?: string;
   /** The wizard description */
   description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
   hideClose?: boolean;
   /** Callback function to close the wizard */
@@ -111,6 +113,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
   static defaultProps: PickOptional<WizardProps> = {
     title: null,
     description: '',
+    descriptionComponent: 'p',
     className: '',
     startAtStep: 1,
     nextButtonText: 'Next',
@@ -312,6 +315,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       height,
       title,
       description,
+      descriptionComponent,
       onClose,
       onSave,
       onBack,
@@ -453,6 +457,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               onClose={onClose}
               title={title}
               description={description}
+              descriptionComponent={descriptionComponent}
               closeButtonAriaLabel={closeButtonAriaLabel}
               hideClose={hideClose}
             />

package/src/components/Wizard/WizardHeader.tsx

@@ -12,6 +12,8 @@ export interface WizardHeaderProps {
   title: string;
   /** Description of the wizard */
   description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
   hideClose?: boolean;
   /** Aria-label applied to the X (Close) button */
@@ -29,6 +31,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   hideClose,
   closeButtonAriaLabel,
   titleId,
+  descriptionComponent: Component = 'p',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
@@ -41,9 +44,9 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
       {title || <>&nbsp;</>}
     </Title>
     {description && (
-      <p className={css(styles.wizardDescription)} id={descriptionId}>
+      <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}
-      </p>
+      </Component>
     )}
   </div>
 );