@patternfly/react-core 4.275.0 → 4.276.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.275.0",
+  "version": "4.276.1",
   "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",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "86b7081cba20d2a2073aec0fcecda31aad54c5bc"
+  "gitHead": "fadcd39108e98e73cb899387f4a82f490807443a"
 }

package/src/components/Accordion/AccordionContent.tsx

@@ -17,6 +17,8 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   isFixed?: boolean;
   /** Adds accessible text to the Accordion content */
   'aria-label'?: string;
+  /** Id of the controlling accordion toggle to label the content. */
+  'aria-labelledby'?: string;
   /** Component to use as content container */
   component?: React.ElementType;
   /** Flag indicating content is custom. Expanded content Body wrapper will be removed from children.  This allows multiple bodies to be rendered as content. */
@@ -31,29 +33,49 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   isFixed = false,
   isCustomContent = false,
   'aria-label': ariaLabel = '',
+  'aria-labelledby': ariaLabelledby,
   component,
   ...props
-}: AccordionContentProps) => (
-  <AccordionContext.Consumer>
-    {({ ContentContainer }) => {
-      const Container = component || ContentContainer;
-      return (
-        <Container
-          id={id}
-          className={css(
-            styles.accordionExpandedContent,
-            isFixed && styles.modifiers.fixed,
-            !isHidden && styles.modifiers.expanded,
-            className
-          )}
-          hidden={isHidden}
-          aria-label={ariaLabel}
-          {...props}
-        >
-          {isCustomContent ? children : <AccordionExpandedContentBody>{children}</AccordionExpandedContentBody>}
-        </Container>
-      );
-    }}
-  </AccordionContext.Consumer>
-);
+}: AccordionContentProps) => {
+  const [hasScrollbar, setHasScrollbar] = React.useState(false);
+  const containerRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (containerRef?.current && isFixed && !isHidden) {
+      const { offsetHeight, scrollHeight } = containerRef.current;
+
+      setHasScrollbar(offsetHeight < scrollHeight);
+    } else if (!isFixed) {
+      setHasScrollbar(false);
+    }
+  }, [containerRef, isFixed, isHidden]);
+
+  return (
+    <AccordionContext.Consumer>
+      {({ ContentContainer }) => {
+        const Container = component || ContentContainer;
+        return (
+          <Container
+            ref={containerRef}
+            id={id}
+            className={css(
+              styles.accordionExpandedContent,
+              isFixed && styles.modifiers.fixed,
+              !isHidden && styles.modifiers.expanded,
+              className
+            )}
+            hidden={isHidden}
+            {...(ariaLabel && { 'aria-label': ariaLabel })}
+            {...(ariaLabelledby && { 'aria-labelledby': ariaLabelledby })}
+            {...(hasScrollbar && { tabIndex: 0 })}
+            {...(hasScrollbar && Container === 'div' && { role: 'region' })}
+            {...props}
+          >
+            {isCustomContent ? children : <AccordionExpandedContentBody>{children}</AccordionExpandedContentBody>}
+          </Container>
+        );
+      }}
+    </AccordionContext.Consumer>
+  );
+};
 AccordionContent.displayName = 'AccordionContent';

package/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -59,6 +59,19 @@ test('Renders with the passed aria label', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Accordion content');
 });
 
