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

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

@@ -33,16 +33,15 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
   const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
   const textInputRef = React.useRef<HTMLInputElement>();
   const menuRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<MenuToggleElement>(null);
 
   React.useEffect(() => {
     let newMenuItems: MenuItemProps[] = intitalMenuItems;
 
     // Filter menu items based on the text input value when one exists
     if (inputValue) {
-      newMenuItems = intitalMenuItems.filter(menuItem =>
-        String(menuItem.children)
-          .toLowerCase()
-          .includes(inputValue.toLowerCase())
+      newMenuItems = intitalMenuItems.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())
       );
 
       // When no options are found after filtering, display 'No results found'.
@@ -86,13 +85,13 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
       }
 
       setFocusedItemIndex(indexToFocus);
-      const focusedItem = menuItems.filter(item => !item.isDisabled)[indexToFocus];
+      const focusedItem = menuItems.filter((item) => !item.isDisabled)[indexToFocus];
       setActiveItem(`composable-multi-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = menuItems.filter(menuItem => !menuItem.isDisabled);
+    const enabledMenuItems = menuItems.filter((menuItem) => !menuItem.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
@@ -100,7 +99,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
       // Select the first available option
       case 'Enter':
         if (!isMenuOpen) {
-          setIsMenuOpen(prevIsOpen => !prevIsOpen);
+          setIsMenuOpen((prevIsOpen) => !prevIsOpen);
           // Only allow selection if the first item is a valid, selectable option
         } else if (isMenuOpen && focusedItem.itemId !== 'no results') {
           onMenuSelect(focusedItem.itemId as string);
@@ -121,7 +120,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
 
   // Close the menu when a click occurs outside of the menu, toggle, or input.
   const onDocumentClick = (event: MouseEvent | undefined) => {
-    const isValidClick = [menuRef, menuToggleRef, textInputRef].some(ref =>
+    const isValidClick = [menuRef, menuToggleRef, textInputRef].some((ref) =>
       ref?.current?.contains(event?.target as HTMLElement)
     );
     if (isMenuOpen && !isValidClick) {
@@ -155,7 +154,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
     // Only allow selection if the item is a valid, selectable option
     if (itemId && itemId !== 'no results') {
       setSelected(
-        selected.includes(itemId) ? selected.filter(selection => selection !== itemId) : [...selected, itemId]
+        selected.includes(itemId) ? selected.filter((selection) => selection !== itemId) : [...selected, itemId]
       );
     }
 
@@ -164,6 +163,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
 
   const toggle = (
     <MenuToggle
+      ref={toggleRef}
       variant="typeahead"
       onClick={toggleMenuOpen}
       innerRef={menuToggleRef}
@@ -188,7 +188,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
             {selected.map((selection, index) => (
               <Chip
                 key={index}
-                onClick={ev => {
+                onClick={(ev) => {
                   ev.stopPropagation();
                   onMenuSelect(selection);
                 }}
@@ -242,7 +242,9 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
   return (
     <Popper
       trigger={toggle}
+      triggerRef={toggleRef}
       popper={menu}
+      popperRef={menuRef}
       isVisible={isMenuOpen}
       onDocumentClick={onDocumentClick}
       onDocumentKeyDown={onDocumentKeydown}

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

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

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

@@ -8,7 +8,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
   const menuRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = React.useCallback(
-    event => {
+    (event) => {
       if (menuRef.current) {
         if (isOpen && menuRef.current.contains(event.target as Node)) {
           if (event.key === 'Escape' || event.key === 'Tab') {
@@ -22,7 +22,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
   );
 
   const handleClickOutside = React.useCallback(
-    event => {
+    (event) => {
       if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
         setIsOpen(false);
       }
@@ -56,7 +56,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
     }
 
     if (selectedItems.includes(itemId)) {
-      setSelectedItems(selectedItems.filter(id => id !== itemId));
+      setSelectedItems(selectedItems.filter((id) => id !== itemId));
     } else {
       setSelectedItems([...selectedItems, itemId]);
     }
@@ -97,5 +97,5 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

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

@@ -55,7 +55,7 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       <MenuContent>
         <MenuList>
           <MenuItem itemId={0}>Action</MenuItem>
-          <MenuItem itemId={1} to="#default-link2" onClick={ev => ev.preventDefault()}>
+          <MenuItem itemId={1} to="#default-link2" onClick={(ev) => ev.preventDefault()}>
             Link
           </MenuItem>
           <MenuItem isDisabled>Disabled Action</MenuItem>
@@ -66,5 +66,5 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

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

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

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

@@ -86,14 +86,14 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
     }
   ];
   // Helper functions for tree
-  const isChecked = (dataItem: TreeViewDataItem) => checkedItems.some(item => item.id === dataItem.id);
+  const isChecked = (dataItem: TreeViewDataItem) => checkedItems.some((item) => item.id === dataItem.id);
   const areAllDescendantsChecked = (dataItem: TreeViewDataItem) =>
-    dataItem.children ? dataItem.children.every(child => areAllDescendantsChecked(child)) : isChecked(dataItem);
+    dataItem.children ? dataItem.children.every((child) => areAllDescendantsChecked(child)) : isChecked(dataItem);
   const areSomeDescendantsChecked = (dataItem: TreeViewDataItem) =>
-    dataItem.children ? dataItem.children.some(child => areSomeDescendantsChecked(child)) : isChecked(dataItem);
+    dataItem.children ? dataItem.children.some((child) => areSomeDescendantsChecked(child)) : isChecked(dataItem);
   const flattenTree = (tree: TreeViewDataItem[]) => {
     let result: TreeViewDataItem[] = [];
-    tree.forEach(item => {
+    tree.forEach((item) => {
       result.push(item);
       if (item.children) {
         result = result.concat(flattenTree(item.children));
@@ -134,8 +134,8 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
     if (item.children) {
       return (
         (item.children = item.children
-          .map(opt => Object.assign({}, opt))
-          .filter(child => filterItems(child, checkedItem))).length > 0
+          .map((opt) => Object.assign({}, opt))
+          .filter((child) => filterItems(child, checkedItem))).length > 0
       );
     }
   };
@@ -155,12 +155,14 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
         break;
     }
 
-    const checkedItemTree = options.map(opt => Object.assign({}, opt)).filter(item => filterItems(item, treeViewItem));
+    const checkedItemTree = options
+      .map((opt) => Object.assign({}, opt))
+      .filter((item) => filterItems(item, treeViewItem));
     const flatCheckedItems = flattenTree(checkedItemTree);
-    setCheckedItems(prevCheckedItems =>
+    setCheckedItems((prevCheckedItems) =>
       checked
-        ? prevCheckedItems.concat(flatCheckedItems.filter(item => !prevCheckedItems.some(i => i.id === item.id)))
-        : prevCheckedItems.filter(item => !flatCheckedItems.some(i => i.id === item.id))
+        ? prevCheckedItems.concat(flatCheckedItems.filter((item) => !prevCheckedItems.some((i) => i.id === item.id)))
+        : prevCheckedItems.filter((item) => !flatCheckedItems.some((i) => i.id === item.id))
     );
   };
 
@@ -265,5 +267,14 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
       </PanelMain>
     </Panel>
   );
-  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/ComposableTypeaheadSelect.tsx

@@ -34,16 +34,15 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
   const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
   const textInputRef = React.useRef<HTMLInputElement>();
   const menuRef = React.useRef<HTMLDivElement>(null);
+  const triggerRef = React.useRef<MenuToggleElement>(null);
 
   React.useEffect(() => {
     let newMenuItems: MenuItemProps[] = intitalMenuItems;
 
     // Filter menu items based on the text input value when one exists
     if (inputValue) {
-      newMenuItems = intitalMenuItems.filter(menuItem =>
-        String(menuItem.children)
-          .toLowerCase()
-          .includes(inputValue.toLowerCase())
+      newMenuItems = intitalMenuItems.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())
       );
 
       // When no options are found after filtering, display 'No results found'
@@ -100,13 +99,13 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
-      const focusedItem = menuItems.filter(item => !item.isDisabled)[indexToFocus];
+      const focusedItem = menuItems.filter((item) => !item.isDisabled)[indexToFocus];
       setActiveItem(`composable-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = menuItems.filter(menuItem => !menuItem.isDisabled);
+    const enabledMenuItems = menuItems.filter((menuItem) => !menuItem.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
@@ -119,7 +118,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
           setIsSelected(true);
         }
 
-        setIsMenuOpen(prevIsOpen => !prevIsOpen);
+        setIsMenuOpen((prevIsOpen) => !prevIsOpen);
         setFocusedItemIndex(null);
         setActiveItem(null);
         focusOnInput();
@@ -140,7 +139,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
 
   // Close the menu when a click occurs outside of the menu, toggle, or input
   const onDocumentClick = (event: MouseEvent | undefined) => {
-    const isValidClick = [menuRef, menuToggleRef, textInputRef].some(ref =>
+    const isValidClick = [menuRef, menuToggleRef, textInputRef].some((ref) =>
       ref?.current?.contains(event?.target as HTMLElement)
     );
     if (isMenuOpen && !isValidClick) {
@@ -162,7 +161,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
   };
 
   const toggleMenuOpen = () => {
-    setIsMenuOpen(prevIsOpen => !prevIsOpen);
+    setIsMenuOpen((prevIsOpen) => !prevIsOpen);
     textInputRef.current?.focus();
   };
 
@@ -175,6 +174,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
     <Popper
       trigger={
         <MenuToggle
+          ref={triggerRef}
           variant="typeahead"
           onClick={toggleMenuOpen}
           innerRef={menuToggleRef}
@@ -206,6 +206,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
           </TextInputGroup>
         </MenuToggle>
       }
+      triggerRef={triggerRef}
       popper={
         <Menu role="listbox" ref={menuRef} id="select-menu" onSelect={onMenuSelect} selected={isSelected && inputValue}>
           <MenuContent>
@@ -224,6 +225,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
           </MenuContent>
         </Menu>
       }
+      popperRef={menuRef}
       isVisible={isMenuOpen}
       onDocumentClick={onDocumentClick}
       onDocumentKeyDown={onDocumentKeydown}

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -101,12 +101,12 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -123,7 +123,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -250,7 +250,9 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -351,7 +353,9 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <div ref={statusContainerRef}>
       <Popper
         trigger={statusToggle}
+        triggerRef={statusToggleRef}
         popper={statusMenu}
+        popperRef={statusMenuRef}
         appendTo={statusContainerRef.current || undefined}
         isVisible={isStatusMenuOpen}
       />
@@ -408,7 +412,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
 
     setLocationSelections(
       locationSelections.includes(itemStr)
-        ? locationSelections.filter(selection => selection !== itemStr)
+        ? locationSelections.filter((selection) => selection !== itemStr)
         : [itemStr, ...locationSelections]
     );
   }
@@ -462,7 +466,9 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <div ref={locationContainerRef}>
       <Popper
         trigger={locationToggle}
+        triggerRef={locationToggleRef}
         popper={locationMenu}
+        popperRef={locationMenuRef}
         appendTo={locationContainerRef.current || undefined}
         isVisible={isLocationMenuOpen}
       />
@@ -550,7 +556,9 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     <div ref={attributeContainerRef}>
       <Popper
         trigger={attributeToggle}
+        triggerRef={attributeToggleRef}
         popper={attributeMenu}
+        popperRef={attributeMenuRef}
         appendTo={attributeContainerRef.current || undefined}
         isVisible={isAttributeMenuOpen}
       />

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -59,7 +59,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       return true;
     }
 
-    return selections.some(searchValue => {
+    return selections.some((searchValue) => {
       let input: RegExp;
       try {
         input = new RegExp(searchValue, 'i');
@@ -78,12 +78,12 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []);
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []);
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -100,7 +100,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -226,7 +226,9 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -282,7 +284,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
 
     const itemStr = itemId.toString();
     setSelections(
-      selections.includes(itemStr) ? selections.filter(selection => selection !== itemStr) : [itemStr, ...selections]
+      selections.includes(itemStr) ? selections.filter((selection) => selection !== itemStr) : [itemStr, ...selections]
     );
   }
 
@@ -329,7 +331,14 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
 
   const select = (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
+      <Popper
+        trigger={toggle}
+        triggerRef={toggleRef}
+        popper={menu}
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+      />
     </div>
   );
 

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -84,12 +84,12 @@ export const FilterFaceted: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -106,7 +106,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -233,7 +233,9 @@ export const FilterFaceted: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -293,13 +295,13 @@ export const FilterFaceted: React.FunctionComponent = () => {
     if (category === 'status') {
       setStatusSelections(
         statusSelections.includes(itemStr)
-          ? statusSelections.filter(selection => selection !== itemStr)
+          ? statusSelections.filter((selection) => selection !== itemStr)
           : [itemStr, ...statusSelections]
       );
     } else {
       setLocationSelections(
         locationSelections.includes(itemStr)
-          ? locationSelections.filter(selection => selection !== itemStr)
+          ? locationSelections.filter((selection) => selection !== itemStr)
           : [itemStr, ...locationSelections]
       );
     }
@@ -307,9 +309,9 @@ export const FilterFaceted: React.FunctionComponent = () => {
 
   const onChipDelete = (category: string, chip: string) => {
     if (category === 'status') {
-      setStatusSelections(statusSelections.filter(selection => selection !== chip));
+      setStatusSelections(statusSelections.filter((selection) => selection !== chip));
     } else {
-      setLocationSelections(locationSelections.filter(selection => selection !== chip));
+      setLocationSelections(locationSelections.filter((selection) => selection !== chip));
     }
   };
 
@@ -383,7 +385,14 @@ export const FilterFaceted: React.FunctionComponent = () => {
 
   const select = (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
+      <Popper
+        trigger={toggle}
+        triggerRef={toggleRef}
+        popper={menu}
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+      />
     </div>
   );
 

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -81,12 +81,12 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -103,7 +103,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -230,7 +230,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -322,7 +324,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={statusContainerRef}>
       <Popper
         trigger={statusToggle}
+        triggerRef={statusToggleRef}
         popper={statusMenu}
+        popperRef={statusMenuRef}
         appendTo={statusContainerRef.current || undefined}
         isVisible={isStatusMenuOpen}
       />
@@ -379,7 +383,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
 
     setLocationSelections(
       locationSelections.includes(itemStr)
-        ? locationSelections.filter(selection => selection !== itemStr)
+        ? locationSelections.filter((selection) => selection !== itemStr)
         : [itemStr, ...locationSelections]
     );
   }
@@ -434,7 +438,9 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     <div ref={locationContainerRef}>
       <Popper
         trigger={locationToggle}
+        triggerRef={locationToggleRef}
         popper={locationMenu}
+        popperRef={locationMenuRef}
         appendTo={locationContainerRef.current || undefined}
         isVisible={isLocationMenuOpen}
       />

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -82,12 +82,12 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
   const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
-    setSelectedRepoNames(prevSelected => {
-      const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name);
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+    setSelectedRepoNames(isSelecting ? filteredRepos.map((r) => r.name) : []); // Selecting all should only select all currently filtered rows
   const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
@@ -104,7 +104,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
         numberSelected > 0
           ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
           : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting));
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
     } else {
       setRepoSelected(repo, isSelecting);
     }
@@ -231,7 +231,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
+        triggerRef={bulkSelectToggleRef}
         popper={bulkSelectMenu}
+        popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
@@ -324,7 +326,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={statusContainerRef}>
       <Popper
         trigger={statusToggle}
+        triggerRef={statusToggleRef}
         popper={statusMenu}
+        popperRef={statusMenuRef}
         appendTo={statusContainerRef.current || undefined}
         isVisible={isStatusMenuOpen}
       />
@@ -421,7 +425,9 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     <div ref={locationContainerRef}>
       <Popper
         trigger={locationToggle}
+        triggerRef={locationToggleRef}
         popper={locationMenu}
+        popperRef={locationMenuRef}
         appendTo={locationContainerRef.current || undefined}
         isVisible={isLocationMenuOpen}
       />