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

package/src/components/Icon/Icon.tsx

@@ -39,11 +39,7 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
   defaultProgressArialabel = 'Loading...',
   ...props
 }: IconComponentProps) => {
-  const _progressIcon = progressIcon ? (
-    progressIcon
-  ) : (
-    <Spinner diameter="1em" isSVG aria-label={defaultProgressArialabel} />
-  );
+  const _progressIcon = progressIcon ?? <Spinner diameter="1em" aria-label={defaultProgressArialabel} />;
 
   return (
     <span

package/src/components/Icon/examples/IconCustomProgress.tsx

@@ -16,7 +16,7 @@ export const IconProgress: React.FunctionComponent = () => {
           name="toggle-icon-progress-custom"
         />
       </div>
-      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" isSVG aria-label="Loading..." />}>
+      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" aria-label="Loading..." />}>
         <CheckCircleIcon />
       </Icon>
     </React.Fragment>

package/src/components/Masthead/MastheadBrand.tsx

@@ -15,12 +15,19 @@ export interface MastheadBrandProps
 export const MastheadBrand: React.FunctionComponent<MastheadBrandProps> = ({
   children,
   className,
-  component = 'a',
+  component,
   ...props
 }: MastheadBrandProps) => {
-  const Component = component as any;
+  let Component = component as any;
+  if (!component) {
+    if (props?.href !== undefined) {
+      Component = 'a';
+    } else {
+      Component = 'span';
+    }
+  }
   return (
-    <Component className={css(styles.mastheadBrand, className)} tabIndex={0} {...props}>
+    <Component className={css(styles.mastheadBrand, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
       {children}
     </Component>
   );

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

@@ -85,11 +85,23 @@ describe('MastheadBrand', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('verify default component', () => {
+    const { asFragment } = render(<MastheadBrand>test</MastheadBrand>);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('verify custom component', () => {
     const { asFragment } = render(<MastheadBrand component="div">test</MastheadBrand>);
 
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('verify anchor component with href', () => {
+    const { asFragment } = render(<MastheadBrand href="#">test</MastheadBrand>);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
 
 describe('MastheadContent', () => {

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

@@ -33,12 +33,11 @@ exports[`Masthead verify full structure 1`] = `
     <div
       class="pf-c-masthead__main"
     >
-      <a
+      <span
         class="pf-c-masthead__brand"
-        tabindex="0"
       >
         Logo
-      </a>
+      </span>
     </div>
     <div
       class="pf-c-masthead__content"
@@ -151,10 +150,11 @@ exports[`Masthead verify stack display breakpoints 1`] = `
 </DocumentFragment>
 `;
 
-exports[`MastheadBrand verify basic 1`] = `
+exports[`MastheadBrand verify anchor component with href 1`] = `
 <DocumentFragment>
   <a
     class="pf-c-masthead__brand"
+    href="#"
     tabindex="0"
   >
     test
@@ -162,14 +162,23 @@ exports[`MastheadBrand verify basic 1`] = `
 </DocumentFragment>
 `;
 
+exports[`MastheadBrand verify basic 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-masthead__brand"
+  >
+    test
+  </span>
+</DocumentFragment>
+`;
+
 exports[`MastheadBrand verify custom class 1`] = `
 <DocumentFragment>
-  <a
+  <span
     class="pf-c-masthead__brand custom-css"
-    tabindex="0"
   >
     test
-  </a>
+  </span>
 </DocumentFragment>
 `;
 
@@ -177,13 +186,22 @@ exports[`MastheadBrand verify custom component 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-masthead__brand"
-    tabindex="0"
   >
     test
   </div>
 </DocumentFragment>
 `;
 
+exports[`MastheadBrand verify default component 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-masthead__brand"
+  >
+    test
+  </span>
+</DocumentFragment>
+`;
+
 exports[`MastheadContent verify basic 1`] = `
 <DocumentFragment>
   <div

package/src/components/Menu/MenuGroup.tsx

@@ -11,7 +11,7 @@ export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   label?: React.ReactNode;
   /** ID for title label */
   titleId?: string;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Group label heading level. Default is h1. */
   labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/src/components/Menu/MenuInput.tsx

@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 export interface MenuInputProps extends React.HTMLProps<HTMLElement> {
   /** Items within input */
   children?: React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
 

package/src/components/Menu/MenuItem.tsx

@@ -24,8 +24,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
-  /** Flag indicating the item has a checkbox */
-  hasCheck?: boolean;
+  /** @beta Flag indicating the item has a checkbox */
+  hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;
   /** Flag indicating if the item is favorited */
@@ -68,6 +68,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   'aria-label'?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
+  /** Sets the id attribute on the menu item component. */
+  id?: string;
 }
 
 const FlyoutContext = React.createContext({
@@ -79,7 +81,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   className,
   itemId = null,
   to,
-  hasCheck = false,
+  hasCheckbox = false,
   isActive = null,
   isFavorited = null,
   isLoadButton = false,
@@ -100,6 +102,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   drilldownMenu,
   isOnPath,
   innerRef,
+  id,
   ...props
 }: MenuItemProps) => {
   const {
@@ -118,7 +121,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     role: menuRole
   } = React.useContext(MenuContext);
   let Component = (to ? 'a' : component) as any;
-  if (hasCheck && !to) {
+  if (hasCheckbox && !to) {
     Component = 'label' as any;
   }
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
@@ -308,27 +311,28 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       onMouseOver={onMouseOver}
       {...(flyoutMenu && { onKeyDown: handleFlyout })}
       ref={ref}
-      role={!hasCheck ? 'none' : 'menuitem'}
+      role={!hasCheckbox ? 'none' : 'menuitem'}
       {...props}
     >
       <GenerateId>
         {randomId => (
           <Component
+            id={id}
             tabIndex={-1}
-            className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
+            className={css(styles.menuItem, getIsSelected() && !hasCheckbox && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
-            {...(!hasCheck && { disabled: isDisabled })}
-            {...(!hasCheck && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
-            {...(!hasCheck && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
+            {...(!hasCheckbox && { disabled: isDisabled })}
+            {...(!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
+            {...(!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
             ref={innerRef}
-            {...(!hasCheck && {
+            {...(!hasCheckbox && {
               onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
                 onItemSelect(event, onSelect);
                 drill && drill(event);
                 flyoutMenu && handleFlyout(event);
               }
             })}
-            {...(hasCheck && { htmlFor: randomId })}
+            {...(hasCheckbox && { htmlFor: randomId })}
             {...additionalProps}
           >
             <span className={css(styles.menuItemMain)}>
@@ -338,7 +342,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
                 </span>
               )}
               {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
-              {hasCheck && (
+              {hasCheckbox && (
                 <span className={css('pf-c-menu__item-check')}>
                   <Checkbox
                     id={randomId}

package/src/components/Menu/MenuItemAction.tsx

@@ -12,14 +12,14 @@ export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElem
   /** Callback on action click, can also specify onActionClick on the Menu instead */
   onClick?: (event?: any) => void;
   /** Accessibility label */
-  'aria-label'?: string;
+  'aria-label': string;
   /** Flag indicating if the item is favorited */
   isFavorited?: boolean;
   /** Disables action, can also be specified on the MenuItem instead */
   isDisabled?: boolean;
   /** Identifies the action item in the onActionClick on the Menu */
   actionId?: any;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
 

package/src/components/Menu/__mocks__/Menu.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuProps } from '../Menu';
+
+export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...props }: MenuProps) => (
+  <>
+    <div className={className} data-testid="menu-mock" {...props}></div>
+    <div onClick={onSelect}>{'Mock item'}</div>
+    <p>{`isPlain: ${isPlain}`}</p>
+    <p>{`isScrollable: ${isScrollable}`}</p>
+    <p>{`minWidth: ${style?.['--pf-c-menu--MinWidth']}`}</p>
+  </>
+);

package/src/components/Menu/__mocks__/MenuContent.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const MenuContent = ({ children }) => <div>{children}</div>;

package/src/components/Menu/__mocks__/MenuGroup.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuGroupProps } from '../MenuGroup';
+
+export const MenuGroup = ({ className, children, label, labelHeadingLevel }: MenuGroupProps) => (
+  <>
+    <div className={className} data-testid="menu-group-mock">
+      {children}
+    </div>
+    <p>{`label: ${label}`}</p>
+    <p>{`labelHeadingLevel: ${labelHeadingLevel}`}</p>
+  </>
+);

package/src/components/Menu/__mocks__/MenuItem.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MenuItemProps } from '../MenuItem';
+
+export const MenuItem = ({ className, children, description, itemId }: MenuItemProps) => (
+  <>
+    <div className={className} data-testid="menu-item-mock">
+      {children}
+    </div>
+    <p>{`description: ${description}`}</p>
+    <p>{`itemId: ${itemId}`}</p>
+  </>
+);

package/src/components/Menu/__mocks__/MenuList.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MenuListProps } from '../MenuList';
+
+export const MenuList = ({ className, children }: MenuListProps) => (
+  <>
+    <div className={className} data-testid="menu-list-mock">
+      {children}
+    </div>
+  </>
+);

package/src/components/Menu/__mocks__/index.ts

@@ -0,0 +1,5 @@
+export * from './Menu';
+export * from './MenuContent';
+export * from './MenuGroup';
+export * from './MenuItem';
+export * from './MenuList';

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

@@ -52,13 +52,13 @@ describe('Menu', () => {
     });
   });
 
-  describe('with hasCheck', () => {
+  describe('with hasCheckbox', () => {
     test('should render Menu with checkbox items', () => {
       const { asFragment } = render(
         <Menu>
           <MenuContent>
             <MenuList>
-              <MenuItem hasCheck itemId={0}>
+              <MenuItem hasCheckbox itemId={0}>
                 Checkbox 1
               </MenuItem>
             </MenuList>

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

@@ -18,13 +18,13 @@ export const MenuWithCheckbox: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} selected={selectedItems}>
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+          <MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
             Checkbox 1
           </MenuItem>
-          <MenuItem hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+          <MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
             Checkbox 2
           </MenuItem>
-          <MenuItem hasCheck itemId={2} isDisabled>
+          <MenuItem hasCheckbox itemId={2} isDisabled>
             Checkbox 3
           </MenuItem>
         </MenuList>

package/src/components/MenuToggle/MenuToggle.tsx

@@ -41,7 +41,7 @@ export interface MenuToggleProps
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
 }
 

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Dropzone, { DropzoneProps, DropFileEventHandler } from 'react-dropzone';
+import { DropEvent, DropzoneOptions, useDropzone } from 'react-dropzone';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 
@@ -14,7 +14,7 @@ export interface MultipleFileUploadProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Class to add to outer div */
   className?: string;
   /** Optional extra props to customize react-dropzone. */
-  dropzoneProps?: DropzoneProps;
+  dropzoneProps?: DropzoneOptions;
   /** Flag setting the component to horizontal styling mode */
   isHorizontal?: boolean;
   /** When files are dropped or uploaded this callback will be called with all accepted files */
@@ -33,47 +33,42 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
   onFileDrop = () => {},
   ...props
 }: MultipleFileUploadProps) => {
-  const onDropAccepted: DropFileEventHandler = (acceptedFiles: File[], event) => {
+  const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
     onFileDrop(acceptedFiles);
     // allow users to set a custom drop accepted handler rather than using on data change
     dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
   };
 
-  const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => {
-    dropzoneProps.onDropRejected && dropzoneProps?.onDropRejected(rejectedFiles, event);
-  };
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    multiple: true,
+    ...dropzoneProps,
+    onDropAccepted
+  });
 
-  return (
-    <Dropzone multiple={true} {...dropzoneProps} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
-      {({ getRootProps, getInputProps, isDragActive, open }) => {
-        const rootProps = getRootProps({
-          ...props,
-          onClick: event => event.preventDefault() // Prevents clicking TextArea from opening file dialog
-        });
-        const inputProps = getInputProps();
+  const rootProps = getRootProps({
+    ...props,
+    onClick: event => event.preventDefault() // Prevents clicking TextArea from opening file dialog
+  });
 
-        return (
-          <MultipleFileUploadContext.Provider value={{ open }}>
-            <div
-              className={css(
-                styles.multipleFileUpload,
-                isDragActive && styles.modifiers.dragOver,
-                isHorizontal && styles.modifiers.horizontal,
-                className
-              )}
-              {...rootProps}
-              {...props}
-            >
-              <input
-                /* hidden, necessary for react-dropzone */
-                {...inputProps}
-              />
-              {children}
-            </div>
-          </MultipleFileUploadContext.Provider>
-        );
-      }}
-    </Dropzone>
+  return (
+    <MultipleFileUploadContext.Provider value={{ open }}>
+      <div
+        className={css(
+          styles.multipleFileUpload,
+          isDragActive && styles.modifiers.dragOver,
+          isHorizontal && styles.modifiers.horizontal,
+          className
+        )}
+        {...rootProps}
+        {...props}
+      >
+        <input
+          /* hidden, necessary for react-dropzone */
+          {...getInputProps()}
+        />
+        {children}
+      </div>
+    </MultipleFileUploadContext.Provider>
   );
 };
 

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

@@ -4,10 +4,10 @@ exports[`MultipleFileUpload renders custom class names 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-multiple-file-upload test"
+    role="presentation"
     tabindex="0"
   >
     <input
-      autocomplete="off"
       multiple=""
       style="display: none;"
       tabindex="-1"
@@ -22,10 +22,10 @@ exports[`MultipleFileUpload renders with expected class names when horizontal 1`
 <DocumentFragment>
   <div
     class="pf-c-multiple-file-upload pf-m-horizontal"
+    role="presentation"
     tabindex="0"
   >
     <input
-      autocomplete="off"
       multiple=""
       style="display: none;"
       tabindex="-1"
@@ -40,10 +40,10 @@ exports[`MultipleFileUpload renders with expected class names when not horizonta
 <DocumentFragment>
   <div
     class="pf-c-multiple-file-upload"
+    role="presentation"
     tabindex="0"
   >
     <input
-      autocomplete="off"
       multiple=""
       style="display: none;"
       tabindex="-1"

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -112,7 +112,12 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
       <MultipleFileUpload
         onFileDrop={handleFileDrop}
         dropzoneProps={{
-          accept: 'image/jpeg, application/msword, application/pdf, image/png'
+          accept: {
+            'image/jpeg': ['.jpg', '.jpeg'],
+            'application/msword': ['.doc'],
+            'application/pdf': ['.pdf'],
+            'image/png': ['.png']
+          }
         }}
         isHorizontal={isHorizontal}
       >

package/src/components/Nav/Nav.tsx

@@ -61,6 +61,7 @@ export interface NavContextProps {
   isHorizontal?: boolean;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
+  navRef?: React.RefObject<HTMLElement>;
 }
 export const navContextDefaults = {};
 export const NavContext = React.createContext<NavContextProps>(navContextDefaults);
@@ -83,6 +84,8 @@ export class Nav extends React.Component<
     flyoutRef: null as React.Ref<HTMLLIElement>
   };
 
+  navRef = React.createRef<HTMLElement>();
+
   // Callback from NavItem
   onSelect(
     event: React.FormEvent<HTMLInputElement>,
@@ -150,7 +153,8 @@ export class Nav extends React.Component<
           updateIsScrollable: (isScrollable: boolean) => this.setState({ isScrollable }),
           isHorizontal: ['horizontal', 'tertiary', 'horizontal-subnav'].includes(variant),
           flyoutRef: this.state.flyoutRef,
-          setFlyoutRef: flyoutRef => this.setState({ flyoutRef })
+          setFlyoutRef: flyoutRef => this.setState({ flyoutRef }),
+          navRef: this.navRef
         }}
       >
         <nav
@@ -163,7 +167,8 @@ export class Nav extends React.Component<
             this.state.isScrollable && styles.modifiers.scrollable,
             className
           )}
-          aria-label={ariaLabel || (variant === 'tertiary' ? 'Local' : 'Global')}
+          aria-label={ariaLabel || (['tertiary', 'horizontal-subnav'].includes(variant) ? 'Local' : 'Global')}
+          ref={this.navRef}
           {...getOUIAProps(Nav.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           {...props}
         >

package/src/components/Nav/NavItem.tsx

@@ -32,8 +32,6 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   flyout?: React.ReactElement;
   /** Callback when flyout is opened or closed */
   onShowFlyout?: () => void;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** z-index of the flyout nav item */
   zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -57,11 +55,10 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   onShowFlyout,
   ouiaId,
   ouiaSafe,
-  removeFindDomNode = false,
   zIndex = 9999,
   ...props
 }: NavItemProps) => {
-  const { flyoutRef, setFlyoutRef } = React.useContext(NavContext);
+  const { flyoutRef, setFlyoutRef, navRef } = React.useContext(NavContext);
   const { isNavOpen } = React.useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const [isHovered, setIsHovered] = React.useState(false);
@@ -233,8 +230,8 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       placement="right-start"
       isVisible={flyoutVisible}
       onDocumentKeyDown={handleFlyout}
-      removeFindDomNode={removeFindDomNode}
       zIndex={zIndex}
+      appendTo={navRef?.current}
     />
   );
 

package/src/components/Nav/NavList.tsx

@@ -92,7 +92,7 @@ export class NavList extends React.Component<NavListProps> {
   };
 
   componentDidMount() {
-    this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons);
+    this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
     this.handleScrollButtons();
   }
 

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

@@ -48,7 +48,7 @@ describe('Nav', () => {
         <Nav className="test-nav-class">
           <NavList className="test-nav-list-class">
             {props.items.map(item => (
-              <NavItem removeFindDomNode to={item.to} key={item.to} className="test-nav-item-class">
+              <NavItem to={item.to} key={item.to} className="test-nav-item-class">
                 {item.label}
               </NavItem>
             ))}
@@ -255,4 +255,21 @@ describe('Nav', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Nav List with flyout', async () => {
+    const user = userEvent.setup();
+
+    const { asFragment } = renderNav(
+      <Nav variant="tertiary">
+        <NavList>
+          <NavItem className="test-nav-item-class" flyout={<div>Flyout test</div>}>
+            <div className="my-custom-node">My custom node</div>
+          </NavItem>
+        </NavList>
+      </Nav>
+    );
+
+    await user.hover(screen.getByText('My custom node'))
+    expect(asFragment()).toMatchSnapshot();
+  });
 });