@patternfly/react-core 5.0.0-alpha.49 → 5.0.0-alpha.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.49",
+  "version": "5.0.0-alpha.50",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ab1d27353a3aed7cc3c2b83c4278edc66a63c2de"
+  "gitHead": "c61ae62dda93e9b27afc23874d7219d10eac353d"
 }

package/src/components/index.ts

@@ -4,7 +4,6 @@ export * from './Accordion';
 export * from './ActionList';
 export * from './Alert';
 export * from './AlertGroup';
-export * from './ApplicationLauncher';
 export * from './Avatar';
 export * from './BackToTop';
 export * from './Backdrop';

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

@@ -50,7 +50,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)'
         );
         firstElement && (firstElement as HTMLElement).focus();
-        setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])')));
+        setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])>*:first-child')));
       }
     }, 0);
     setIsOpen(!isOpen);

package/src/demos/Masthead.md

@@ -7,6 +7,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import {
@@ -16,6 +17,8 @@ DropdownItem as DropdownItemDeprecated,
 DropdownToggle,
 KebabToggle
 } from '@patternfly/react-core/deprecated';
+import pfIcon from './Card/pf-logo-small.svg';
+import { Link } from '@reach/router';
 
 ## Demos
 

package/src/demos/examples/DashboardHeader.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
   Avatar,
   Brand,
   Button,
@@ -16,7 +14,7 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
-  PageToggleButton
+  PageToggleButton,
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
@@ -40,7 +38,6 @@ export default class DashboardHeader extends React.Component {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
       isFullKebabDropdownOpen: false,
-      isAppLauncherOpen: false,
       activeItem: 0
     };
 
@@ -79,22 +76,10 @@ export default class DashboardHeader extends React.Component {
         isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen
       });
     };
-
-    this.onAppLauncherToggle = (_event, isAppLauncherOpen) => {
-      this.setState({
-        isAppLauncherOpen
-      });
-    };
-
-    this.onAppLauncherSelect = () => {
-      this.setState({
-        isAppLauncherOpen: !this.state.isAppLauncherOpen
-      });
-    };
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, isAppLauncherOpen } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen } = this.state;
     const { notificationBadge } = this.props;
 
     const kebabDropdownItems = [
@@ -133,15 +118,6 @@ export default class DashboardHeader extends React.Component {
       </DropdownGroupDeprecated>
     ];
 
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>
-    ];
-
     const headerToolbar = (
       <Toolbar id="toolbar" isFullHeight isStatic>
         <ToolbarContent>
@@ -163,15 +139,6 @@ export default class DashboardHeader extends React.Component {
               </ToolbarItem>
             )}
             <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
-              <ToolbarItem>
-                <ApplicationLauncher
-                  onSelect={this.onAppLauncherSelect}
-                  onToggle={this.onAppLauncherToggle}
-                  isOpen={isAppLauncherOpen}
-                  items={appLauncherItems}
-                  toggleId="dashboard-header-app-launcher"
-                />
-              </ToolbarItem>
               <ToolbarItem>
                 <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
               </ToolbarItem>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
   Avatar,
   Brand,
   Breadcrumb,
