@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.61

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/Menu.tsx

@@ -18,15 +18,6 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   selected?: any | any[];
   /** Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction. */
   onActionClick?: (event?: any, itemId?: any, actionId?: any) => void;
-  /** Search input of menu */
-  hasSearchInput?: boolean;
-  /** A callback for when the input value changes. */
-  onSearchInputChange?: (
-    event: React.FormEvent<HTMLInputElement> | React.SyntheticEvent<HTMLButtonElement>,
-    value: string
-  ) => void;
-  /** Accessibility label */
-  'aria-label'?: string;
   /** @beta Indicates if menu contains a flyout menu */
   containsFlyout?: boolean;
   /** @beta Indicating that the menu should have nav flyout styling */
@@ -40,9 +31,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 */
@@ -63,10 +59,12 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** @beta Determines the accessible role of the menu. For a non-checkbox menu that can have
+   * one or more items selected, pass in "listbox". */
+  role?: string;
 }
 
 export interface MenuState {
-  searchInputValue: string | null;
   ouiaStateId: string;
   transitionMoveTarget: HTMLElement;
   flyoutRef: React.Ref<HTMLLIElement> | null;
@@ -84,7 +82,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     ouiaSafe: true,
     isRootMenu: true,
     isPlain: false,
-    isScrollable: false
+    isScrollable: false,
+    role: 'menu'
   };
 
   constructor(props: MenuProps) {
@@ -96,7 +95,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
   state: MenuState = {
     ouiaStateId: getDefaultOUIAId(Menu.displayName),
-    searchInputValue: '',
     transitionMoveTarget: null,
     flyoutRef: null,
     disableHover: false,
@@ -167,7 +165,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       }
 
       const nextTarget = nextMenuChildren.filter(
-        el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+        (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
       )[0].firstChild;
 
       (nextTarget as HTMLElement).focus();
@@ -209,7 +207,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
           if (activeElement.nextElementSibling && activeElement.nextElementSibling.classList.contains('pf-c-menu')) {
             const childItems = Array.from(
               activeElement.nextElementSibling.getElementsByTagName('UL')[0].children
-            ).filter(el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+            ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
 
             (activeElement as HTMLElement).tabIndex = -1;
             (childItems[0].firstChild as HTMLElement).tabIndex = 0;
@@ -227,13 +225,13 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     if (isDrilldown) {
       return this.activeMenu
         ? Array.from(this.activeMenu.getElementsByTagName('UL')[0].children).filter(
-            el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
           )
         : [];
     } else {
       return this.menuRef.current
         ? Array.from(this.menuRef.current.getElementsByTagName('LI')).filter(
-            el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+            (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
           )
         : [];
     }
@@ -241,7 +239,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
   render() {
     const {
-      'aria-label': ariaLabel,
       id,
       children,
       className,
@@ -267,6 +264,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       innerRef,
       isRootMenu,
       activeMenu,
+      role,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -286,8 +284,9 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
           onDrillOut,
           onGetMenuHeight,
           flyoutRef: this.state.flyoutRef,
-          setFlyoutRef: flyoutRef => this.setState({ flyoutRef }),
-          disableHover: this.state.disableHover
+          setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
+          disableHover: this.state.disableHover,
+          role
         }}
       >
         {isRootMenu && (
@@ -298,11 +297,11 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             isActiveElement={(element: Element) =>
               document.activeElement.closest('li') === element || // if element is a basic MenuItem
               document.activeElement.parentElement === element ||
-              document.activeElement.closest('.pf-c-menu__search') === element || // if element is a MenuInput
+              document.activeElement.closest('.pf-c-menu__search') === element || // if element is a MenuSearch
               (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element)
             }
             getFocusableElement={(navigableElement: Element) =>
-              (navigableElement.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuInput
+              (navigableElement.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
               ((navigableElement.firstChild as Element).tagName === 'LABEL' &&
                 navigableElement.querySelector('input')) || // for MenuItem checkboxes
               (navigableElement.firstChild as Element)
@@ -328,7 +327,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             _isMenuDrilledIn && styles.modifiers.drilledIn,
             className
           )}
-          aria-label={ariaLabel}
           ref={this.menuRef}
           {...getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           {...props}

package/src/components/Menu/MenuContent.tsx

@@ -6,7 +6,7 @@ import { MenuContext } from './MenuContext';
 export interface MenuContentProps extends React.HTMLProps<HTMLElement> {
   /** Items within group */
   children?: React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Height of the menu content */
   menuHeight?: string;

package/src/components/Menu/MenuContext.ts

@@ -9,12 +9,18 @@ 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;
   disableHover?: boolean;
+  role?: string;
 }>({
   menuId: null,
   parentMenu: null,
@@ -29,7 +35,8 @@ export const MenuContext = React.createContext<{
   onGetMenuHeight: () => null,
   flyoutRef: null,
   setFlyoutRef: () => null,
-  disableHover: false
+  disableHover: false,
+  role: 'menu'
 });
 
 export const MenuItemContext = React.createContext<{

package/src/components/Menu/MenuGroup.tsx

@@ -2,16 +2,16 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 
-export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
+export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Items within group */
   children?: React.ReactNode;
   /** Additional classes added to the MenuGroup */
   className?: string;
   /** Group label */
-  label?: string;
+  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';
@@ -21,20 +21,27 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   children,
   className = '',
   label = '',
-  titleId = '',
+  titleId,
   innerRef,
   labelHeadingLevel: HeadingLevel = 'h1',
   ...props
-}: MenuGroupProps) => (
-  <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
-    {label && (
-      <HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
-        {label}
-      </HeadingLevel>
-    )}
-    {children}
-  </section>
-);
+}: MenuGroupProps) => {
+  const Wrapper = typeof label === 'function' ? label : HeadingLevel;
+  return (
+    <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
+      <>
+        {['function', 'string'].includes(typeof label) ? (
+          <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
+            {label}
+          </Wrapper>
+        ) : (
+          label
+        )}
+        {children}
+      </>
+    </section>
+  );
+};
 
 export const MenuGroup = React.forwardRef((props: MenuGroupProps, ref: React.Ref<HTMLElement>) => (
   <MenuGroupBase {...props} innerRef={ref} />

package/src/components/Menu/MenuItem.tsx

@@ -46,7 +46,9 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   actions?: React.ReactNode;
   /** Description of the menu item */
   description?: React.ReactNode;
-  /** Render external link icon */
+  /** Render an external link icon on focus or hover, and set the link's
+   * "target" attribute to a value of "_blank".
+   */
   isExternalLink?: boolean;
   /** Flag indicating if the option is selected */
   isSelected?: boolean;
@@ -64,10 +66,12 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   direction?: 'down' | 'up';
   /** @beta True if item is on current selection path */
   isOnPath?: boolean;
-  /** Accessibility label */
+  /** Adds an accessible name to the menu item. */
   '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({
@@ -100,6 +104,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   drilldownMenu,
   isOnPath,
   innerRef,
+  id,
+  'aria-label': ariaLabel,
   ...props
 }: MenuItemProps) => {
   const {
@@ -114,7 +120,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     onDrillOut,
     flyoutRef,
     setFlyoutRef,
-    disableHover
+    disableHover,
+    role: menuRole
   } = React.useContext(MenuContext);
   let Component = (to ? 'a' : component) as any;
   if (hasCheckbox && !to) {
@@ -186,7 +193,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       if (flyoutVisible) {
         const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
         const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter(
-          el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
+          (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
         );
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
@@ -224,12 +231,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 +245,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           itemId
         );
     } else {
-      _drill = () => onDrillOut && onDrillOut(parentMenu, itemId);
+      drill = (event) => onDrillOut && onDrillOut(event, parentMenu, itemId);
     }
   }
   let additionalProps = {} as any;
@@ -246,7 +254,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       href: to,
       'aria-disabled': isDisabled ? true : null,
       // prevent invalid 'disabled' attribute on <a> tags
-      disabled: null
+      disabled: null,
+      target: isExternalLink ? '_blank' : null
     };
   } else if (Component === 'button') {
     additionalProps = {
@@ -289,6 +298,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       setFlyoutRef(null);
     }
   };
+  const isSelectMenu = menuRole === 'listbox';
 
   return (
     <li
@@ -306,21 +316,24 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       {...(flyoutMenu && { onKeyDown: handleFlyout })}
       ref={ref}
       role={!hasCheckbox ? 'none' : 'menuitem'}
+      {...(hasCheckbox && { 'aria-label': ariaLabel })}
       {...props}
     >
       <GenerateId>
-        {randomId => (
+        {(randomId) => (
           <Component
+            id={id}
             tabIndex={-1}
             className={css(styles.menuItem, getIsSelected() && !hasCheckbox && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
-            {...(!hasCheckbox && { disabled: isDisabled })}
-            {...(!hasCheckbox && !flyoutMenu && { role: 'menuitem' })}
+            {...(!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel })}
+            {...(!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
+            {...(!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
             ref={innerRef}
             {...(!hasCheckbox && {
-              onClick: (event: any) => {
+              onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
                 onItemSelect(event, onSelect);
-                _drill && _drill();
+                drill && drill(event);
                 flyoutMenu && handleFlyout(event);
               }
             })}
@@ -340,7 +353,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
                     id={randomId}
                     component="span"
                     isChecked={isSelected || false}
-                    onChange={event => onItemSelect(event, onSelect)}
+                    onChange={(event) => onItemSelect(event, onSelect)}
                     isDisabled={isDisabled}
                   />
                 </span>
@@ -383,7 +396,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             icon="favorites"
             isFavorited={isFavorited}
             aria-label={isFavorited ? 'starred' : 'not starred'}
-            onClick={event => onActionClick(event, itemId)}
+            onClick={(event) => onActionClick(event, itemId)}
             tabIndex={-1}
             actionId="fav"
           />

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/MenuList.tsx

@@ -1,21 +1,40 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
+import { MenuContext } from './MenuContext';
 
 export interface MenuListProps extends React.HTMLProps<HTMLUListElement> {
   /** Anything that can be rendered inside of menu list */
   children: React.ReactNode;
   /** Additional classes added to the menu list */
   className?: string;
+  /** @beta Indicates to assistive technologies whether more than one item can be selected
+   * for a non-checkbox menu. Only applies when the menu's role is "listbox".
+   */
+  isAriaMultiselectable?: boolean;
+  /** Adds an accessible name to the menu. */
+  'aria-label'?: string;
 }
 
 export const MenuList: React.FunctionComponent<MenuListProps> = ({
   children = null,
   className,
+  isAriaMultiselectable = false,
+  'aria-label': ariaLabel,
   ...props
-}: MenuListProps) => (
-  <ul role="menu" className={css(styles.menuList, className)} {...props}>
-    {children}
-  </ul>
-);
+}: MenuListProps) => {
+  const { role } = React.useContext(MenuContext);
+
+  return (
+    <ul
+      role={role}
+      {...(role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable })}
+      className={css(styles.menuList, className)}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {children}
+    </ul>
+  );
+};
 MenuList.displayName = 'MenuList';

package/src/components/Menu/MenuSearch.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Menu/menu';
+import { css } from '@patternfly/react-styles';
+
+export interface MenuSearchProps extends React.HTMLProps<HTMLElement> {
+  /** Items within search */
+  children?: React.ReactNode;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+}
+
+export const MenuSearch = React.forwardRef((props: MenuSearchProps, ref: React.Ref<HTMLDivElement>) => (
+  <div {...props} className={css(styles.menuSearch, props.className)} ref={ref} />
+));
+MenuSearch.displayName = 'MenuSearch';

package/src/components/Menu/MenuSearchInput.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+
+export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
+  /** Items within input */
+  children?: React.ReactNode;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+}
+
+export const MenuSearchInput = React.forwardRef((props: MenuSearchInputProps, ref: React.Ref<HTMLDivElement>) => (
+  // Update to use the styles object when core adds the class
+  <div {...props} className={css('pf-c-menu__search-input', props.className)} ref={ref} />
+));
+MenuSearchInput.displayName = 'MenuSearchInput';