@patternfly/react-core 5.0.0-alpha.15 → 5.0.0-alpha.16

package/src/components/Popover/Popover.tsx

@@ -60,11 +60,18 @@ export interface PopoverProps {
    */
   bodyContent: React.ReactNode | ((hide: () => void) => React.ReactNode);
   /**
-   * The reference element to which the popover is relatively placed to. If you cannot wrap
-   * the reference with the Popover, you can use the reference prop instead.
+   * The trigger reference element to which the popover is relatively placed to. If you cannot wrap
+   * the element with the Popover, you can use the triggerRef prop instead.
    * Usage: <Popover><Button>Reference</Button></Popover>
    */
   children?: ReactElement<any>;
+  /**
+   * The trigger reference element to which the popover is relatively placed to. If you can wrap the
+   * element with the popover, you can use the children prop instead, or both props together.
+   * When passed along with the trigger prop, the div element that wraps the trigger will be removed.
+   * Usage: <Popover triggerRef={() => document.getElementById('reference-element')} />
+   */
+  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** Additional classes added to the popover. */
   className?: string;
   /** Accessible label for the close button. */
@@ -184,12 +191,6 @@ export interface PopoverProps {
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /**
-   * The reference element to which the popover is relatively placed to. If you can wrap the
-   * reference with the popover, you can use the children prop instead.
-   * Usage: <Popover reference={() => document.getElementById('reference-element')} />
-   */
-  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /**
    * Callback function that is only invoked when isVisible is also controlled. Called when the
    * popover close button is clicked, the enter key was used on it, or the escape key is used.
@@ -262,7 +263,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   animationDuration = 300,
   id,
   withFocusTrap: propWithFocusTrap,
-  reference,
+  triggerRef,
   hasNoPadding = false,
   hasAutoWidth = false,
   ...rest
@@ -277,6 +278,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
 
   React.useEffect(() => {
     onMount();
@@ -389,6 +391,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   };
   const content = (
     <FocusTrap
+      ref={popoverRef}
       active={focusTrapActive}
       focusTrapOptions={{
         returnFocusOnDeactivate: true,
@@ -458,8 +461,9 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
     <PopoverContext.Provider value={{ headerComponent }}>
       <Popper
         trigger={children}
-        reference={reference}
+        triggerRef={triggerRef}
         popper={content}
+        popperRef={popoverRef}
         popperMatchesTriggerWidth={false}
         appendTo={appendTo}
         isVisible={visible}

package/src/components/Popover/examples/PopoverReactRef.tsx

@@ -16,7 +16,7 @@ export const PopoverReactRef: React.FunctionComponent = () => {
           </div>
         }
         footerContent="Popover footer"
-        reference={popoverRef}
+        triggerRef={popoverRef}
       />
     </div>
   );

package/src/components/Popover/examples/PopoverSelectorRef.tsx

@@ -13,7 +13,7 @@ export const PopoverSelectorRef: React.FunctionComponent = () => (
         </div>
       }
       footerContent="Popover footer"
-      reference={() => document.getElementById('popover-selector') as HTMLButtonElement}
+      triggerRef={() => document.getElementById('popover-selector') as HTMLButtonElement}
     />
   </div>
 );

package/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx

@@ -8,12 +8,12 @@ export const PopoverProgressStep = () => (
       id="popover-step1"
       titleId="popover-step1-title"
       aria-label="completed step with popover, step with success"
-      popoverRender={stepRef => (
+      popoverRender={(stepRef) => (
         <Popover
           aria-label="First step help"
           headerContent={<div>First step popover</div>}
           bodyContent={<div>Additional info or help text content.</div>}
-          reference={stepRef}
+          triggerRef={stepRef}
           position="right"
         />
       )}
@@ -25,12 +25,12 @@ export const PopoverProgressStep = () => (
       id="popover-step2"
       titleId="popover-step2-title"
       aria-label="completed step with popover, step with danger"
-      popoverRender={stepRef => (
+      popoverRender={(stepRef) => (
         <Popover
           aria-label="Second step help"
           headerContent={<div>Second step popover</div>}
           bodyContent={<div>Additional info or help text content.</div>}
-          reference={stepRef}
+          triggerRef={stepRef}
           position="right"
         />
       )}
@@ -42,12 +42,12 @@ export const PopoverProgressStep = () => (
       id="popover-step3"
       titleId="popover-step3-title"
       aria-label="step with popover"
-      popoverRender={stepRef => (
+      popoverRender={(stepRef) => (
         <Popover
           aria-label="Third step help"
           headerContent={<div>Third step popover</div>}
           bodyContent={<div>Additional info or help text content.</div>}
-          reference={stepRef}
+          triggerRef={stepRef}
           position="right"
         />
       )}

package/src/components/SearchInput/SearchInput.tsx

@@ -172,6 +172,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const ref = React.useRef(null);
   const searchInputInputRef = innerRef || ref;
   const searchInputExpandableToggleRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const popperRef = React.useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = React.useState(false);
 
   const { isExpanded, onToggleExpand, toggleAriaLabel } = expandableInput || {};
@@ -371,7 +373,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   };
 
   const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
-    <InputGroup {...searchInputProps}>
+    <InputGroup ref={triggerRef} {...searchInputProps}>
       {buildTextInputGroup()}
       {(attributes.length > 0 || onToggleAdvancedSearch) && (
         <Button
@@ -413,7 +415,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
     if (attributes.length > 0) {
       const AdvancedSearch = (
-        <div>
+        <div ref={popperRef}>
           <AdvancedSearchMenu
             value={value}
             parentRef={searchInputRef}
@@ -438,7 +440,9 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         <div className={css(className)} ref={searchInputRef} {...props}>
           <Popper
             trigger={buildSearchTextInputGroupWithExtraButtons()}
+            triggerRef={triggerRef}
             popper={AdvancedSearch}
+            popperRef={popperRef}
             isVisible={isSearchMenuOpen}
             enableFlip={true}
             appendTo={() => appendTo || searchInputRef.current}