@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

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

@@ -28,6 +28,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
   const [inputValue, setInputValue] = React.useState<string>('');
   const [menuItems, setMenuItems] = React.useState<MenuItemProps[]>(intitalMenuItems);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
   const [selected, setSelected] = React.useState<string[]>([]);
   const containerRef = React.useRef<HTMLDivElement>();
   const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
@@ -45,15 +46,24 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
           .includes(inputValue.toLowerCase())
       );
 
-      // When no options are found after filtering, display 'No results found'
+      // When no options are found after filtering, display 'No results found'.
       if (!newMenuItems.length) {
-        newMenuItems = [{ isDisabled: true, children: 'No results found' }];
+        newMenuItems = [{ isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isMenuOpen) {
+        setIsMenuOpen(true);
       }
     }
 
     setMenuItems(newMenuItems);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
   }, [inputValue]);
 
+  const focusOnInput = () => textInputRef.current?.focus();
+
   const handleMenuArrowKeys = (key: string) => {
     let indexToFocus;
 
@@ -77,6 +87,8 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
       }
 
       setFocusedItemIndex(indexToFocus);
+      const focusedItem = menuItems.filter(item => !item.isDisabled)[indexToFocus];
+      setActiveItem(`composable-multi-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
@@ -90,37 +102,50 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
       case 'Enter':
         if (!isMenuOpen) {
           setIsMenuOpen(prevIsOpen => !prevIsOpen);
-        } else {
+          // Only allow selection if the first item is a valid, selectable option
+        } else if (isMenuOpen && focusedItem.itemId !== 'no results') {
           onMenuSelect(focusedItem.itemId as string);
         }
         break;
       case 'Tab':
       case 'Escape':
         setIsMenuOpen(false);
+        setActiveItem(null);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
+        event.preventDefault();
         handleMenuArrowKeys(event.key);
         break;
-      default:
-        !isMenuOpen && setIsMenuOpen(true);
     }
   };
 
-  // Close the menu when a click occurs outside of the menu toggle content
-  const onDocumentClick = (event: MouseEvent) => {
-    if (
-      isMenuOpen &&
-      !menuToggleRef.current?.contains(event?.target as HTMLElement) &&
-      !menuRef?.current?.contains(event.target as Node)
-    ) {
+  // 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 =>
+      ref?.current?.contains(event?.target as HTMLElement)
+    );
+    if (isMenuOpen && !isValidClick) {
       setIsMenuOpen(false);
+      setActiveItem(null);
+    }
+  };
+
+  // Close the menu when focus is on a menu item and Escape or Tab is pressed
+  const onDocumentKeydown = (event: KeyboardEvent | undefined) => {
+    if (isMenuOpen && menuRef?.current?.contains(event?.target as HTMLElement)) {
+      if (event?.key === 'Escape') {
+        setIsMenuOpen(false);
+        focusOnInput();
+      } else if (event?.key === 'Tab') {
+        setIsMenuOpen(false);
+      }
     }
   };
 
   const toggleMenuOpen = () => {
     setIsMenuOpen(!isMenuOpen);
-    textInputRef.current?.focus();
+    focusOnInput();
   };
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
@@ -128,11 +153,14 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
   };
 
   const onMenuSelect = (itemId: string) => {
-    if (itemId) {
+    // 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]
       );
     }
+
+    focusOnInput();
   };
 
   const toggle = (
@@ -149,11 +177,15 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
           onClick={toggleMenuOpen}
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
+          id="multi-typeahead-select-input"
           autoComplete="off"
           innerRef={textInputRef}
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isMenuOpen}
+          aria-controls="composable-multi-typeahead-listbox"
         >
-          <ChipGroup>
+          <ChipGroup aria-label="Current filters">
             {selected.map((selection, index) => (
               <Chip
                 key={index}
@@ -190,11 +222,13 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
       id="multiple-typeahead-select-menu"
       onSelect={(_ev, itemId) => onMenuSelect(itemId?.toString() as string)}
       selected={selected}
+      role="listbox"
     >
       <MenuContent>
-        <MenuList>
+        <MenuList id="composable-multi-typeahead-listbox" isAriaMultiselectable>
           {menuItems.map((itemProps, index) => (
             <MenuItem
+              id={`composable-multi-typeahead-${itemProps.itemId.replace(' ', '-')}`}
               key={itemProps.itemId || itemProps.children}
               isFocused={focusedItemIndex === index}
               className={itemProps.className}
@@ -214,6 +248,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
         appendTo={containerRef.current}
         isVisible={isMenuOpen}
         onDocumentClick={onDocumentClick}
+        onDocumentKeyDown={onDocumentKeydown}
       />
     </div>
   );

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

@@ -81,16 +81,16 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
     <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={selectedItems}>
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+          <MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
             Debug
           </MenuItem>
-          <MenuItem hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+          <MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
             Info
           </MenuItem>
-          <MenuItem hasCheck itemId={2} isSelected={selectedItems.includes(2)}>
+          <MenuItem hasCheckbox itemId={2} isSelected={selectedItems.includes(2)}>
             Warn
           </MenuItem>
-          <MenuItem hasCheck isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
+          <MenuItem hasCheckbox isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
             Error
           </MenuItem>
         </MenuList>

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

@@ -243,7 +243,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
             <TreeView
               data={statusMapped}
               hasBadges
-              hasChecks
+              hasCheckboxes
               onCheck={(event, item) => onCheck(event, item, 'status')}
             />
           </PanelMainBody>
@@ -255,7 +255,12 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
             </Title>
           </PanelMainBody>
           <PanelMainBody style={{ padding: 0 }}>
-            <TreeView data={roleMapped} hasBadges hasChecks onCheck={(event, item) => onCheck(event, item, 'role')} />
+            <TreeView
+              data={roleMapped}
+              hasBadges
+              hasCheckboxes
+              onCheck={(event, item) => onCheck(event, item, 'role')}
+            />
           </PanelMainBody>
         </section>
       </PanelMain>

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

@@ -28,10 +28,12 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = React.useState<string>('');
   const [menuItems, setMenuItems] = React.useState<MenuItemProps[]>(intitalMenuItems);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
   const [isSelected, setIsSelected] = React.useState(false);
 
   const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
   const textInputRef = React.useRef<HTMLInputElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     let newMenuItems: MenuItemProps[] = intitalMenuItems;
@@ -46,23 +48,32 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
 
       // When no options are found after filtering, display 'No results found'
       if (!newMenuItems.length) {
-        newMenuItems = [{ isDisabled: true, children: 'No results found' }];
+        newMenuItems = [{ isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isMenuOpen) {
+        setIsMenuOpen(true);
       }
     }
 
     setMenuItems(newMenuItems);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
   }, [inputValue]);
 
-  const focusOnInput = () => menuToggleRef.current?.querySelector('input')?.focus();
+  const focusOnInput = () => textInputRef.current?.focus();
 
-  const onMenuSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
-    if (itemId) {
+  const onMenuSelect = (_event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
+    // Only allow selection if the item is a valid, selectable option
+    if (itemId && itemId !== 'no results') {
       setInputValue(itemId.toString());
       setIsSelected(true);
     }
 
     setIsMenuOpen(false);
     setFocusedItemIndex(null);
+    setActiveItem(null);
     focusOnInput();
   };
 
@@ -89,6 +100,8 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
+      const focusedItem = menuItems.filter(item => !item.isDisabled)[indexToFocus];
+      setActiveItem(`composable-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
@@ -100,33 +113,51 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
     switch (event.key) {
       // Select the first available option
       case 'Enter':
-        if (isMenuOpen) {
+        // Only allow selection if the first item is a valid, selectable option
+        if (isMenuOpen && focusedItem.itemId !== 'no results') {
           setInputValue(String(focusedItem.children));
           setIsSelected(true);
         }
 
         setIsMenuOpen(prevIsOpen => !prevIsOpen);
         setFocusedItemIndex(null);
+        setActiveItem(null);
         focusOnInput();
 
         break;
       case 'Tab':
       case 'Escape':
         setIsMenuOpen(false);
+        setActiveItem(null);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
+        event.preventDefault();
         handleMenuArrowKeys(event.key);
         break;
-      default:
-        !isMenuOpen && setIsMenuOpen(true);
     }
   };
 
-  // Close the menu when a click occurs outside of the menu toggle content
+  // Close the menu when a click occurs outside of the menu, toggle, or input
   const onDocumentClick = (event: MouseEvent | undefined) => {
-    if (!menuToggleRef.current?.contains(event?.target as HTMLElement)) {
+    const isValidClick = [menuRef, menuToggleRef, textInputRef].some(ref =>
+      ref?.current?.contains(event?.target as HTMLElement)
+    );
+    if (isMenuOpen && !isValidClick) {
       setIsMenuOpen(false);
+      setActiveItem(null);
+    }
+  };
+
+  // Close the menu when focus is on a menu item and Escape or Tab is pressed
+  const onDocumentKeydown = (event: KeyboardEvent | undefined) => {
+    if (isMenuOpen && menuRef?.current?.contains(event?.target as HTMLElement)) {
+      if (event?.key === 'Escape') {
+        setIsMenuOpen(false);
+        focusOnInput();
+      } else if (event?.key === 'Tab') {
+        setIsMenuOpen(false);
+      }
     }
   };
 
@@ -144,6 +175,8 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
     <Popper
       trigger={
         <MenuToggle
+          // Needed to append the menu closer to the toggle in DOM
+          id="temp-toggle-id"
           variant="typeahead"
           onClick={toggleMenuOpen}
           innerRef={menuToggleRef}
@@ -159,6 +192,10 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
               id="typeahead-select-input"
               autoComplete="off"
               innerRef={textInputRef}
+              {...(activeItem && { 'aria-activedescendant': activeItem })}
+              role="combobox"
+              isExpanded={isMenuOpen}
+              aria-controls="composable-typeahead-listbox"
             />
 
             <TextInputGroupUtilities>
@@ -172,15 +209,15 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
         </MenuToggle>
       }
       popper={
-        <Menu id="select-menu" onSelect={onMenuSelect} selected={isSelected && inputValue}>
+        <Menu role="listbox" ref={menuRef} id="select-menu" onSelect={onMenuSelect} selected={isSelected && inputValue}>
           <MenuContent>
-            <MenuList>
+            <MenuList id="composable-typeahead-listbox">
               {menuItems.map((itemProps, index) => (
                 <MenuItem
+                  id={`composable-typeahead-${itemProps.itemId.replace(' ', '-')}`}
                   key={itemProps.itemId || itemProps.children}
                   isFocused={focusedItemIndex === index}
                   className={itemProps.className}
-                  onClick={() => setIsSelected(true)}
                   {...itemProps}
                   ref={null}
                 />
@@ -191,6 +228,8 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
       }
       isVisible={isMenuOpen}
       onDocumentClick={onDocumentClick}
+      onDocumentKeyDown={onDocumentKeydown}
+      appendTo={() => document.getElementById('temp-toggle-id')}
     />
   );
 };

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

@@ -438,19 +438,19 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     >
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
             Bangalore
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Boston')} itemId="Boston">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Boston')} itemId="Boston">
             Boston
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Brno')} itemId="Brno">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Brno')} itemId="Brno">
             Brno
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
             Raleigh
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Westford')} itemId="Westford">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Westford')} itemId="Westford">
             Westford
           </MenuItem>
         </MenuList>
