@patternfly/react-core 4.217.0 → 4.217.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.217.0",
+  "version": "4.217.3",
   "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.68.0",
-    "@patternfly/react-styles": "^4.67.0",
-    "@patternfly/react-tokens": "^4.69.0",
+    "@patternfly/react-icons": "^4.68.3",
+    "@patternfly/react-styles": "^4.67.3",
+    "@patternfly/react-tokens": "^4.69.3",
     "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": "a1b1c66e6c186a78cc60ce3182959cc771fc27c9"
+  "gitHead": "cb169f61276aee6fc695408537310c10cfb5f1f0"
 }

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -12,7 +12,9 @@ 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 Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
+    React.HTMLProps<HTMLDivElement> {
   /** Additional element css classes */
   className?: string;
   /** Display menu above or below dropdown toggle */
@@ -35,6 +37,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

@@ -18,7 +18,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 let currentId = 0;
 const newId = currentId++;
 
-export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps {
+export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>, OUIAProps {
   /** content rendered inside the Context Selector */
   children?: React.ReactNode;
   /** Classes applied to root element of Context Selector */
@@ -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 */
@@ -53,6 +61,11 @@ export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps {
   isText?: boolean;
   /** Flag to disable focus trap */
   disableFocusTrap?: boolean;
+  /** Flag for indicating that the context selector menu should automatically flip vertically when
+   * it reaches the boundary. This prop can only be used when the context selector component is not
+   * appended inline, e.g. `menuAppendTo="parent"`
+   */
+  isFlipEnabled?: boolean;
 }
 
 export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
@@ -75,7 +88,8 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     disableFocusTrap: false,
     footer: null as React.ReactNode,
     isPlain: false,
-    isText: false
+    isText: false,
+    isFlipEnabled: false
   };
   constructor(props: ContextSelectorProps) {
     super(props);
@@ -118,10 +132,16 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       isText,
       footer,
       disableFocusTrap,
+      isFlipEnabled,
       ...props
     } = this.props;
     const menuContainer = (
-      <div className={css(styles.contextSelectorMenu)}>
+      <div
+        className={css(styles.contextSelectorMenu)}
+        // This removes the `position: absolute`styling from the `.pf-c-context-selector__menu`
+        // allowing the menu to flip correctly
+        {...(isFlipEnabled && { style: { position: 'revert' } })}
+      >
         {isOpen && (
           <FocusTrap active={!disableFocusTrap} focusTrapOptions={{ clickOutsideDeactivates: true }}>
             <div className={css(styles.contextSelectorMenuSearch)}>

package/src/components/Dropdown/Dropdown.tsx

@@ -5,7 +5,10 @@ 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 Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
+    React.HTMLProps<HTMLDivElement>,
+    OUIAProps {
   /** Anything which can be rendered in a dropdown */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown */
@@ -32,6 +35,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> */
@@ -44,6 +55,11 @@ export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps<HTML
   autoFocus?: boolean;
   /** Props for extreme customization of dropdown */
   contextProps?: typeof DropdownContext;
+  /** Flag for indicating that the dropdown menu should automatically flip vertically when
+   * it reaches the boundary. This prop can only be used when the dropdown component is not
+   * appended inline, e.g. `menuAppendTo="parent"`
+   */
+  isFlipEnabled?: boolean;
 }
 
 export const Dropdown: React.FunctionComponent<DropdownProps> = ({
@@ -54,6 +70,8 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   ouiaSafe,
   alignments,
   contextProps,
+  menuAppendTo = 'inline',
+  isFlipEnabled = false,
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
@@ -79,7 +97,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       ...contextProps
     }}
   >
-    <DropdownWithContext {...props} />
+    <DropdownWithContext menuAppendTo={menuAppendTo} isFlipEnabled={isFlipEnabled} {...props} />
   </DropdownContext.Provider>
 );
 Dropdown.displayName = 'Dropdown';

package/src/components/Dropdown/DropdownWithContext.tsx

@@ -29,7 +29,8 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
     direction: DropdownDirection.down,
     onSelect: (): void => undefined,
     autoFocus: true,
-    menuAppendTo: 'inline'
+    menuAppendTo: 'inline',
+    isFlipEnabled: false
   };
 
   constructor(props: DropdownProps & OUIAProps) {
@@ -75,6 +76,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       toggle,
       autoFocus,
       menuAppendTo,
+      isFlipEnabled,
       ...props
     } = this.props;
     const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
@@ -96,6 +98,9 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
           const BaseComponent = baseComponent as any;
           const menuContainer = (
             <DropdownMenu
+              // This removes the `position: absolute` styling from the `.pf-c-dropdown__menu`
+              // allowing the menu to flip correctly
+              {...(isFlipEnabled && { style: { position: 'revert', minWidth: 'min-content' } })}
               setMenuComponentRef={this.setMenuComponentRef}
               component={component}
               isOpen={isOpen}

package/src/components/OptionsMenu/OptionsMenu.tsx

@@ -15,7 +15,10 @@ export enum OptionsMenuDirection {
   down = 'down'
 }
 
-export interface OptionsMenuProps extends ToggleMenuBaseProps, React.HTMLProps<HTMLDivElement>, OUIAProps {
+export interface OptionsMenuProps
+  extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
+    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 +39,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

@@ -48,7 +48,7 @@ export interface SelectViewMoreObject {
   onClick: (event: React.MouseEvent | React.ChangeEvent) => void;
 }
 export interface SelectProps
-  extends ToggleMenuBaseProps,
+  extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
     Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
     OUIAProps {
   /** Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] */
@@ -165,6 +165,19 @@ 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';
+  /** Flag for indicating that the select menu should automatically flip vertically when
+   * it reaches the boundary. This prop can only be used when the select component is not
+   * appended inline, e.g. `menuAppendTo="parent"`
+   */
+  isFlipEnabled?: boolean;
 }
 
 export interface SelectState {
@@ -237,7 +250,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isInputValuePersisted: false,
     isInputFilterPersisted: false,
     isCreateSelectOptionObject: false,
-    shouldResetOnSelect: true
+    shouldResetOnSelect: true,
+    isFlipEnabled: false
   };
 
   state: SelectState = {
@@ -970,6 +984,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       loadingVariant,
       isCreateSelectOptionObject,
       shouldResetOnSelect,
+      isFlipEnabled,
       ...props
     } = this.props;
     const {
@@ -1196,6 +1211,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
     const innerMenu = (
       <SelectMenu
+        // This removes the `position: absolute` styling from the `.pf-c-select__menu`
+        // allowing the menu to flip correctly
+        {...(isFlipEnabled && { style: { position: 'revert' } })}
         {...props}
         isGrouped={isGrouped}
         selected={selections}

package/src/helpers/Popper/Popper.tsx

@@ -14,6 +14,7 @@ const getOppositePlacement = (placement: Placement): any =>
     (matched: string) => hash[matched as 'left' | 'right' | 'bottom' | 'top'] as BasePlacement
   );
 
+/** @deprecated Please use the menuAppendTo prop directly from within the PF component which uses it. */
 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.