@patternfly/react-core 5.0.0-alpha.55 → 5.0.0-alpha.57

package/package.json

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

package/src/components/Dropdown/Dropdown.tsx

@@ -74,7 +74,9 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       // toggle was clicked open via keyboard, focus on first menu item
       if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
         setTimeout(() => {
-          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
+          const firstElement = menuRef?.current?.querySelector(
+            'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
+          );
           firstElement && (firstElement as HTMLElement).focus();
         }, 0);
       }

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;
@@ -191,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 {
@@ -232,7 +234,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
   if (direction) {
     if (direction === 'down') {
-      drill = event =>
+      drill = (event) =>
         onDrillIn &&
         onDrillIn(
           event,
@@ -243,7 +245,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           itemId
         );
     } else {
-      drill = event => onDrillOut && onDrillOut(event, parentMenu, itemId);
+      drill = (event) => onDrillOut && onDrillOut(event, parentMenu, itemId);
     }
   }
   let additionalProps = {} as any;
@@ -252,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 = {
@@ -317,7 +320,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       {...props}
     >
       <GenerateId>
-        {randomId => (
+        {(randomId) => (
           <Component
             id={id}
             tabIndex={-1}
@@ -393,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/examples/Menu.md

@@ -67,7 +67,7 @@ To trigger an action when a specific item's action icon is selected, pass in the
 
 ### 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.
+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, as well as add `target="_blank"` so that the link opens in a new tab or window.
 
 ```ts file="MenuWithLinks.tsx"
 

package/src/components/Nav/NavExpandable.tsx

@@ -29,7 +29,7 @@ export interface NavExpandableProps
   /** Identifier to use for the section aria label */
   id?: string;
   /** allow consumer to optionally override this callback and manage expand state externally. if passed will not call Nav's onToggle. */
-  onExpand?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void;
+  onExpand?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void;
   /** Additional props added to the NavExpandable <button> */
   buttonProps?: any;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -71,7 +71,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
   }
 
   onExpand = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     onToggle: (
       event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
       groupId: string | number,
@@ -80,11 +80,11 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
   ) => {
     const { expandedState } = this.state;
     if (this.props.onExpand) {
-      this.props.onExpand(e, !expandedState);
+      this.props.onExpand(event, !expandedState);
     } else {
       this.setState((prevState) => ({ expandedState: !prevState.expandedState }));
       const { groupId } = this.props;
-      onToggle(e, groupId, !expandedState);
+      onToggle(event, groupId, !expandedState);
     }
   };
 
@@ -129,7 +129,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
                 <button
                   className={styles.navLink}
                   id={srText ? null : this.id}
-                  onClick={(e) => this.onExpand(e, context.onToggle)}
+                  onClick={(event) => this.onExpand(event, context.onToggle)}
                   aria-expanded={expandedState}
                   tabIndex={isNavOpen ? null : -1}
                   {...buttonProps}

package/src/components/Pagination/Pagination.tsx

@@ -78,7 +78,7 @@ export interface PaginationTitles {
 }
 
 export type OnSetPage = (
-  _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+  event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
   newPage: number,
   perPage?: number,
   startIdx?: number,
@@ -86,7 +86,7 @@ export type OnSetPage = (
 ) => void;
 
 export type OnPerPageSelect = (
-  _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+  event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
   newPerPage: number,
   newPage: number,
   startIdx?: number,

package/src/components/Wizard/WizardNavItem.tsx

@@ -57,7 +57,8 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   }
 
   const btnProps = {
-    disabled: isDisabled
+    disabled: isDisabled,
+    type: 'button' as const
   };
 
   const linkProps = {

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
       data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
       data-ouia-component-type="PF4/WizardNavItem"
       data-ouia-safe="true"
+      type="button"
     />
     ReactNode
   </li>

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

@@ -111,6 +111,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-7"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 A
               </button>
@@ -125,6 +126,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-8"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 <span
                   class="pf-c-wizard__nav-link-text"
@@ -166,6 +168,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-WizardNavItem-9"
                     data-ouia-component-type="PF4/WizardNavItem"
                     data-ouia-safe="true"
+                    type="button"
                   >
                     B-1
                   </button>
@@ -179,6 +182,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                     data-ouia-component-id="OUIA-Generated-WizardNavItem-10"
                     data-ouia-component-type="PF4/WizardNavItem"
                     data-ouia-safe="true"
+                    type="button"
                   >
                     B-2
                   </button>
@@ -194,6 +198,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-11"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 C
               </button>
@@ -207,6 +212,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-12"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 D
               </button>
@@ -381,6 +387,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-A"
+                type="button"
               >
                 A
               </button>
@@ -395,6 +402,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-B"
+                type="button"
               >
                 B
               </button>
@@ -412,6 +420,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                     data-ouia-component-type="PF4/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-1"
+                    type="button"
                   >
                     B-1
                   </button>
@@ -426,6 +435,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                     data-ouia-component-type="PF4/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-2"
+                    type="button"
                   >
                     B-2
                   </button>
@@ -442,6 +452,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-C"
+                type="button"
               >
                 C
               </button>
@@ -456,6 +467,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-D"
+                type="button"
               >
                 D
               </button>
@@ -586,6 +598,7 @@ exports[`Wizard bare wiz 1`] = `
                 data-ouia-component-id="OUIA-Generated-WizardNavItem-13"
                 data-ouia-component-type="PF4/WizardNavItem"
                 data-ouia-safe="true"
+                type="button"
               >
                 A
               </button>