@patternfly/react-core 4.278.0 → 4.278.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.278.0",
+  "version": "4.278.1",
   "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": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "f5feb0bf7c7dd131054c652328fbcf49a633873b"
+  "gitHead": "db0cdde6e3e6ae61348129b73bb43c97a98b4617"
 }

package/src/components/InputGroup/InputGroup.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 import { css } from '@patternfly/react-styles';
-import { FormSelect } from '../FormSelect';
-import { TextArea } from '../TextArea';
-import { TextInput } from '../TextInput';
 
 export interface InputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the input group. */
@@ -20,25 +17,12 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
-  const idItem = React.Children.toArray(children).find(
-    (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
-  ) as React.ReactElement<{ id: string }>;
-
   const ref = React.useRef(null);
   const inputGroupRef = innerRef || ref;
 
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
-      {idItem
-        ? React.Children.map(children, (child: any) =>
-            !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
-              ? child
-              : React.cloneElement(child, {
-                  'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
-                })
-          )
-        : children}
+      {children}
     </div>
   );
 };

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

@@ -7,47 +7,18 @@ import { Button } from '../../Button';
 import { TextInput } from '../../TextInput';
 
 describe('InputGroup', () => {
-  test('add aria-describedby to form-control if one of the non form-controls has id', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby.
+  // Regression test for https://github.com/patternfly/patternfly-react/issues/9667
+  test('wont add aria-describedby automatically to form-control', () => {
     render(
       <InputGroup>
-        <TextInput value="some data" aria-label="some text" />
-        <Button variant="primary" id="button-id">
-          hello
+        <TextInput aria-label="User password" />
+        <Button variant="primary" id="show-password-toggler">
+          Show
         </Button>
       </InputGroup>
     );
-    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
-  });
 
-  test('wont add aria-describedby to form-control if describedby is empty string', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby, but this
-    // example has an empty aria-describedby to prevent that from happening.
-    render(
-      <InputGroup>
-        <TextInput value="some data" aria-describedby="" aria-label="some text" />
-        <Button id="button-id">
-          hello
-        </Button>
-      </InputGroup>
-    );
-    expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
-  });
-
-  test('wont override aria-describedby in form-control if describedby has value', () => {
-    // In this test, TextInput is a form-control component and Button is not.
-    // If Button has an id props, this should be used in aria-describedby, but this
-    // example has a predefined aria-describedby to prevent that from happening
-    render(
-      <InputGroup>
-        <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
-        <Button id="button-id">
-          hello
-        </Button>
-      </InputGroup>
-    );
-    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');
+    const formControl = screen.getByLabelText("User password");
+    expect(formControl).not.toHaveAttribute("aria-describedby");
   });
 });

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

@@ -69,7 +69,6 @@ describe('numberInput', () => {
       <NumberInput
         value={5}
         onMinus={jest.fn()}
-        inputProps={{ 'aria-describedby': '' }}
         minusBtnProps={{ id: 'minus-id' }}
         onPlus={jest.fn()}
         plusBtnProps={{ id: 'plus-id' }}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -124,6 +124,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         }
       }}
       {...((hasCheck || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
+      {...(ToggleComponent === 'button' && { type: 'button' })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -156,7 +157,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
         {isSelectable ? (
-          <button tabIndex={-1} className={css(styles.treeViewNodeText)}>
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button">
             {name}
           </button>
         ) : (
@@ -214,6 +215,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
               }}
               {...(hasCheck && { htmlFor: randomId })}
               {...((hasCheck || (isSelectable && children)) && { id: `label-${randomId}` })}
+              {...(Component === 'button' && { type: 'button' })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}

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

@@ -22,6 +22,7 @@ exports[`renders compact no background successfully 1`] = `
           <button
             class="pf-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -75,6 +76,7 @@ exports[`renders compact no background successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -125,6 +127,7 @@ exports[`renders compact no background successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -177,6 +180,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -227,6 +231,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -277,6 +282,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -343,6 +349,7 @@ exports[`renders compact successfully 1`] = `
           <button
             class="pf-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -396,6 +403,7 @@ exports[`renders compact successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -446,6 +454,7 @@ exports[`renders compact successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -498,6 +507,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -548,6 +558,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -598,6 +609,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -664,6 +676,7 @@ exports[`renders guides successfully 1`] = `
           <button
             class="pf-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -713,6 +726,7 @@ exports[`renders guides successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -759,6 +773,7 @@ exports[`renders guides successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -807,6 +822,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -853,6 +869,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -899,6 +916,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -961,6 +979,7 @@ exports[`tree view renders active successfully 1`] = `
           <button
             class="pf-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1010,6 +1029,7 @@ exports[`tree view renders active successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1056,6 +1076,7 @@ exports[`tree view renders active successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1104,6 +1125,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1150,6 +1172,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1196,6 +1219,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1258,6 +1282,7 @@ exports[`tree view renders badges successfully 1`] = `
           <button
             class="pf-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1316,6 +1341,7 @@ exports[`tree view renders badges successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1371,6 +1397,7 @@ exports[`tree view renders badges successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1428,6 +1455,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1483,6 +1511,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1538,6 +1567,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1609,6 +1639,7 @@ exports[`tree view renders basic successfully 1`] = `
           <button
             class="pf-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1658,6 +1689,7 @@ exports[`tree view renders basic successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1704,6 +1736,7 @@ exports[`tree view renders basic successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -1752,6 +1785,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1798,6 +1832,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1844,6 +1879,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -1915,6 +1951,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id18"
                 class="pf-c-tree-view__node-toggle"
                 tabindex="0"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-toggle-icon"
@@ -1976,6 +2013,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     aria-labelledby="label-checkbox-id19"
                     class="pf-c-tree-view__node-toggle"
                     tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="pf-c-tree-view__node-toggle-icon"
@@ -2034,6 +2072,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     aria-labelledby="label-checkbox-id20"
                     class="pf-c-tree-view__node-toggle"
                     tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="pf-c-tree-view__node-toggle-icon"
@@ -2094,6 +2133,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id21"
                 class="pf-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-toggle-icon"
@@ -2152,6 +2192,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id22"
                 class="pf-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-toggle-icon"
@@ -2210,6 +2251,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id23"
                 class="pf-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-toggle-icon"
@@ -2274,6 +2316,7 @@ exports[`tree view renders icons successfully 1`] = `
           <button
             class="pf-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2340,6 +2383,7 @@ exports[`tree view renders icons successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2403,6 +2447,7 @@ exports[`tree view renders icons successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2468,6 +2513,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2531,6 +2577,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2594,6 +2641,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2683,6 +2731,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 aria-labelledby="label-checkbox-id36"
                 class="pf-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-toggle-icon"
@@ -2751,6 +2800,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2797,6 +2847,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -2854,6 +2905,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2936,6 +2988,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -2982,6 +3035,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -3066,6 +3120,7 @@ exports[`tree view renders toolbar successfully 1`] = `
           <button
             class="pf-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -3115,6 +3170,7 @@ exports[`tree view renders toolbar successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -3161,6 +3217,7 @@ exports[`tree view renders toolbar successfully 1`] = `
             >
               <button
                 class="pf-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-c-tree-view__node-container"
@@ -3209,6 +3266,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -3255,6 +3313,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"
@@ -3301,6 +3360,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-c-tree-view__node-container"