feat(Popper, misc): allow components to customize popper z-index

packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -63,6 +63,8 @@ export interface ApplicationLauncherProps
   toggleId?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the application launcher when menuAppendTo is not inline. */
+  zIndex?: number;
 }
 
 export class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
@@ -133,6 +135,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       searchNoResultsText,
       menuAppendTo,
       removeFindDomNode,
+      zIndex = 9999,
       ...props
     } = this.props;
     let renderableItems: React.ReactNode[] = [];
@@ -194,6 +197,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
             aria-label={ariaLabel}
             menuAppendTo={menuAppendTo}
             removeFindDomNode={removeFindDomNode}
+            zIndex={zIndex}
             toggle={
               <DropdownToggle
                 id={toggleId}

packages/react-core/src/components/ContextSelector/ContextSelector.tsx

@@ -68,6 +68,8 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
   id?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the context selector when menuAppendTo is not inline. */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -96,7 +98,8 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     isPlain: false,
     isText: false,
     isFlipEnabled: true,
-    removeFindDomNode: false
+    removeFindDomNode: false,
+    zIndex: 9999
   };
   constructor(props: ContextSelectorProps) {
     super(props);
@@ -139,6 +142,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       isFlipEnabled,
       id,
       removeFindDomNode,
+      zIndex,
       ...props
     } = this.props;
 
@@ -235,6 +239,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
         appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
         isVisible={isOpen}
         removeFindDomNode={removeFindDomNode}
+        zIndex={zIndex}
       />
     );
   }

packages/react-core/src/components/Dropdown/Dropdown.tsx

@@ -62,6 +62,8 @@ export interface DropdownProps
   isFlipEnabled?: boolean;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the dropdown when menuAppendTo is not inline. */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -79,6 +81,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   menuAppendTo = 'inline',
   isFlipEnabled = true,
   removeFindDomNode = false,
+  zIndex = 9999,
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
@@ -108,6 +111,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       menuAppendTo={menuAppendTo}
       isFlipEnabled={isFlipEnabled}
       removeFindDomNode={removeFindDomNode}
+      zIndex={zIndex}
       {...props}
     />
   </DropdownContext.Provider>

packages/react-core/src/components/Dropdown/DropdownWithContext.tsx

@@ -78,6 +78,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       menuAppendTo,
       isFlipEnabled,
       removeFindDomNode,
+      zIndex,
       ...props
     } = this.props;
     const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
@@ -175,6 +176,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
               isVisible={isOpen}
               removeFindDomNode={removeFindDomNode}
+              zIndex={zIndex}
               popperMatchesTriggerWidth={false}
             />
           );

packages/react-core/src/components/Nav/NavItem.tsx

@@ -34,6 +34,8 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   onShowFlyout?: () => void;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the flyout nav item */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -56,6 +58,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ouiaId,
   ouiaSafe,
   removeFindDomNode = false,
+  zIndex = 9999,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef } = React.useContext(NavContext);
@@ -225,6 +228,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       isVisible={flyoutVisible}
       onDocumentKeyDown={handleFlyout}
       removeFindDomNode={removeFindDomNode}
+      zIndex={zIndex}
     />
   );
 

packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx

@@ -49,6 +49,8 @@ export interface OptionsMenuProps
   menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the options menu when menuAppendTo is not inline. */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -68,6 +70,7 @@ export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
   ouiaId,
   ouiaSafe = true,
   removeFindDomNode = false,