@@ -560,8 +560,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   // Set up pagination and toolbar
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Attribute search pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Attribute search pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}

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

@@ -307,19 +307,19 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     <Menu ref={menuRef} id="checkbox-select-menu" onSelect={onSelect} selected={selections}>
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck isSelected={selections.includes('Bangalore')} itemId="Bangalore">
+          <MenuItem hasCheckbox isSelected={selections.includes('Bangalore')} itemId="Bangalore">
             Bangalore
           </MenuItem>
-          <MenuItem hasCheck isSelected={selections.includes('Boston')} itemId="Boston">
+          <MenuItem hasCheckbox isSelected={selections.includes('Boston')} itemId="Boston">
             Boston
           </MenuItem>
-          <MenuItem hasCheck isSelected={selections.includes('Brno')} itemId="Brno">
+          <MenuItem hasCheckbox isSelected={selections.includes('Brno')} itemId="Brno">
             Brno
           </MenuItem>
-          <MenuItem hasCheck isSelected={selections.includes('Raleigh')} itemId="Raleigh">
+          <MenuItem hasCheckbox isSelected={selections.includes('Raleigh')} itemId="Raleigh">
             Raleigh
           </MenuItem>
-          <MenuItem hasCheck isSelected={selections.includes('Westford')} itemId="Westford">
+          <MenuItem hasCheckbox isSelected={selections.includes('Westford')} itemId="Westford">
             Westford
           </MenuItem>
         </MenuList>
