@patternfly/react-core 4.236.2 → 4.236.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.2",
+  "version": "4.236.3",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.87.2",
-    "@patternfly/react-styles": "^4.86.2",
-    "@patternfly/react-tokens": "^4.88.2",
+    "@patternfly/react-icons": "^4.87.3",
+    "@patternfly/react-styles": "^4.86.3",
+    "@patternfly/react-tokens": "^4.88.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "de201ab6c9fa8d24e516025f984b0b86666f484d"
+  "gitHead": "07d9fc8ea68e953640e5d48c8693ec6865851bf1"
 }

package/src/components/Alert/Alert.tsx

@@ -73,6 +73,8 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   isExpandable?: boolean;
   /** Adds accessible text to the alert Toggle */
   toggleAriaLabel?: string;
+  /** Uniquely identifies the alert */
+  id?: string;
 }
 
 export const Alert: React.FunctionComponent<AlertProps> = ({
@@ -100,6 +102,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   toggleAriaLabel = `${capitalize(variant)} alert details`,
   onMouseEnter = () => {},
   onMouseLeave = () => {},
+  id,
   ...props
 }: AlertProps) => {
   const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
@@ -211,6 +214,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
       })}
       onMouseEnter={myOnMouseEnter}
       onMouseLeave={myOnMouseLeave}