+  zIndex = 9999,
   ...props
 }: OptionsMenuProps) => (
   <DropdownContext.Provider
@@ -96,6 +99,7 @@ export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
       toggle={toggle}
       menuAppendTo={menuAppendTo}
       removeFindDomNode={removeFindDomNode}
+      zIndex={zIndex}
       {...props}
     />
   </DropdownContext.Provider>

packages/react-core/src/components/SearchInput/SearchInput.tsx

@@ -119,6 +119,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   previousNavigationButtonAriaLabel?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the advanced search form when appendTo is not inline. */
+  zIndex?: number;
   /** Label for the button which resets the advanced search form and clears the search input. */
   resetButtonLabel?: string;
   /** The number of search results returned. Either a total number of results,
@@ -160,6 +162,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   isDisabled = false,
   appendTo,
   removeFindDomNode = false,
+  zIndex = 9999,
   type = 'text',
   ...props
 }: SearchInputProps) => {
@@ -416,6 +419,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             enableFlip={true}
             appendTo={() => appendTo || searchInputRef.current}
             removeFindDomNode={removeFindDomNode}
+            zIndex={zIndex}
           />
         </div>
       );

packages/react-core/src/components/Select/Select.tsx

@@ -186,6 +186,8 @@ export interface SelectProps
   isFlipEnabled?: boolean;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the select menu when menuAppendTo is not inline. */
+  zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -267,7 +269,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     isCreateSelectOptionObject: false,
     shouldResetOnSelect: true,
     isFlipEnabled: true,
-    removeFindDomNode: false
+    removeFindDomNode: false,
+    zIndex: 9999
   };
 
   state: SelectState = {
@@ -1034,6 +1037,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       shouldResetOnSelect,
       isFlipEnabled,
       removeFindDomNode,
+      zIndex,
       ...props
     } = this.props;
     const {
@@ -1478,6 +1482,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
                 isVisible={isOpen}
                 removeFindDomNode={removeFindDomNode}
+                zIndex={zIndex}
               />
             )}
           </SelectContext.Provider>

packages/react-core/src/components/Tabs/OverflowTab.tsx

@@ -21,6 +21,8 @@ export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
   toggleAriaLabel?: string;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the overflow tab */
+  zIndex?: number;
 }
 
 export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
@@ -30,6 +32,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   defaultTitleText = 'More',
   toggleAriaLabel,
   removeFindDomNode = false,
+  zIndex = 9999,
   ...props
 }: OverflowTabProps) => {
   const menuRef = React.useRef<HTMLDivElement>();
@@ -139,6 +142,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
       popperMatchesTriggerWidth={false}
       appendTo={overflowLIRef.current}
       removeFindDomNode={removeFindDomNode}
+      zIndex={zIndex}
     />
   );
 };

packages/react-core/src/components/TimePicker/TimePicker.tsx

@@ -73,6 +73,8 @@ export interface TimePickerProps
   setIsOpen?: (isOpen?: boolean) => void;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** z-index of the time picker */
+  zIndex?: number;
 }
 
 interface TimePickerState {
@@ -111,7 +113,8 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     maxTime: '',
     isOpen: false,
     setIsOpen: () => {},
-    removeFindDomNode: false
+    removeFindDomNode: false,
+    zIndex: 9999
   };
 
   constructor(props: TimePickerProps) {
@@ -445,6 +448,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       includeSeconds,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       removeFindDomNode,
+      zIndex,
       ...props
     } = this.props;
     const { timeState, isTimeOptionsOpen, isInvalid, minTimeState, maxTimeState } = this.state;
@@ -519,6 +523,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
                   popper={menuContainer}
                   isVisible={isTimeOptionsOpen}
                   removeFindDomNode={removeFindDomNode}
+                  zIndex={zIndex}
                 />
               </div>
             </div>

packages/react-core/src/next/components/Dropdown/Dropdown.tsx

@@ -30,6 +30,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** z-index of the dropdown menu */
+  zIndex?: number;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -45,6 +47,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   innerRef,
   ouiaId,
   ouiaSafe = true,
+  zIndex = 9999,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -119,6 +122,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
         popper={menu}
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}
+        zIndex={zIndex}
       />
     </div>
   );

packages/react-core/src/next/components/Select/Select.tsx

@@ -26,6 +26,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
   minWidth?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<HTMLDivElement>;
+  /** z-index of the select menu */
+  zIndex?: number;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -39,6 +41,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   isPlain,
   minWidth,
   innerRef,
+  zIndex = 9999,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -117,6 +120,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         popper={menu}
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}
+        zIndex={zIndex}
       />
     </div>
   );