@@ -18,6 +16,11 @@ import {
   MastheadContent,
   MastheadMain,
   MastheadToggle,
+  Menu,
+  MenuContent,
+  MenuList,
+  MenuItem,
+  MenuToggle,
   Nav,
   NavItem,
   NavList,
@@ -26,13 +29,18 @@ import {
   PageSectionVariants,
   PageSidebar,
   PageToggleButton,
+  Popper,
   SkipToContent,
   Text,
   TextContent,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
+  MenuGroup,
+  MenuInput,
+  SearchInput,
+  Tooltip
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
@@ -41,12 +49,15 @@ import {
   DropdownToggle,
   KebabToggle
 } from '@patternfly/react-core/deprecated';
+import { Link } from '@reach/router';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import pfIcon from './pf-logo-small.svg';
 
 interface NavOnSelectProps {
   groupId: number | string;
@@ -59,9 +70,15 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isAppLauncherOpen, setIsAppLauncherOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState(1);
 
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
+  const [favorites, setFavorites] = React.useState<string[]>([]);
+  const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
   const onNavSelect = (selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
@@ -90,14 +107,249 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
-    setIsAppLauncherOpen(isOpen);
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
+      if (event.key === 'Escape') {
+        setIsOpen(!isOpen);
+        toggleRef.current?.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  const onToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (menuRef.current) {
+        const firstElement = menuRef.current.querySelector(
+          'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)'
+        );
+        firstElement && (firstElement as HTMLElement).focus();
+        setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])>*:first-child')));
+      }
+    }, 0);
+    setIsOpen(!isOpen);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+
+  const toggle = (
+    <MenuToggle
+      aria-label="Toggle"
+      ref={toggleRef}
+      variant="plain"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={{ width: 'auto' }}
+    >
+      <ThIcon />
+    </MenuToggle>
+  );
+
+  const menuItems = [
+    <MenuGroup key="group1" label="Group 1">
+      <MenuList>
+        <MenuItem itemId="0" id="0" isFavorited={favorites.includes('0')}>
+          Application 1
+        </MenuItem>
+        <MenuItem
+          itemId="1"
+          id="1"
+          isFavorited={favorites.includes('1')}
+          to="#default-link2"
+          onClick={(ev) => ev.preventDefault()}
+        >
+          Application 2
+        </MenuItem>
+      </MenuList>
+    </MenuGroup>,
+    <Divider key="group1-divider" />,
+    <MenuGroup key="group2" label="Group 2">
+      <MenuList>
+        <MenuItem
+          itemId="2"
+          id="2"
+          isFavorited={favorites.includes('2')}
+          component={(props) => <Link {...props} to="#router-link" />}
+        >
+          @reach/router Link
+        </MenuItem>
+        <MenuItem
+          itemId="3"
+          id="3"
+          isFavorited={favorites.includes('3')}
+          isExternalLink
+          icon={<img src={pfIcon} />}
+          component={(props) => <Link {...props} to="#router-link2" />}
+        >
+          @reach/router Link with icon
+        </MenuItem>
+      </MenuList>
+    </MenuGroup>,
+    <Divider key="group2-divider" />,
+    <MenuList key="other-items">
+      <MenuItem key="tooltip-app" isFavorited={favorites.includes('4')} itemId="4" id="4">
+        <Tooltip content={<div>Launch Application 3</div>} position="right">
+          <span>Application 3 with tooltip</span>
+        </Tooltip>
+      </MenuItem>
+      <MenuItem key="disabled-app" itemId="5" id="5" isDisabled>
+        Unavailable Application
+      </MenuItem>
+    </MenuList>
+  ];
+
+  const createFavorites = (favIds: string[]) => {
+    const favorites: unknown[] = [];
+
+    menuItems.forEach((item) => {
+      if (item.type === MenuList) {
+        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) => {
+          if (favIds.includes(child.props.itemId)) {
+            favorites.push(child);
+          }
+        });
+      } else {
+        if (favIds.includes(item.props.itemId)) {
+          favorites.push(item);
+        }
+      }
+    });
+
+    return favorites;
+  };
+
+  const filterItems = (items: any[], filteredIds: string[]) => {
+    if (filteredIds.length === 1 && filteredIds[0] === '*') {
+      return items;
+    }
+    let keepDivider = false;
+    const filteredCopy = items
+      .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) => {
+                if (filteredIds.includes(child.props.itemId)) {
+                  return child;
+                }
+              })
+            })
+          });
+          const filteredList = filteredGroup.props.children;
+          if (filteredList.props.children.length > 0) {
+            keepDivider = true;
+            return filteredGroup;
+          } else {
+            keepDivider = false;
+          }
+        } else if (group.type === MenuList) {
+          const filteredGroup = React.cloneElement(group, {
+            children: group.props.children.filter((child) => {
+              if (filteredIds.includes(child.props.itemId)) {
+                return child;
+              }
+            })
+          });
+          if (filteredGroup.props.children.length > 0) {
+            keepDivider = true;
+            return filteredGroup;
+          } else {
+            keepDivider = false;
+          }
+        } else {
+          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.itemId)) {
+            return group;
+          }
+        }
+      })
+      .filter((newGroup) => newGroup);
+
+    if (filteredCopy.length > 0) {
+      const lastGroup = filteredCopy.pop();
+      if (lastGroup.type !== Divider) {
+        filteredCopy.push(lastGroup);
+      }
+    }
+
+    return filteredCopy;
   };
 