+      id={id}
       {...props}
     >
       {isExpandable && (

package/src/components/AlertGroup/AlertGroupInline.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AlertGroup/alert-group';
 import { AlertGroupProps } from './AlertGroup';
+import { AlertProps } from '../Alert';
 
 export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   className,
@@ -18,8 +19,8 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
     className={css(styles.alertGroup, className, isToast ? styles.modifiers.toast : '')}
     {...rest}
   >
-    {React.Children.toArray(children).map((Alert: React.ReactNode, index: number) => (
-      <li key={index}>{Alert}</li>
+    {React.Children.toArray(children).map((alert, index) => (
+      <li key={(alert as React.ReactElement<AlertProps>).props?.id || index}>{alert}</li>
     ))}
     {overflowMessage && (
       <li>

package/src/components/Tabs/OverflowTab.tsx

@@ -88,6 +88,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
       {...props}
     >
       <button
+        type="button"
         className={css(styles.tabsLink, isExpanded && styles.modifiers.expanded)}
         onClick={() => toggleMenu()}
         aria-label={toggleAriaLabel}

package/src/components/Tabs/TabButton.tsx

@@ -26,7 +26,12 @@ export const TabButton: React.FunctionComponent<TabButtonProps> = ({
   const Component = (props.href ? 'a' : 'button') as any;
 
   return (
-    <Component ref={parentInnerRef} {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)} {...props}>
+    <Component
+      {...(!props.href && { type: 'button' })}
+      ref={parentInnerRef}
+      {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)}
+      {...props}
+    >
       {children}
     </Component>
   );

package/src/components/Tabs/Tabs.tsx

@@ -463,6 +463,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           )}
           {!isOverflowHorizontal && (
             <button
+              type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
               aria-label={leftScrollAriaLabel}
               onClick={this.scrollLeft}
@@ -478,6 +479,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           </ul>
           {!isOverflowHorizontal && (
             <button
+              type="button"
               className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
               aria-label={rightScrollAriaLabel}
               onClick={this.scrollRight}

package/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`Matches snapshot when expanded 1`] = `
           aria-haspopup="menu"
           class="pf-c-tabs__link pf-m-expanded"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"

package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`should not render anything 1`] = `
       data-ouia-safe="true"
       id="pf-tab-0-"
       role="tab"
+      type="button"
     >
       <span
         class="pf-c-tabs__item-text"

package/src/components/Tabs/__tests__/__snapshots__/TabButton.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`should render tab button 1`] = `
   <button
     data-ouia-component-type="PF4/TabButton"
     data-ouia-safe="true"
+    type="button"
   >
     Tab button
   </button>

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

@@ -15,6 +15,7 @@ exports[`should render accessible tabs 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -103,6 +104,7 @@ exports[`should render accessible tabs 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -171,6 +173,7 @@ exports[`should render box tabs 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -202,6 +205,7 @@ exports[`should render box tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -222,6 +226,7 @@ exports[`should render box tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -242,6 +247,7 @@ exports[`should render box tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -262,6 +268,7 @@ exports[`should render box tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-icon"
@@ -285,6 +292,7 @@ exports[`should render box tabs 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -365,6 +373,7 @@ exports[`should render box tabs of light variant 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -396,6 +405,7 @@ exports[`should render box tabs of light variant 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -416,6 +426,7 @@ exports[`should render box tabs of light variant 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -436,6 +447,7 @@ exports[`should render box tabs of light variant 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -450,6 +462,7 @@ exports[`should render box tabs of light variant 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -561,6 +574,7 @@ exports[`should render expandable vertical tabs 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -592,6 +606,7 @@ exports[`should render expandable vertical tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -612,6 +627,7 @@ exports[`should render expandable vertical tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -632,6 +648,7 @@ exports[`should render expandable vertical tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -652,6 +669,7 @@ exports[`should render expandable vertical tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-icon"
@@ -675,6 +693,7 @@ exports[`should render expandable vertical tabs 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -755,6 +774,7 @@ exports[`should render filled tabs 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -786,6 +806,7 @@ exports[`should render filled tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -806,6 +827,7 @@ exports[`should render filled tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -826,6 +848,7 @@ exports[`should render filled tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -840,6 +863,7 @@ exports[`should render filled tabs 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -908,6 +932,7 @@ exports[`should render secondary tabs 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -939,6 +964,7 @@ exports[`should render secondary tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-primarieTabs"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -959,6 +985,7 @@ exports[`should render secondary tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -979,6 +1006,7 @@ exports[`should render secondary tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -993,6 +1021,7 @@ exports[`should render secondary tabs 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1030,6 +1059,7 @@ exports[`should render secondary tabs 1`] = `
         aria-label="Scroll left"
         class="pf-c-tabs__scroll-button pf-m-secondary"
         disabled=""
+        type="button"
       >
         <svg
           aria-hidden="true"
@@ -1061,6 +1091,7 @@ exports[`should render secondary tabs 1`] = `
             data-ouia-safe="true"
             id="pf-tab-10-secondary tab1"
             role="tab"
+            type="button"
           >
             <span
               class="pf-c-tabs__item-text"
@@ -1081,6 +1112,7 @@ exports[`should render secondary tabs 1`] = `
             data-ouia-safe="true"
             id="pf-tab-11-secondary tab2"
             role="tab"
+            type="button"
           >
             <span
               class="pf-c-tabs__item-text"
@@ -1101,6 +1133,7 @@ exports[`should render secondary tabs 1`] = `
             data-ouia-safe="true"
             id="pf-tab-12-secondary tab3"
             role="tab"
+            type="button"
           >
             <span
               class="pf-c-tabs__item-text"
@@ -1115,6 +1148,7 @@ exports[`should render secondary tabs 1`] = `
         aria-label="Scroll right"
         class="pf-c-tabs__scroll-button pf-m-secondary"
         disabled=""
+        type="button"
       >
         <svg
           aria-hidden="true"
@@ -1209,6 +1243,7 @@ exports[`should render simple tabs 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1240,6 +1275,7 @@ exports[`should render simple tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1260,6 +1296,7 @@ exports[`should render simple tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1280,6 +1317,7 @@ exports[`should render simple tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1300,6 +1338,7 @@ exports[`should render simple tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-icon"
@@ -1323,6 +1362,7 @@ exports[`should render simple tabs 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1403,6 +1443,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1434,6 +1475,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
           data-ouia-safe="true"
           id="pf-tab-one-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1454,6 +1496,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
           data-ouia-safe="true"
           id="pf-tab-two-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1474,6 +1517,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
           data-ouia-safe="true"
           id="pf-tab-three-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1488,6 +1532,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1557,6 +1602,7 @@ exports[`should render tabs with no bottom border 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1588,6 +1634,7 @@ exports[`should render tabs with no bottom border 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1608,6 +1655,7 @@ exports[`should render tabs with no bottom border 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1628,6 +1676,7 @@ exports[`should render tabs with no bottom border 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1642,6 +1691,7 @@ exports[`should render tabs with no bottom border 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1710,6 +1760,7 @@ exports[`should render tabs with separate content 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1741,6 +1792,7 @@ exports[`should render tabs with separate content 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-separateTabs"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1761,6 +1813,7 @@ exports[`should render tabs with separate content 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-separateTabs"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1781,6 +1834,7 @@ exports[`should render tabs with separate content 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-separateTabs"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1795,6 +1849,7 @@ exports[`should render tabs with separate content 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1872,6 +1927,7 @@ exports[`should render uncontrolled tabs 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1903,6 +1959,7 @@ exports[`should render uncontrolled tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1923,6 +1980,7 @@ exports[`should render uncontrolled tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1943,6 +2001,7 @@ exports[`should render uncontrolled tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -1963,6 +2022,7 @@ exports[`should render uncontrolled tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-icon"
@@ -1986,6 +2046,7 @@ exports[`should render uncontrolled tabs 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -2066,6 +2127,7 @@ exports[`should render vertical tabs 1`] = `
       aria-label="Scroll left"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -2097,6 +2159,7 @@ exports[`should render vertical tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -2117,6 +2180,7 @@ exports[`should render vertical tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -2137,6 +2201,7 @@ exports[`should render vertical tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-text"
@@ -2157,6 +2222,7 @@ exports[`should render vertical tabs 1`] = `
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
           role="tab"
+          type="button"
         >
           <span
             class="pf-c-tabs__item-icon"
@@ -2180,6 +2246,7 @@ exports[`should render vertical tabs 1`] = `
       aria-label="Scroll right"
       class="pf-c-tabs__scroll-button"
       disabled=""
+      type="button"
     >
       <svg
         aria-hidden="true"