@@ -336,8 +336,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   // Set up pagination
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Checkbox filter pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Checkbox filter pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}

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

@@ -339,36 +339,40 @@ export const FilterFaceted: React.FunctionComponent = () => {
       <MenuContent>
         <MenuList>
           <MenuGroup label="Status">
-            <MenuItem hasCheck isSelected={statusSelections.includes('Degraded')} itemId="Degraded">
+            <MenuItem hasCheckbox isSelected={statusSelections.includes('Degraded')} itemId="Degraded">
               Degraded
             </MenuItem>
-            <MenuItem hasCheck isSelected={statusSelections.includes('Down')} itemId="Down">
+            <MenuItem hasCheckbox isSelected={statusSelections.includes('Down')} itemId="Down">
               Down
             </MenuItem>
-            <MenuItem hasCheck isSelected={statusSelections.includes('Needs Maintenance')} itemId="Needs Maintenance">
+            <MenuItem
+              hasCheckbox
+              isSelected={statusSelections.includes('Needs Maintenance')}
+              itemId="Needs Maintenance"
+            >
               Needs Maintenance
             </MenuItem>
-            <MenuItem hasCheck isSelected={statusSelections.includes('Running')} itemId="Running">
+            <MenuItem hasCheckbox isSelected={statusSelections.includes('Running')} itemId="Running">
               Running
             </MenuItem>
-            <MenuItem hasCheck isSelected={statusSelections.includes('Stopped')} itemId="Stopped">
+            <MenuItem hasCheckbox isSelected={statusSelections.includes('Stopped')} itemId="Stopped">
               Stopped
             </MenuItem>
           </MenuGroup>
           <MenuGroup label="Location">
-            <MenuItem hasCheck isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
+            <MenuItem hasCheckbox isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
               Bangalore
             </MenuItem>
-            <MenuItem hasCheck isSelected={locationSelections.includes('Boston')} itemId="Boston">
+            <MenuItem hasCheckbox isSelected={locationSelections.includes('Boston')} itemId="Boston">
               Boston
             </MenuItem>
-            <MenuItem hasCheck isSelected={locationSelections.includes('Brno')} itemId="Brno">
+            <MenuItem hasCheckbox isSelected={locationSelections.includes('Brno')} itemId="Brno">
               Brno
             </MenuItem>
-            <MenuItem hasCheck isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
+            <MenuItem hasCheckbox isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
               Raleigh
             </MenuItem>
-            <MenuItem hasCheck isSelected={locationSelections.includes('Westford')} itemId="Westford">
+            <MenuItem hasCheckbox isSelected={locationSelections.includes('Westford')} itemId="Westford">
               Westford
             </MenuItem>
           </MenuGroup>
@@ -386,8 +390,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   // Set up pagination and toolbar
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Faceted filter group pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Faceted filter group pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}

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

