@patternfly/react-core 5.1.0 → 5.1.1-prerelease.10

package/src/components/Toolbar/examples/Toolbar.md

@@ -14,6 +14,12 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 ## Examples
 
+### TEST - remove before merging
+
+```ts file="./Test.tsx"
+
+```
+
 ### Toolbar items
 
 A toolbar can contain multiple toolbar items, like filters and buttons.
@@ -28,7 +34,7 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
 
-Items are spaced “16px” apart by default. To adjust the size of the space between items, use the `spacer` property of each `<ToolbarItem>`. You can set the `spacer` value at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".  Available `spacer` values include "spacerNone", "spacerSm", "spacerMd", or "spacerLg" into each breakpoint. 
+Items are spaced “16px” apart by default. To adjust the size of the space between items, use the `spacer` property of each `<ToolbarItem>`. You can set the `spacer` value at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl". Available `spacer` values include "spacerNone", "spacerSm", "spacerMd", or "spacerLg" into each breakpoint.
 
 ```ts file="./ToolbarSpacers.tsx"
 
@@ -54,27 +60,28 @@ To adjust a toolbar’s inset, use the `inset` property. You can set the inset v
 
 ### Sticky toolbar
 
-To lock a toolbar and prevent it  from scrolling with other content, use a sticky toolbar. 
+To lock a toolbar and prevent it from scrolling with other content, use a sticky toolbar.
 
 In the following example, toggle the "is toolbar sticky" checkbox to see the difference between a sticky and non-sticky toolbar.
 
 ```ts file="./ToolbarSticky.tsx"
+
 ```
 
 ### With groups of items
 
-You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together. 
+You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together.
 
 Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the [examples with toggle groups and filters](/components/toolbar#examples-with-toggle-groups-and-filters).
 
 ```ts file="./ToolbarGroups.tsx"
 
 ```
+
 ## Examples with toggle groups and filters
 
 The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.
 
-
 ### Component managed toggle groups
 
 A toggle group allows you to collapse a set of items into an overlay panel at a certain breakpoint. For example, when a toggle group contains filter controls, its contents will collapse into an overlay panel when the toolbar adapts to a change in the viewport size. The contents can be toggled by selecting the filter icon in the overlay panel.
@@ -102,7 +109,6 @@ You can add filters to a toolbar to let users filter the content that a toolbar
 
 The `<ToolbarFilter>` component expects applied filters and a delete chip handler to be passed in as properties. Pass in a `deleteChipGroup` property to close the entire chip group. Once close, the rendering of chips will be handled responsively by the toolbar.
 
-
 ```ts file="./ToolbarWithFilters.tsx"
 
 ```
@@ -120,5 +126,5 @@ To customize the chip groups generated by toolbar filters, use the `customChipGr
 When all of a toolbar's required elements cannot fit in a single line, you can split toolbar items into multiple rows.
 
 ```ts file="./ToolbarStacked.tsx"
-```
 