-  const onAppLauncherSelect = () => {
-    setIsAppLauncherOpen(!isAppLauncherOpen);
+  const onTextChange = (textValue: string) => {
+    if (textValue === '') {
+      setFilteredIds(['*']);
+      return;
+    }
+
+    const filteredIds =
+      refFullOptions
+        ?.filter((item) => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
+        .map((item) => item.id) || [];
+    setFilteredIds(filteredIds);
   };
 
+  const onFavorite = (event: any, itemId: string, actionId: string) => {
+    event.stopPropagation();
+    if (actionId === 'fav') {
+      const isFavorite = favorites.includes(itemId);
+      if (isFavorite) {
+        setFavorites(favorites.filter((fav) => fav !== itemId));
+      } else {
+        setFavorites([...favorites, itemId]);
+      }
+    }
+  };
+
+  const filteredFavorites = filterItems(createFavorites(favorites), filteredIds);
+  const filteredItems = filterItems(menuItems, filteredIds);
+  if (filteredItems.length === 0) {
+    filteredItems.push(<MenuItem key="no-items">No results found</MenuItem>);
+  }
+
+  const menu = (
+    // eslint-disable-next-line no-console
+    <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
+      <MenuInput>
+        <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
+      </MenuInput>
+      <Divider />
+      <MenuContent>
+        {filteredFavorites.length > 0 && (
+          <React.Fragment>
+            <MenuGroup key="favorites-group" label="Favorites">
+              <MenuList>{filteredFavorites}</MenuList>
+            </MenuGroup>
+            <Divider key="favorites-divider" />
+          </React.Fragment>
+        )}
+        {filteredItems}
+      </MenuContent>
+    </Menu>
+  );
+
   const dashboardBreadcrumb = (
     <Breadcrumb>
       <BreadcrumbItem>Section home</BreadcrumbItem>
@@ -144,16 +396,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
     </DropdownGroupDeprecated>
   ];
-
-  const appLauncherItems = [
-    <ApplicationLauncherItem key="application_1a" href="#">
-      Application 1 (anchor link)
-    </ApplicationLauncherItem>,
-    <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-      Application 2 (button with onClick)
-    </ApplicationLauncherItem>
-  ];
-
+  
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
@@ -167,13 +410,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           </ToolbarItem>
           <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
-              <ApplicationLauncher
-                onSelect={onAppLauncherSelect}
-                onToggle={onAppLauncherToggle}
-                isOpen={isAppLauncherOpen}
-                items={appLauncherItems}
-                toggleId="dashboard-header-app-launcher"
-              />
+            <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
   Avatar,
   Brand,
   Breadcrumb,
@@ -32,7 +30,7 @@ import {
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
-  ToolbarItem
+  ToolbarItem,
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
@@ -59,7 +57,6 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isAppLauncherOpen, setIsAppLauncherOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState(1);
 
   const onNavSelect = (selectedItem: NavOnSelectProps) => {
@@ -90,14 +87,6 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
-    setIsAppLauncherOpen(isOpen);
-  };
-
-  const onAppLauncherSelect = () => {
-    setIsAppLauncherOpen(!isAppLauncherOpen);
-  };
-
   const dashboardBreadcrumb = (
     <Breadcrumb>
       <BreadcrumbItem>Section home</BreadcrumbItem>
@@ -145,15 +134,6 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     </DropdownGroupDeprecated>
   ];
 
-  const appLauncherItems = [
-    <ApplicationLauncherItem key="application_1a" href="#">
-      Application 1 (anchor link)
-    </ApplicationLauncherItem>,
-    <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-      Application 2 (button with onClick)
-    </ApplicationLauncherItem>
-  ];
-
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
@@ -166,15 +146,6 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
           <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
-            <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
-              <ApplicationLauncher
-                onSelect={onAppLauncherSelect}
-                onToggle={onAppLauncherToggle}
-                isOpen={isAppLauncherOpen}
-                items={appLauncherItems}
-                toggleId="dashboard-header-app-launcher"
-              />
-            </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
   Avatar,
   Brand,
   Breadcrumb,
@@ -59,7 +57,6 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isAppLauncherOpen, setIsAppLauncherOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState(1);
 
   const onNavSelect = (selectedItem: NavOnSelectProps) => {
@@ -90,14 +87,6 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
-    setIsAppLauncherOpen(isOpen);
-  };
-
-  const onAppLauncherSelect = () => {
-    setIsAppLauncherOpen(!isAppLauncherOpen);
-  };
-
   const dashboardBreadcrumb = (
     <Breadcrumb>
       <BreadcrumbItem>Section home</BreadcrumbItem>
@@ -145,15 +134,6 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     </DropdownGroupDeprecated>
   ];
 
-  const appLauncherItems = [
-    <ApplicationLauncherItem key="application_1a" href="#">
-      Application 1 (anchor link)
-    </ApplicationLauncherItem>,
-    <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-      Application 2 (button with onClick)
-    </ApplicationLauncherItem>
-  ];
-
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
@@ -166,15 +146,6 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
           <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
-            <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
-              <ApplicationLauncher
-                onSelect={onAppLauncherSelect}
-                onToggle={onAppLauncherToggle}
-                isOpen={isAppLauncherOpen}
-                items={appLauncherItems}
-                toggleId="dashboard-header-app-launcher"
-              />
-            </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
   Avatar,
   Brand,
   Breadcrumb,
@@ -61,7 +59,6 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isAppLauncherOpen, setIsAppLauncherOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState(1);
 
   const onNavSelect = (selectedItem: NavOnSelectProps) => {
@@ -92,14 +89,6 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
-    setIsAppLauncherOpen(isOpen);
-  };
-
-  const onAppLauncherSelect = () => {
-    setIsAppLauncherOpen(!isAppLauncherOpen);
-  };
-
   const kebabDropdownItems = [
     <DropdownItemDeprecated key="settings">
       <CogIcon /> Settings
@@ -136,15 +125,6 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     </DropdownItemDeprecated>
   ];
 
-  const appLauncherItems = [
-    <ApplicationLauncherItem key="application_1a" href="#">
-      Application 1 (anchor link)
-    </ApplicationLauncherItem>,
-    <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-      Application 2 (button with onClick)
-    </ApplicationLauncherItem>
-  ];
-
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
@@ -157,15 +137,6 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
           </ToolbarItem>
           <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
-            <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
-              <ApplicationLauncher
-                onSelect={onAppLauncherSelect}
-                onToggle={onAppLauncherToggle}
-                isOpen={isAppLauncherOpen}
-                items={appLauncherItems}
-                toggleId="dashboard-header-app-launcher"
-              />
-            </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
             </ToolbarItem>