@patternfly/react-core 5.0.0-prerelease.16 → 5.0.0-prerelease.18

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.0.0-prerelease.15"}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.0.0-prerelease.17"}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.0.0-prerelease.15"}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.0.0-prerelease.17"}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.0.0-prerelease.15"}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.0.0-prerelease.17"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.16",
+  "version": "5.0.0-prerelease.18",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8e85d977ec1fecf81cc980b0c025d2f63b7fcea1"
+  "gitHead": "b4aec63b97f1861401eba8ea6d6c73a8ddde8df1"
 }

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v5-c-clipboard-copy__group"
     >
-      <div
+      <span
         class="pf-v5-c-form-control"
       >
         <input
@@ -23,7 +23,7 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
           type="text"
           value="[object Object]"
         />
-      </div>
+      </span>
       <button
         aria-disabled="false"
         aria-label="'Copy to clipboard'"

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

@@ -15,7 +15,7 @@ exports[`With popover opened 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control"
           >
             <input
@@ -28,7 +28,7 @@ exports[`With popover opened 1`] = `
               type="text"
               value=""
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -162,7 +162,7 @@ exports[`With popover opened 1`] = `
                   <div
                     class="pf-v5-c-calendar-month__header-year"
                   >
-                    <div
+                    <span
                       class="pf-v5-c-form-control"
                     >
                       <input
@@ -174,7 +174,7 @@ exports[`With popover opened 1`] = `
                         type="number"
                         value="1969"
                       />
-                    </div>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -786,7 +786,7 @@ exports[`disabled date picker 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control pf-m-disabled"
           >
             <input
@@ -800,7 +800,7 @@ exports[`disabled date picker 1`] = `
               type="text"
               value="2020-11-20"
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"

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

@@ -15,7 +15,7 @@ exports[`simple fileupload 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
           >
             <input
@@ -32,7 +32,7 @@ exports[`simple fileupload 1`] = `
               type="text"
               value=""
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -69,7 +69,7 @@ exports[`simple fileupload 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <div
+      <span
         class="pf-v5-c-form-control pf-m-resize-vertical"
       >
         <textarea
@@ -79,7 +79,7 @@ exports[`simple fileupload 1`] = `
           name="simple-text-file"
           placeholder=""
         />
-      </div>
+      </span>
     </div>
     <input
       style="display: none;"

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`simple fileuploadfield 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
           >
             <input
@@ -31,7 +31,7 @@ exports[`simple fileuploadfield 1`] = `
               type="text"
               value=""
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item"
@@ -67,7 +67,7 @@ exports[`simple fileuploadfield 1`] = `
     <div
       class="pf-v5-c-file-upload__file-details"
     >
-      <div
+      <span
         class="pf-v5-c-form-control pf-m-resize-vertical"
       >
         <textarea
@@ -77,7 +77,7 @@ exports[`simple fileuploadfield 1`] = `
           name="custom-file-upload"
           placeholder=""
         />
-      </div>
+      </span>
     </div>
     <p>
       A custom preview of the uploaded file can be passed as children

package/src/components/FormControl/FormControlIcon.tsx

@@ -24,8 +24,8 @@ export const FormControlIcon = ({ status, customIcon, className, ...props }: For
   const StatusIcon = status && statusIcons[status];
 
   return (
-    <div className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
+    <span className={css(styles.formControlIcon, status && styles.modifiers.status, className)} {...props}>
       {customIcon || <StatusIcon />}
-    </div>
+    </span>
   );
 };

package/src/components/FormSelect/FormSelect.tsx

@@ -76,7 +76,7 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           isDisabled && styles.modifiers.disabled,
@@ -96,13 +96,13 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
         >
           {children}
         </select>
-        <div className={css(styles.formControlUtilities)}>
+        <span className={css(styles.formControlUtilities)}>
           {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
-          <div className={css(styles.formControlToggleIcon)}>
+          <span className={css(styles.formControlToggleIcon)}>
             <CaretDownIcon />
-          </div>
-        </div>
-      </div>
+          </span>
+        </span>
+      </span>
     );
   }
 }

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

@@ -2,7 +2,7 @@
 
 exports[`FormSelect Disabled FormSelect input  1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-disabled"
   >
     <select
@@ -20,10 +20,10 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -39,15 +39,15 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -64,10 +64,10 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -83,15 +83,15 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with id does not generate console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -109,10 +109,10 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -128,15 +128,15 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -152,10 +152,10 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -171,15 +171,15 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect Grouped FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -242,10 +242,10 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
         </option>
       </optgroup>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -261,15 +261,15 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect Simple FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <select
@@ -324,10 +324,10 @@ exports[`FormSelect Simple FormSelect input 1`] = `
         Other
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -343,15 +343,15 @@ exports[`FormSelect Simple FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect invalid FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <select
@@ -368,10 +368,10 @@ exports[`FormSelect invalid FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -387,8 +387,8 @@ exports[`FormSelect invalid FormSelect input 1`] = `
             d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -404,15 +404,15 @@ exports[`FormSelect invalid FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated success FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-success"
   >
     <select
@@ -429,10 +429,10 @@ exports[`FormSelect validated success FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -448,8 +448,8 @@ exports[`FormSelect validated success FormSelect input 1`] = `
             d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -465,15 +465,15 @@ exports[`FormSelect validated success FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated warning FormSelect input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-warning"
   >
     <select
@@ -490,10 +490,10 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
         Mr
       </option>
     </select>
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -509,8 +509,8 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
             d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-      <div
+      </span>
+      <span
         class="pf-v5-c-form-control__toggle-icon"
       >
         <svg
@@ -526,8 +526,8 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
             d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -47,7 +47,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div
@@ -77,7 +77,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -91,7 +91,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             type="password"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div
@@ -180,7 +180,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -194,7 +194,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div
@@ -230,7 +230,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
           <div
             class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <div
+            <span
               class="pf-v5-c-form-control"
             >
               <input
@@ -244,7 +244,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
                 type="password"
                 value=""
               />
-            </div>
+            </span>
           </div>
           <div
             class="pf-v5-c-input-group__item"
@@ -335,7 +335,7 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -349,7 +349,7 @@ exports[`LoginForm should render Login form 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div
@@ -379,7 +379,7 @@ exports[`LoginForm should render Login form 1`] = `
       <div
         class="pf-v5-c-form__group-control"
       >
-        <div
+        <span
           class="pf-v5-c-form-control"
         >
           <input
@@ -393,7 +393,7 @@ exports[`LoginForm should render Login form 1`] = `
             type="password"
             value=""
           />
-        </div>
+        </span>
       </div>
     </div>
     <div