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

package/src/components/Select/Select.tsx

@@ -1285,6 +1285,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
 
     const menuContainer = footer ? <div className={css(styles.selectMenu)}> {innerMenu} </div> : innerMenu;
 
+    const popperRef = React.createRef<HTMLDivElement>();
     const popperContainer = (
       <div
         className={css(
@@ -1296,6 +1297,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           direction === SelectDirection.up && styles.modifiers.top,
           className
         )}
+        ref={popperRef}
         {...(width && { style: { width } })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
@@ -1476,7 +1478,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             ) : (
               <Popper
                 trigger={mainContainer}
+                triggerRef={this.parentRef}
                 popper={popperContainer}
+                popperRef={popperRef}
                 direction={direction}
                 appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
                 isVisible={isOpen}

package/src/components/Slider/Slider.tsx

@@ -152,7 +152,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
 
   const findAriaTextValue = () => {
     if (!areCustomStepsContinuous && customSteps) {
-      const matchingStep = customSteps.find(stepObj => stepObj.value === localValue);
+      const matchingStep = customSteps.find((stepObj) => stepObj.value === localValue);
       if (matchingStep) {
         return matchingStep.label;
       }
@@ -243,7 +243,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       if (customSteps[customSteps.length - 1].value !== 100) {
         percentage = (newPercentage * (max - min)) / 100 + min;
       }
-      const stepIndex = customSteps.findIndex(stepObj => stepObj.value >= percentage);
+      const stepIndex = customSteps.findIndex((stepObj) => stepObj.value >= percentage);
       if (customSteps[stepIndex].value === percentage) {
         snapValue = customSteps[stepIndex].value;
       } else {
@@ -278,7 +278,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     e.preventDefault();
     let newValue: number = localValue;
     if (!areCustomStepsContinuous && customSteps) {
-      const stepIndex = customSteps.findIndex(stepObj => stepObj.value === localValue);
+      const stepIndex = customSteps.findIndex((stepObj) => stepObj.value === localValue);
       if (key === 'ArrowRight') {
         if (stepIndex + 1 < customSteps.length) {
           {
@@ -397,7 +397,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         </div>
         {customSteps && (
           <div className={css(styles.sliderSteps)} aria-hidden="true">
-            {customSteps.map(stepObj => {
+            {customSteps.map((stepObj) => {
               const minValue = customSteps[0].value;
               const maxValue = customSteps[customSteps.length - 1].value;
               const stepValue = getStepValue(stepObj.value, minValue, maxValue);
@@ -423,7 +423,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
         )}
         {hasTooltipOverThumb ? (
-          <Tooltip entryDelay={0} content={findAriaTextValue()}>
+          <Tooltip triggerRef={thumbRef} entryDelay={0} content={findAriaTextValue()}>
             {thumbComponent}
           </Tooltip>
         ) : (

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -639,20 +639,16 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
         </div>
       </div>
       <div
-        style="display: contents;"
-      >
-        <div
-          aria-disabled="false"
-          aria-label="Value"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          aria-valuenow="50"
-          aria-valuetext="50"
-          class="pf-c-slider__thumb"
-          role="slider"
-          tabindex="0"
-        />
-      </div>
+        aria-disabled="false"
+        aria-label="Value"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50"
+        class="pf-c-slider__thumb"
+        role="slider"
+        tabindex="0"
+      />
     </div>
   </div>
 </DocumentFragment>

package/src/components/Tabs/OverflowTab.tsx

@@ -70,11 +70,11 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
     };
   }, [isExpanded, menuRef, overflowTabRef]);
 
-  const selectedTab = overflowingTabs.find(tab => tab.eventKey === localActiveKey);
+  const selectedTab = overflowingTabs.find((tab) => tab.eventKey === localActiveKey);
   const tabTitle = selectedTab?.title ? selectedTab.title : defaultTitleText;
 
   const toggleMenu = () => {
-    setIsExpanded(prevIsExpanded => !prevIsExpanded);
+    setIsExpanded((prevIsExpanded) => !prevIsExpanded);
     setTimeout(() => {
       if (menuRef?.current) {
         const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');
@@ -111,7 +111,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
     </li>
   );
 
-  const tabs = overflowingTabs.map(tab => (
+  const tabs = overflowingTabs.map((tab) => (
     <MenuItem key={tab.eventKey} itemId={tab.eventKey} isSelected={localActiveKey === tab.eventKey}>
       {tab.title}
     </MenuItem>
@@ -119,7 +119,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
 
   const onTabSelect = (event: React.MouseEvent<HTMLElement, MouseEvent>, key: number | string) => {
     closeMenu();
-    const selectedTabRef = overflowingTabs.find(tab => tab.eventKey === key).tabContentRef;
+    const selectedTabRef = overflowingTabs.find((tab) => tab.eventKey === key).tabContentRef;
     handleTabClick(event, key, selectedTabRef);
   };
 
@@ -135,7 +135,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
     <React.Fragment>
       {overflowTab}
       <Popper
-        reference={overflowTabRef}
+        triggerRef={overflowTabRef}
         popper={overflowMenu}
         popperRef={menuRef}
         isVisible={isExpanded}

package/src/components/Tabs/examples/TabsHelp.tsx

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

package/src/components/Tabs/examples/TabsHelpAndClose.tsx

@@ -32,7 +32,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
         </div>
       }
       footerContent="Popover footer"
-      reference={popoverRef}
+      triggerRef={popoverRef}
     />
   );
 
@@ -68,7 +68,11 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
                 <TabAction aria-label={`Help for ${tab}`} ref={ref}>
                   <HelpIcon />
                 </TabAction>
-                <TabAction aria-label={`Close ${tab}`} onClick={e => onClose(e, index)} isDisabled={tabs.length === 1}>
+                <TabAction
+                  aria-label={`Close ${tab}`}
+                  onClick={(e) => onClose(e, index)}
+                  isDisabled={tabs.length === 1}
+                >
                   <TimesIcon />
                 </TabAction>
                 {helpPopover(`Help popover for ${tab}`, ref)}

package/src/components/Tabs/examples/TabsTooltipReactRef.tsx

@@ -55,7 +55,7 @@ export const TabsTooltipReactRef: React.FunctionComponent = () => {
       <Tooltip
         id="tooltip-ref1"
         content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support."
-        reference={tooltipRef}
+        triggerRef={tooltipRef}
       />
       <div style={{ marginTop: '20px' }}>
         <Checkbox

package/src/components/TimePicker/TimePicker.tsx

@@ -528,7 +528,9 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
                 <Popper
                   appendTo={calculatedAppendTo}
                   trigger={textInput}
+                  triggerRef={this.inputRef}
                   popper={menuContainer}
+                  popperRef={this.menuRef}
                   isVisible={isTimeOptionsOpen}
                   zIndex={zIndex}
                 />

package/src/components/Tooltip/Tooltip.tsx

@@ -35,23 +35,24 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
    */
   aria?: 'describedby' | 'labelledby' | 'none';
   /**
-   * Determines whether the tooltip is an aria-live region. If the reference prop is passed in the
+   * Determines whether the tooltip is an aria-live region. If the triggerRef prop is passed in the
    * default behavior is 'polite' in order to ensure the tooltip contents is announced to
    * assistive technologies. Otherwise the default behavior is 'off'.
    */
   'aria-live'?: 'off' | 'polite';
   /**
-   * The reference element to which the Tooltip is relatively placed to.
-   * If you cannot wrap the reference with the Tooltip, you can use the reference prop instead.
+   * The trigger reference element to which the Tooltip is relatively placed to.
+   * If you cannot wrap the element with the Tooltip, you can use the triggerRef prop instead.
    * Usage: <Tooltip><Button>Reference</Button></Tooltip>
    */
   children?: ReactElement<any>;
   /**
-   * The reference element to which the Tooltip is relatively placed to.
-   * If you can wrap the reference with the Tooltip, you can use the children prop instead.
-   * Usage: <Tooltip reference={() => document.getElementById('reference-element')} />
+   * The trigger reference element to which the Tooltip is relatively placed to.
+   * If you can wrap the element with the Tooltip, 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: <Tooltip triggerRef={() => document.getElementById('reference-element')} />
    */
-  reference?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
+  triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** Tooltip additional class */
   className?: string;
   /** Tooltip content */
@@ -158,8 +159,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   id = `pf-tooltip-${pfTooltipIdCounter++}`,
   children,
   animationDuration = 300,
-  reference,
-  'aria-live': ariaLive = reference ? 'polite' : 'off',
+  triggerRef,
+  'aria-live': ariaLive = triggerRef ? 'polite' : 'off',
   onTooltipHidden = () => {},
   ...rest
 }: TooltipProps) => {
@@ -174,11 +175,12 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
+  const popperRef = React.createRef<HTMLDivElement>();
 
   const prevExitDelayRef = React.useRef<number>();
 
   const clearTimeouts = (timeoutRefs: React.RefObject<any>[]) => {
-    timeoutRefs.forEach(ref => {
+    timeoutRefs.forEach((ref) => {
       if (ref.current) {
         clearTimeout(ref.current);
       }
@@ -274,6 +276,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
         opacity,
         transition: getOpacityTransition(animationDuration)
       }}
+      ref={popperRef}
       {...rest}
     >
       <TooltipArrow />
@@ -315,8 +318,9 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   return (
     <Popper
       trigger={aria !== 'none' && visible ? addAriaToTrigger() : children}
-      reference={reference}
+      triggerRef={triggerRef}
       popper={content}
+      popperRef={popperRef}
       popperMatchesTriggerWidth={false}
       appendTo={appendTo}
       isVisible={visible}

package/src/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -3,16 +3,18 @@ import { render } from '@testing-library/react';
 import { Tooltip } from '../Tooltip';
 
 test('tooltip renders', () => {
+  const ref = React.createRef<HTMLDivElement>();
   const { asFragment } = render(
     <Tooltip
       position="top"
+      triggerRef={ref}
       content={
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
         </div>
       }
     >
-      <div>Toggle tooltip</div>
+      <div ref={ref}>Toggle tooltip</div>
     </Tooltip>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -20,17 +22,19 @@ test('tooltip renders', () => {
 
 test('tooltip renders in strict mode', () => {
   const consoleError = jest.spyOn(console, 'error');
+  const ref = React.createRef<HTMLDivElement>();
   const { asFragment } = render(
     <React.StrictMode>
       <Tooltip
         position="top"
+        triggerRef={ref}
         content={
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
           </div>
         }
       >
-        <div>Toggle tooltip</div>
+        <div ref={ref}>Toggle tooltip</div>
       </Tooltip>
     </React.StrictMode>
   );

package/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -2,24 +2,16 @@
 
 exports[`tooltip renders 1`] = `
 <DocumentFragment>
-  <div
-    style="display: contents;"
-  >
-    <div>
-      Toggle tooltip
-    </div>
+  <div>
+    Toggle tooltip
   </div>
 </DocumentFragment>
 `;
 
 exports[`tooltip renders in strict mode 1`] = `
 <DocumentFragment>
-  <div
-    style="display: contents;"
-  >
-    <div>
-      Toggle tooltip
-    </div>
+  <div>
+    Toggle tooltip
   </div>
 </DocumentFragment>
 `;

package/src/components/Tooltip/examples/TooltipReactRef.tsx

@@ -15,7 +15,7 @@ export const TooltipReactRef: React.FunctionComponent = () => {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
           </div>
         }
-        reference={tooltipRef}
+        triggerRef={tooltipRef}
       />
     </div>
   );

package/src/components/Tooltip/examples/TooltipSelectorRef.tsx

@@ -13,7 +13,7 @@ export const TooltipSelectorRef: React.FunctionComponent = () => (
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
         </div>
       }
-      reference={() => document.getElementById('tooltip-selector') as HTMLButtonElement}
+      triggerRef={() => document.getElementById('tooltip-selector') as HTMLButtonElement}
     />
   </div>
 );

package/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx

@@ -41,7 +41,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     }
 
     if (selectedItems.includes(itemId)) {
-      setSelectedItems(selectedItems.filter(id => id !== itemId));
+      setSelectedItems(selectedItems.filter((id) => id !== itemId));
     } else {
       setSelectedItems([...selectedItems, itemId]);
     }
@@ -122,5 +122,14 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      popperMatchesTriggerWidth={false}
+    />
+  );
 };

package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -90,7 +90,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           id="1"
           isFavorited={favorites.includes('1')}
           to="#default-link2"
-          onClick={ev => ev.preventDefault()}
+          onClick={(ev) => ev.preventDefault()}
         >
           Application 2
         </MenuItem>
@@ -103,7 +103,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           itemId="2"
           id="2"
           isFavorited={favorites.includes('2')}
-          component={props => <Link {...props} to="#router-link" />}
+          component={(props) => <Link {...props} to="#router-link" />}
         >
           @reach/router Link
         </MenuItem>
@@ -113,7 +113,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           isFavorited={favorites.includes('3')}
           isExternalLink
           icon={<img src={pfIcon} />}
-          component={props => <Link {...props} to="#router-link2" />}
+          component={(props) => <Link {...props} to="#router-link2" />}
         >
           @reach/router Link with icon
         </MenuItem>
@@ -135,15 +135,15 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   const createFavorites = (favIds: string[]) => {
     const favorites: unknown[] = [];
 
-    menuItems.forEach(item => {
+    menuItems.forEach((item) => {
       if (item.type === MenuList) {
-        item.props.children.filter(child => {
+        item.props.children.filter((child) => {
           if (favIds.includes(child.props.itemId)) {
             favorites.push(child);
           }
         });
       } else if (item.type === MenuGroup) {
-        item.props.children.props.children.filter(child => {
+        item.props.children.props.children.filter((child) => {
           if (favIds.includes(child.props.itemId)) {
             favorites.push(child);
           }
@@ -164,11 +164,11 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     }
     let keepDivider = false;
     const filteredCopy = items
-      .map(group => {
+      .map((group) => {
         if (group.type === MenuGroup) {
           const filteredGroup = React.cloneElement(group, {
             children: React.cloneElement(group.props.children, {
-              children: group.props.children.props.children.filter(child => {
+              children: group.props.children.props.children.filter((child) => {
                 if (filteredIds.includes(child.props.itemId)) {
                   return child;
                 }
@@ -184,7 +184,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           }
         } else if (group.type === MenuList) {
           const filteredGroup = React.cloneElement(group, {
-            children: group.props.children.filter(child => {
+            children: group.props.children.filter((child) => {
               if (filteredIds.includes(child.props.itemId)) {
                 return child;
               }
@@ -202,7 +202,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           }
         }
       })
-      .filter(newGroup => newGroup);
+      .filter((newGroup) => newGroup);
 
     if (filteredCopy.length > 0) {
       const lastGroup = filteredCopy.pop();
@@ -222,8 +222,8 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
 
     const filteredIds =
       refFullOptions
-        ?.filter(item => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
-        .map(item => item.id) || [];
+        ?.filter((item) => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
+        .map((item) => item.id) || [];
     setFilteredIds(filteredIds);
   };
 
@@ -232,7 +232,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     if (actionId === 'fav') {
       const isFavorite = favorites.includes(itemId);
       if (isFavorite) {
-        setFavorites(favorites.filter(fav => fav !== itemId));
+        setFavorites(favorites.filter((fav) => fav !== itemId));
       } else {
         setFavorites([...favorites, itemId]);
       }
@@ -265,5 +265,14 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      popperMatchesTriggerWidth={false}
+    />
+  );
 };

package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -130,7 +130,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
     const filtered =
       searchInputValue === ''
         ? items
-        : items.filter(item => {
+        : items.filter((item) => {
             const str = typeof item === 'string' ? item : item.text;
             return str.toLowerCase().indexOf(searchInputValue.toLowerCase()) !== -1;
           });
@@ -198,5 +198,14 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       </MenuFooter>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      popperMatchesTriggerWidth={false}
+    />
+  );
 };

package/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx

@@ -109,5 +109,14 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      popperMatchesTriggerWidth={false}
+    />
+  );
 };

package/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx

@@ -247,5 +247,14 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      popperMatchesTriggerWidth={false}
+    />
+  );
 };

package/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx

@@ -133,7 +133,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
             itemId={0}
             to="#default-link0"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             My profile
           </MenuItem>
@@ -141,7 +141,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
             itemId={1}
             to="#default-link1"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             User management
           </MenuItem>
@@ -149,7 +149,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
             itemId={2}
             to="#default-link2"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             Logout
           </MenuItem>
@@ -163,7 +163,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
               itemId={0}
               to="#default-link0"
               // just for demo so that navigation is not triggered
-              onClick={event => event.preventDefault()}
+              onClick={(event) => event.preventDefault()}
             >
               Link
             </MenuItem>
@@ -173,7 +173,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
               isDisabled
               to="#default-link2"
               // just for demo so that navigation is not triggered
-              onClick={event => event.preventDefault()}
+              onClick={(event) => event.preventDefault()}
             >
               Disabled link
             </MenuItem>
@@ -228,7 +228,9 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
       <br />
       <Popper
         trigger={buildToggle()}
+        triggerRef={toggleRef}
         popper={menu}
+        popperRef={menuRef}
         isVisible={isOpen}
         popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
       />

package/src/demos/ComposableMenu/examples/ComposableFlyout.tsx

@@ -17,7 +17,7 @@ const FlyoutMenu: React.FunctionComponent<FlyoutMenuProps> = ({ depth, children
         <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`}>
           Next menu
         </MenuItem>
-        {Array.from(new Array(15 - depth), (x, i) => i + 1).map(j => (
+        {Array.from(new Array(15 - depth), (x, i) => i + 1).map((j) => (
           <MenuItem key={`${depth}-${j}`} itemId={`${depth}-${j}`}>
             Menu {depth} item {j}
           </MenuItem>
@@ -100,5 +100,14 @@ export const ComposableFlyout: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      popperMatchesTriggerWidth={false}
+    />
+  );
 };