@@ -410,19 +410,19 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     >
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
             Bangalore
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Boston')} itemId="Boston">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Boston')} itemId="Boston">
             Boston
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Brno')} itemId="Brno">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Brno')} itemId="Brno">
             Brno
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
             Raleigh
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Westford')} itemId="Westford">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Westford')} itemId="Westford">
             Westford
           </MenuItem>
         </MenuList>
@@ -444,8 +444,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   // Set up pagination and toolbar
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Mixed filter group pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Mixed filter group pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}

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

@@ -431,8 +431,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   // Set up pagination and toolbar
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Same select group pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Same select group pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}

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

@@ -253,8 +253,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
 
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Search filter pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Search filter pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}

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

@@ -330,8 +330,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   // Set up pagination
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Single select filter pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Single select filter pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}

package/src/demos/JumpLinks.md

@@ -46,15 +46,19 @@ ScrollspyH2 = () => {
     const masthead = document.getElementsByClassName('pf-c-masthead')[0];
     const offsetForPadding = 10;
 
-    getResizeObserver(masthead, () => {
-      if (isVertical) {
-        setOffsetHeight(masthead.offsetHeight + offsetForPadding);
-      } else {
-        // Append jump links nav height to the masthead height when value exists.
-        const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
-        jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
-      }
-    });
+    getResizeObserver(
+      masthead,
+      () => {
+        if (isVertical) {
+          setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+        } else {
+          // Append jump links nav height to the masthead height when value exists.
+          const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+          jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+        }
+      },
+      true
+    );
   }, [isVertical]);
 
   return (
@@ -132,7 +136,6 @@ ScrollspyH2 = () => {
 };
 ```
 
-
 ### With drawer
 
 This demo shows how jump links can be used in combination with a drawer.

package/src/demos/Tabs.md

@@ -383,7 +383,6 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <TabContentBody>
             <Tabs
               isSecondary
-              hasSecondaryBorderBottom
               activeKey={activeTabKeySecondary}
               onSelect={handleTabClickSecondary}
               usePageInsets

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -32,9 +32,13 @@ export const JumpLinksWithDrawer = () => {
     const masthead = document.getElementsByClassName('pf-c-masthead')[0];
     const drawerToggleSection = document.getElementById('drawer-toggle');
 
-    getResizeObserver(masthead, () => {
-      setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
-    });
+    getResizeObserver(
+      masthead,
+      () => {
+        setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
+      },
+      true
+    );
   }, []);
 
   const onCloseClick = () => {