+```

package/src/components/Toolbar/examples/ToolbarSticky.tsx

@@ -5,7 +5,7 @@ export const ToolbarSticky: React.FunctionComponent = () => {
   const [isSticky, setIsSticky] = React.useState(true);
   const [showEvenOnly, setShowEvenOnly] = React.useState(true);
   const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
-  const numbers = showEvenOnly ? array.filter(number => number % 2 === 0) : array;
+  const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
 
   return (
     <React.Fragment>
@@ -26,12 +26,17 @@ export const ToolbarSticky: React.FunctionComponent = () => {
           </ToolbarContent>
         </Toolbar>
         <ul>
-          {numbers.map(number => (
+          {numbers.map((number) => (
             <li key={number}>{`item ${number}`}</li>
           ))}
         </ul>
       </div>
-      <Checkbox label="Is toolbar sticky" isChecked={isSticky} onChange={(_event, checked) => setIsSticky(checked)} id="isStickyCheckbox" />
+      <Checkbox
+        label="Is toolbar sticky"
+        isChecked={isSticky}
+        onChange={(_event, checked) => setIsSticky(checked)}
+        id="isStickyCheckbox"
+      />
     </React.Fragment>
   );
 };

package/src/components/Toolbar/index.ts

@@ -1,6 +1,7 @@
 export * from './Toolbar';
 export * from './ToolbarContent';
 export * from './ToolbarExpandIconWrapper';
+export * from './ToolbarExpandableContent';
 export * from './ToolbarGroup';
 export * from './ToolbarItem';
 export * from './ToolbarFilter';

package/src/components/Tooltip/Tooltip.tsx

@@ -7,7 +7,7 @@ import { TooltipArrow } from './TooltipArrow';
 import { KeyTypes } from '../../helpers/constants';
 import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
 import { ReactElement } from 'react';
-import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
+import { Popper } from '../../helpers/Popper/Popper';
 
 export enum TooltipPosition {
   auto = 'auto',
@@ -174,30 +174,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const triggerOnClick = trigger.includes('click');
   const triggerManually = trigger === 'manual';
   const [visible, setVisible] = React.useState(false);
-  const [opacity, setOpacity] = React.useState(0);
-  const transitionTimerRef = React.useRef(null);
-  const showTimerRef = React.useRef(null);
-  const hideTimerRef = React.useRef(null);
   const popperRef = React.createRef<HTMLDivElement>();
 
-  const prevExitDelayRef = React.useRef<number>();
-
-  const clearTimeouts = (timeoutRefs: React.RefObject<any>[]) => {
-    timeoutRefs.forEach((ref) => {
-      if (ref.current) {
-        clearTimeout(ref.current);
-      }
-    });
-  };
-
-  // Cancel all timers on unmount
-  React.useEffect(
-    () => () => {
-      clearTimeouts([transitionTimerRef, hideTimerRef, showTimerRef]);
-    },
-    []
-  );
-
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (!triggerManually) {
       if (event.key === KeyTypes.Escape && visible) {
@@ -222,36 +200,11 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     }
   }, [isVisible]);
 
-  React.useEffect(() => {
-    if (prevExitDelayRef.current < exitDelay) {
-      clearTimeouts([transitionTimerRef, hideTimerRef]);
-      hideTimerRef.current = setTimeout(() => {
-        setOpacity(0);
-        transitionTimerRef.current = setTimeout(() => {
-          setVisible(false);
-          onTooltipHidden();
-        }, animationDuration);
-      }, exitDelay);
-    }
-    prevExitDelayRef.current = exitDelay;
-  }, [exitDelay]);
-
   const show = () => {
-    clearTimeouts([transitionTimerRef, hideTimerRef]);
-    showTimerRef.current = setTimeout(() => {
-      setVisible(true);
-      setOpacity(1);
-    }, entryDelay);
+    setVisible(true);
   };
   const hide = () => {
-    clearTimeouts([showTimerRef]);
-    hideTimerRef.current = setTimeout(() => {
-      setOpacity(0);
-      transitionTimerRef.current = setTimeout(() => {
-        setVisible(false);
-        onTooltipHidden();
-      }, animationDuration);
-    }, exitDelay);
+    setVisible(false);
   };
   const positionModifiers = {
     top: styles.modifiers.top,
@@ -275,9 +228,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       role="tooltip"
       id={id}
       style={{
-        maxWidth: hasCustomMaxWidth ? maxWidth : null,
-        opacity,
-        transition: getOpacityTransition(animationDuration)
+        maxWidth: hasCustomMaxWidth ? maxWidth : null
       }}
       ref={popperRef}
       {...rest}
@@ -342,6 +293,10 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       enableFlip={enableFlip}
       zIndex={zIndex}
       flipBehavior={flipBehavior}
+      animationDuration={animationDuration}
+      entryDelay={entryDelay}
+      exitDelay={exitDelay}
+      onHidden={onTooltipHidden}
     />
   );
 };

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

@@ -1,43 +1,206 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Tooltip } from '../Tooltip';
+import userEvent from '@testing-library/user-event';
+import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 
-test('tooltip renders', () => {
-  const ref = React.createRef<HTMLDivElement>();
-  const { asFragment } = render(
-    <Tooltip
-      position="top"
-      triggerRef={ref}
-      content={
-        <div>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-        </div>
-      }
-    >
-      <div ref={ref}>Toggle tooltip</div>
+jest.mock('../../../helpers/Popper/Popper');
+
+test('Renders with class name pf-v5-c-tooltip by default', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveClass(styles.tooltip);
+});
+
+test('Renders with custom class names provided via prop', async () => {
+  render(<Tooltip isVisible className="test-class" content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveClass('test-class');
+});
+
+test('Renders with aria-live of off by default when triggerRef is not passed', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveAttribute('aria-live', 'off');
+});
+
+test('Renders with aria-live of polite by default when triggerRef is passed', async () => {
+  const triggerRef = React.createRef();
+  render(<Tooltip triggerRef={triggerRef} isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveAttribute('aria-live', 'polite');
+});
+
+test('Renders with value passed to aria-live prop', async () => {
+  render(<Tooltip aria-live="polite" isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveAttribute('aria-live', 'polite');
+});
+
+test('Renders with value passed to id prop', async () => {
+  render(<Tooltip id="custom-id" isVisible content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveAttribute('id', 'custom-id');
+});
+
+test('Renders with maxWidth styling applied when maxWidth is passed', async () => {
+  render(<Tooltip isVisible maxWidth="100px" content="Test content" />);
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toHaveStyle('max-width: 100px');
+});
+
+test('Renders with aria-describedby on trigger by default', async () => {
+  render(
+    <Tooltip id="trigger-with-aria" isVisible content="Test content">
+      <button>Toggle</button>
+    </Tooltip>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(screen.getByRole('button')).toHaveAccessibleDescription('Test content');
+});
+
+test('Renders with aria-labelledby on trigger when aria="labelledby" is passed', async () => {
+  render(
+    <Tooltip id="trigger-with-aria" aria="labelledby" isVisible content="Test content">
+      <button>Toggle</button>
     </Tooltip>
   );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('tooltip renders in strict mode', () => {
-  const consoleError = jest.spyOn(console, 'error');
-  const ref = React.createRef<HTMLDivElement>();
-  const { asFragment } = render(
-    <React.StrictMode>
-      <Tooltip
-        position="top"
-        triggerRef={ref}
-        content={
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-          </div>
-        }
-      >
-        <div ref={ref}>Toggle tooltip</div>
+
+  await screen.findByRole('tooltip');
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test content');
+});
+
+test('Renders without aria-labelledby or aria-describedby on trigger when aria="none" is passed', async () => {
+  render(
+    <Tooltip id="trigger-with-aria" aria="none" isVisible content="Test content">
+      <button>Toggle</button>
+    </Tooltip>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(screen.getByRole('button')).not.toHaveAccessibleName('Test content');
+  expect(screen.getByRole('button')).not.toHaveAccessibleDescription('Test content');
+});
+
+test('Does not call onTooltipHidden before tooltip is hidden', async () => {
+  const onTooltipHiddenMock = jest.fn();
+  const user = userEvent.setup();
+
+  const TooltipCallback = () => {
+    const [isVisible, setIsVisible] = React.useState(false);
+
+    return (
+      <Tooltip trigger="manual" isVisible={isVisible} onTooltipHidden={onTooltipHiddenMock} content="Test content">
+        <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
       </Tooltip>
-    </React.StrictMode>
+    );
+  };
+  render(<TooltipCallback />);
+
+  await user.click(screen.getByRole('button'));
+  await screen.findByRole('tooltip');
+  expect(onTooltipHiddenMock).not.toHaveBeenCalled();
+});
+
+test.skip('Calls onTooltipHidden when tooltip is hidden', async () => {
+  const onTooltipHiddenMock = jest.fn();
+  const user = userEvent.setup();
+
+  const TooltipCallback = () => {
+    const [isVisible, setIsVisible] = React.useState(true);
+
+    return (
+      <Tooltip trigger="manual" isVisible={isVisible} onTooltipHidden={onTooltipHiddenMock} content="Test content">
+        <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
+      </Tooltip>
+    );
+  };
+  render(<TooltipCallback />);
+
+  await screen.findByRole('tooltip');
+  await user.click(screen.getByRole('button'));
+  await screen.findByText('isVisible: false');
+  expect(onTooltipHiddenMock).toHaveBeenCalled();
+});
+
+test('Does not pass isVisible to Popper by default', async () => {
+  render(<Tooltip content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('isVisible: false');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes isVisible to Popper', async () => {
+  render(<Tooltip isVisible content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('isVisible: true');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes zIndex to Popper', async () => {
+  render(<Tooltip zIndex={10} content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('zIndex: 10');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes enableFlip to Popper', async () => {
+  render(<Tooltip enableFlip content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('enableFlip: true');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes position as placement to Popper', async () => {
+  render(<Tooltip position="left-start" content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('placement: left-start');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes appendTo to Popper', async () => {
+  render(<Tooltip appendTo={() => document.body} content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('appendTo: () => document.body');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes distance to Popper', async () => {
+  render(<Tooltip distance={5} content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('distance: 5');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes flipBehavior to Popper', async () => {
+  render(<Tooltip flipBehavior="flip" content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('flipBehavior: flip');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Passes minWidth to Popper', async () => {
+  render(<Tooltip minWidth="100px" content="Test content" />);
+
+  const contentPassedToPopper = await screen.findByText('minWidth: 100px');
+  expect(contentPassedToPopper).toBeVisible();
+});
+
+test('Matches snapshot', async () => {
+  render(
+    <Tooltip id="custom-id" isVisible isContentLeftAligned content="Test content">
+      <button>Trigger</button>
+    </Tooltip>
   );
-  expect(consoleError).not.toHaveBeenCalled();
-  expect(asFragment()).toMatchSnapshot();
+
+  const tooltip = await screen.findByRole('tooltip');
+  expect(tooltip).toMatchSnapshot();
 });

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TooltipArrow } from '../TooltipArrow';
+import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
+
+test('Renders without children', () => {
+  render(<TooltipArrow data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-tooltip__arrow by default', () => {
+  render(<TooltipArrow data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toHaveClass(styles.tooltipArrow);
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<TooltipArrow className="test-class" data-testid="tooltipArrow" />);
+
+  expect(screen.getByTestId('tooltipArrow')).toHaveClass('test-class');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TooltipArrow data-testid="tooltipArrow" />);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TooltipContent } from '../TooltipContent';
+import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
+
+test('Renders with children', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-tooltip__content by default', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass(styles.tooltipContent);
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<TooltipContent className="test-class">Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass('test-class');
+});
+
+test('Does not render with class pf-m-text-align-left when isLeftAligned is not passed', () => {
+  render(<TooltipContent>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).not.toHaveClass('pf-m-text-align-left');
+});
+
+test('Renders with class pf-m-text-align-left when isLeftAligned is passed', () => {
+  render(<TooltipContent isLeftAligned>Test content</TooltipContent>);
+
+  expect(screen.getByText('Test content')).toHaveClass('pf-m-text-align-left');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TooltipContent>Test content</TooltipContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -1,17 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tooltip renders 1`] = `
-<DocumentFragment>
-  <div>
-    Toggle tooltip
+exports[`Matches snapshot 1`] = `
+<div
+  aria-live="off"
+  class="pf-v5-c-tooltip"
+  id="custom-id"
+  role="tooltip"
+>
+  <div
+    class="pf-v5-c-tooltip__arrow"
+  />
+  <div
+    class="pf-v5-c-tooltip__content pf-m-text-align-left"
+  >
+    Test content
   </div>