+test('Renders with the passed aria-labelledby', () => {
+  render(
+    <>
+      <div id="accordion-label1">Accordion content</div>
+      <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+        <AccordionContent aria-labelledby="accordion-label1">Test</AccordionContent>
+      </AccordionContext.Provider>
+    </>
+  );
+
+  expect(screen.getByRole('heading')).toHaveAccessibleName('Accordion content');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(
     <>
@@ -151,7 +164,7 @@ test('Renders unhidden and with pf-m-expanded by default', () => {
     </AccordionContext.Provider>
   );
 
-  const contentContainer = screen.getByRole('heading')
+  const contentContainer = screen.getByRole('heading');
 
   expect(contentContainer).not.toHaveAttribute('hidden');
   expect(contentContainer).toHaveClass('pf-m-expanded');
@@ -164,7 +177,7 @@ test('Renders aria-hidden and without pf-m-expanded when isHidden is true', () =
     </AccordionContext.Provider>
   );
 
-  const contentContainer = screen.getByRole('heading', { hidden: true })
+  const contentContainer = screen.getByRole('heading', { hidden: true });
 
   expect(contentContainer).toHaveAttribute('hidden');
   expect(contentContainer).not.toHaveClass('pf-m-expanded');

package/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -63,7 +63,21 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex2-expand4" isHidden={!expanded.includes('ex2-toggle4')} isFixed>
+        <AccordionContent
+          aria-labelledby="ex2-toggle4"
+          id="ex2-expand4"
+          isHidden={!expanded.includes('ex2-toggle4')}
+          isFixed
+        >
+          <p>
+            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
+            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
+            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
+            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
+            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
+          </p>
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere

package/src/components/Menu/Menu.tsx

@@ -40,9 +40,14 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   /** @beta Array of menus that are drilled in */
   drilledInMenus?: string[];
   /** @beta Callback for drilling into a submenu */
-  onDrillIn?: (fromItemId: string, toItemId: string, itemId: string) => void;
+  onDrillIn?: (
+    event: React.KeyboardEvent | React.MouseEvent,
+    fromItemId: string,
+    toItemId: string,
+    itemId: string
+  ) => void;
   /** @beta Callback for drilling out of a submenu */
-  onDrillOut?: (toItemId: string, itemId: string) => void;
+  onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
   /** @beta Callback for collecting menu heights */
   onGetMenuHeight?: (menuId: string, height: number) => void;
   /** @beta ID of parent menu for drilldown menus */

package/src/components/Menu/MenuContext.ts

@@ -9,8 +9,13 @@ export const MenuContext = React.createContext<{
   selected?: any | any[];
   drilldownItemPath?: string[];
   drilledInMenus?: string[];
-  onDrillIn?: (fromItemId: string, toItemId: string, itemId: string) => void;
-  onDrillOut?: (toItemId: string, itemId: string) => void;
+  onDrillIn?: (
+    event: React.KeyboardEvent | React.MouseEvent,
+    fromItemId: string,
+    toItemId: string,
+    itemId: string
+  ) => void;
+  onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
   onGetMenuHeight?: (menuId: string, height: number) => void;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;

package/src/components/Menu/MenuItem.tsx

@@ -224,12 +224,13 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     onClick && onClick(event);
   };
   const _isOnPath = (isOnPath && isOnPath) || (drilldownItemPath && drilldownItemPath.includes(itemId)) || false;
-  let _drill: () => void;
+  let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
   if (direction) {
     if (direction === 'down') {
-      _drill = () =>
+      drill = event =>
         onDrillIn &&
         onDrillIn(
+          event,
           menuId,
           typeof drilldownMenu === 'function'
             ? (drilldownMenu() as any).props.id
@@ -237,7 +238,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           itemId
         );
     } else {
-      _drill = () => onDrillOut && onDrillOut(parentMenu, itemId);
+      drill = event => onDrillOut && onDrillOut(event, parentMenu, itemId);
     }
   }
   let additionalProps = {} as any;
@@ -318,9 +319,9 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             {...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
             ref={innerRef}
             {...(!hasCheck && {
-              onClick: (event: any) => {
+              onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
                 onItemSelect(event, onSelect);
-                _drill && _drill();
+                drill && drill(event);
                 flyoutMenu && handleFlyout(event);
               }
             })}

package/src/components/Menu/examples/Menu.md

@@ -18,114 +18,173 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 
 ## Examples
 
-### Basic
+### Basic menus
+
+A menu may contain multiple variations of `<MenuItem>` components. The following example shows a few different states of menu items, where they may:
+
+- Use the `itemId` property to link to callbacks. In this example, the `onSelect` property logs information to the console when a menu item is selected. In practice, specific actions can be linked to `onSelect` callbacks.
+- Use the `to` property to direct users to other resources or webpages after selecting a menu item, and the `onClick` property to pass in a callback for specific menu items.
+- Use the `isDisabled` property to disable a menu item. 
+- Use the `isPlain` property to remove the outer box shadow and style the menu plainly instead. 
 
 ```ts file="MenuBasic.tsx"
 ```
 
 ### Danger menu item
 
+To indicate that a `<MenuItem>` is connected to a potentially destructive action, use the `isDanger` property. The "Delete" item in the following example demonstrates how danger items look.
+
 ```ts file="MenuDangerMenuItem.tsx"
 ```
 
 ### With icons
 
+Use the `icon` property to add a familiar icon before a `<MenuItem>` to accelerate text label recognition.
+
 ```ts file="MenuWithIcons.tsx"
 ```
 
-### With checkbox
+### With actions
+
+To connect a menu item to an action icon, add a `<MenuItemAction>` to a `<MenuItem>`, and use the `icon` property to load an easily recognizable icon.  
 
-```ts file="./MenuWithCheckbox.tsx"
-```
+To trigger an action when any menu action icon is selected, pass a callback to the `onActionClick` property of the `<Menu>`. The following example logs to the console any time any action icon is selected. 
 
-### Filtering with search input
+To trigger an action when a specific item's action icon is selected, pass in the `onClick` property to that `<MenuItemAction>`. The following example logs "clicked on code icon" to the console when the "code" icon is selected. 
 
-```ts file="MenuFilteringWithSearchInput.tsx"
+```ts file="MenuWithActions.tsx"
 ```
 
 ### With links
 
+Use the `to` property to add a link to a `<MenuItem>` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it.
+
 ```ts file="MenuWithLinks.tsx"
 ```
 
-### With separator(s)
+### With descriptions
 
-```ts file="MenuWithSeparators.tsx"
+Use the `description` property to add short descriptive text below any menu item that needs additional context. 
+
+```ts file="MenuWithDescription.tsx"
 ```
 
-### With titled groups
+### Item checkbox
 
-```ts file="MenuWithTitledGroups.tsx"
+Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
+
+```ts file="./MenuWithCheckbox.tsx" isBeta
 ```
 
-### With description
+### Menu footer
 
-```ts file="MenuWithDescription.tsx"
+Add a `<MenuFooter>` that contains separate, but related actions at the bottom of a menu.
+
+```ts file="MenuWithFooter.tsx"
 ```
 
-### With actions
+### Separated items
 
-```ts file="MenuWithActions.tsx"
+Use a [divider](/components/divider) to visually separate `<MenuContent>`. Use the `component` property to specify the type of divider component to use. 
+
+```ts file="MenuWithSeparators.tsx"
+```
+
+### Titled groups of items
+
+Add a `<MenuGroup>` to organize `<MenuContent>` and use the `label` property to title a group of menu items. Use the `labelHeadingLevel` property to assign a heading level to the menu group label. 
+
+```ts file="MenuWithTitledGroups.tsx"
 ```
 
 ### With favorites
 
+The following menu example allows users to favorite menu items, an action that duplicates a menu item and places it in a separate group at the top of the menu. The `isFavorited` property identifies items that a user has favorited.
+
 ```ts file="MenuWithFavorites.tsx"
 ```
 
-### Option single select
+### Filtering with search input
+
+A [search input](/components/search-input) component can be placed within `<MenuInput>` to render a search input at the top of the menu. In the following example, the `onChange` property of the text input is passed a callback that filters menu items as a user types.
+
+```ts file="MenuFilteringWithSearchInput.tsx"
+```
+
+### Option single select menu
+
+The following example demonstrates a single option select menu that persists a selected menu item. Use the `selected` property on the `<Menu>` to label a selected item with a checkmark. You can also use the `isSelected` property on a `<MenuItem>` to indicate that it is selected.
 
 ```ts file="MenuOptionSingleSelect.tsx"
 ```
 
-### Option multi select
+### Option multi select menu
+
+To persist multiple selections that a user makes, use a multiple option select menu. To enable multi select, pass an array containing each selected `itemId` to the `selected` property.
 
 ```ts file="MenuOptionMultiSelect.tsx"
 ```
 
-### With drilldown
+### Scrollable menus
 
-```ts file="./MenuWithDrilldown.tsx" isBeta
+Use the `isScrollable` property to make a long `<Menu>` scrollable and visually condensed.
+
+```ts file="MenuScrollable.tsx"
 ```
 
-### With drilldown - initial drill in state
+### Scrollable menu with custom height
 
-To render an initially drilled in menu, the `menuDrilledIn`, `drilldownPath`, and `activeMenu` states must be set to an initial state. The `menuHeights` state must also be set, defining the height of the root menu. The `setHeight` function passed into the `onGetMenuHeight` property must also account for updating heights, other than the root menu, as menus drill in and out of view.
+Adjust the visual size of a scrollable menu by using the `menuHeight` property within `<MenuContent>`. This example adjusts the height to 200px.
 
-```ts file="./MenuWithDrilldownInitialState.tsx" isBeta
+```ts file="MenuScrollableCustomMenuHeight.tsx"
 ```
 
-### With drilldown - submenu functions
+### With view more
 
-```ts file="./MenuWithDrilldownSubmenuFunctions.tsx" isBeta
-```
+If you want to initially render only a certain number of menu items within a large menu, you can add a "view more" menu item with a callback passed into its `onClick` property that will render additional menu items.
 
-### With drilldown breadcrumbs
+In this example, 3 additional menu items are revealed each time the "view more" option is selected, with a loading icon simulating a network call to fetch more items. After all items are visible, the "view more" link disappears.
 
-```ts file="MenuWithDrilldownBreadcrumbs.tsx" isBeta
+```ts file="MenuWithViewMore.tsx"
 ```
 
-### With drilldown and inline filter
+### With drilldown
 
-```ts file="MenuFilterDrilldown.tsx"
-```
+Use a drilldown menu to contain different levels of menu items. When a parent menu item (an item that has a submenu of children) is selected, the menu is replaced with the children items. 
 
-### Scrollable
+- To indicate that a menu contains a drilldown, use the `containsDrilldown` property.
+- To indicate the path of drilled-in menu item ids, use the `drilldownItemPath` property. 
+- Pass in an array of drilled-in menus with the `drilledInMenus` property.
+- Use the `onDrillIn` and `onDrillOut` properties to contain callbacks for drilling into and drilling out of a submenu, respectively. 
+- To account for updated heights as menus drill in and out of use, use the `onGetMenuHeight` property. When starting from a drilled-in state, the `onGetMenuHeight` property must define the height of the root menu.
 
-```ts file="MenuScrollable.tsx"
+```ts file="./MenuWithDrilldown.tsx" isBeta
 ```
 
-### Scrollable with custom menu height
+### Initially drilled-in menu
 
-```ts file="MenuScrollableCustomMenuHeight.tsx"
+To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus`, and `activeMenu` properties must be set to default values.
+
+```ts file="./MenuWithDrilldownInitialState.tsx" isBeta
 ```
 
-### With footer
+### With drilldown - submenu functions
 
-```ts file="MenuWithFooter.tsx"
+For added flexibility with large menus, you may create a menu by passing a function to `drilldownMenu`. This approach allows you to create menu items dynamically, rather than creating everything up front.
+
+```ts file="./MenuWithDrilldownSubmenuFunctions.tsx" isBeta
 ```
 
-### With view more
+### With drilldown breadcrumbs
 
-```ts file="MenuWithViewMore.tsx"
+Use [breadcrumbs](/components/breadcrumb) when a drilldown menu has more than 2 levels to offer users better navigation.
+
+To control the height of a menu, use the `maxMenuHeight` property. Selecting the "Set max menu height" checkbox in the following example sets the menu height to "100px" and makes the menu scrollable.
+
+```ts file="MenuWithDrilldownBreadcrumbs.tsx" isBeta
 ```
+
+### With drilldown and inline filter
+
+```ts file="MenuFilterDrilldown.tsx"
+```

package/src/components/Menu/examples/MenuFilterDrilldown.tsx

@@ -16,13 +16,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<any>({});
   const [activeMenu, setActiveMenu] = React.useState<string>('filter_drilldown-rootMenu');
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
   };
 
-  const drillOut = (toMenuId: string) => {
+  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
     const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
     const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
     setMenuDrilledIn(menuDrilledInSansLast);

package/src/components/Menu/examples/MenuWithDrilldown.tsx

@@ -11,13 +11,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<any>({});
   const [activeMenu, setActiveMenu] = React.useState<string>('drilldown-rootMenu');
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
   };
 
-  const drillOut = (toMenuId: string) => {
+  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
     const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
     const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
     setMenuDrilledIn(menuDrilledInSansLast);

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -52,7 +52,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     setWithMaxMenuHeight(checked);
   };
 
-  const drillOut = (toMenuId: string, fromPathId: string, breadcrumb: JSX.Element | null) => {
+  const drillOut = (
+    _event: React.KeyboardEvent<Element> | MouseEvent | React.MouseEvent<any, MouseEvent>,
+    toMenuId: string,
+    fromPathId: string,
+    breadcrumb: JSX.Element | null
+  ) => {
     setMenuDrilledIn(prevMenuDrilledIn => {
       const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
       return prevMenuDrilledIn.slice(0, indexOfMenuId);
@@ -71,7 +76,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     }
   };
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
@@ -79,7 +89,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const startRolloutBreadcrumb = (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Start rollout</BreadcrumbHeading>
@@ -88,7 +101,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const appGroupingBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
@@ -104,8 +120,8 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-start"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={() =>
-                drillOut('breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
+              onClick={event =>
+                drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
               }
             >
               Start rollout
@@ -119,7 +135,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const labelsBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
@@ -135,7 +154,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-start"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={() => drillOut('breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)}
+              onClick={event =>
+                drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
+              }
             >
               Start rollout
             </DropdownItem>
@@ -148,7 +169,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const pauseRolloutsBreadcrumb = (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Pause rollouts</BreadcrumbHeading>
@@ -157,7 +181,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
@@ -173,7 +200,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-pause"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
+              onClick={event =>
+                drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
+              }
             >
               Pause rollouts
             </DropdownItem>
@@ -186,7 +215,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
@@ -202,7 +234,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-pause"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
+              onClick={event =>
+                drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
+              }
             >
               Pause rollouts
             </DropdownItem>
@@ -215,7 +249,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const addStorageBreadcrumb = (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:storage', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Add storage</BreadcrumbHeading>