-</DocumentFragment>
-`;
-
-exports[`tooltip renders in strict mode 1`] = `
-<DocumentFragment>
-  <div>
-    Toggle tooltip
-  </div>
-</DocumentFragment>
+</div>
 `;

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

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tooltip__arrow"
+    data-testid="tooltipArrow"
+  />
+</DocumentFragment>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tooltip__content"
+  >
+    Test content
+  </div>
+</DocumentFragment>
+`;

package/src/components/TreeView/TreeView.tsx

@@ -76,6 +76,10 @@ export interface TreeViewProps {
   onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Callback for item selection. */
   onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
+  /** Callback for expanding a node with children. */
+  onExpand?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
+  /** Callback for collapsing a node with children. */
+  onCollapse?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Internal. Parent item of a tree view list item. */
   parentItem?: TreeViewDataItem;
   /** Toolbar to display above the tree view. */
@@ -104,6 +108,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   parentItem,
   onSelect,
   onCheck,
+  onExpand,
+  onCollapse,
   toolbar,
   activeItems,
   compareItems = (item, itemToCheck) => item.id === itemToCheck.id,
@@ -113,7 +119,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
 }: TreeViewProps) => {
   const treeViewList = (
     <TreeViewList isNested={isNested} toolbar={toolbar}>
-      {data.map(item => (
+      {data.map((item) => (
         <TreeViewListItem
           key={item.id?.toString() || item.name?.toString()}
           name={item.name}
@@ -124,6 +130,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
           defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
           onSelect={onSelect}
           onCheck={onCheck}
+          onExpand={onExpand}
+          onCollapse={onCollapse}
           hasCheckbox={item.hasCheckbox !== undefined ? item.hasCheckbox : hasCheckboxes}
           checkProps={item.checkProps}
           hasBadge={item.hasBadge !== undefined ? item.hasBadge : hasBadges}
@@ -153,6 +161,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
                 defaultAllExpanded={defaultAllExpanded}
                 onSelect={onSelect}
                 onCheck={onCheck}
+                onExpand={onExpand}
+                onCollapse={onCollapse}
                 activeItems={activeItems}
                 icon={icon}
                 expandedIcon={expandedIcon}