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

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -56,7 +56,7 @@ exports[`slider renders continuous slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <div
+      <span
         class="pf-v5-c-form-control"
       >
         <input
@@ -68,7 +68,7 @@ exports[`slider renders continuous slider 1`] = `
           type="number"
           value="50"
         />
-      </div>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -250,7 +250,7 @@ exports[`slider renders discrete slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <div
+      <span
         class="pf-v5-c-form-control"
       >
         <input
@@ -262,7 +262,7 @@ exports[`slider renders discrete slider 1`] = `
           type="number"
           value="50"
         />
-      </div>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -422,7 +422,7 @@ exports[`slider renders slider with input 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control"
           >
             <input
@@ -434,7 +434,7 @@ exports[`slider renders slider with input 1`] = `
               type="number"
               value="50"
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item pf-m-box"
@@ -501,7 +501,7 @@ exports[`slider renders slider with input above thumb 1`] = `
           <div
             class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <div
+            <span
               class="pf-v5-c-form-control"
             >
               <input
@@ -513,7 +513,7 @@ exports[`slider renders slider with input above thumb 1`] = `
                 type="number"
                 value="50"
               />
-            </div>
+            </span>
           </div>
           <div
             class="pf-v5-c-input-group__item pf-m-box"

package/src/components/TextArea/TextArea.tsx

@@ -123,7 +123,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
@@ -145,11 +145,11 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
           {...props}
         />
         {hasStatusIcon && (
-          <div className={css(styles.formControlUtilities)}>
+          <span className={css(styles.formControlUtilities)}>
             <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />
-          </div>
+          </span>
         )}
-      </div>
+      </span>
     );
   }
 }

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

@@ -2,7 +2,7 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-resize-both pf-m-disabled custom class"
     style="height: 6px;"
   >
@@ -12,6 +12,6 @@ exports[`Matches the snapshot 1`] = `
       disabled=""
       required=""
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;

package/src/components/TextInput/TextInput.tsx

@@ -190,7 +190,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
@@ -218,12 +218,12 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         />
         {(customIcon || hasStatusIcon) && (
-          <div className={css(styles.formControlUtilities)}>
+          <span className={css(styles.formControlUtilities)}>
             {customIcon && <FormControlIcon customIcon={customIcon} />}
             {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
-          </div>
+          </span>
         )}
-      </div>
+      </span>
     );
   }
 

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

@@ -2,7 +2,7 @@
 
 exports[`TextInput default read only text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-readonly"
   >
     <input
@@ -15,13 +15,13 @@ exports[`TextInput default read only text input 1`] = `
       type="text"
       value="read only default"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput disabled text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-disabled"
   >
     <input
@@ -34,13 +34,13 @@ exports[`TextInput disabled text input 1`] = `
       type="text"
       value=""
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput invalid text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <input
@@ -52,10 +52,10 @@ exports[`TextInput invalid text input 1`] = `
       type="text"
       value="test input"
     />
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -71,15 +71,15 @@ exports[`TextInput invalid text 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>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput plain read only text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
   >
     <input
@@ -92,13 +92,13 @@ exports[`TextInput plain read only text input 1`] = `
       type="text"
       value="read only plain"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <input
@@ -110,13 +110,13 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
       type="text"
       value="read only"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput simple text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <input
@@ -128,13 +128,13 @@ exports[`TextInput simple text input 1`] = `
       type="text"
       value="test input"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput validated text input error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <input
@@ -146,10 +146,10 @@ exports[`TextInput validated text input error 1`] = `
       type="text"
       value="test input"
     />
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -165,8 +165,8 @@ exports[`TextInput validated text input error 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>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;

package/src/deprecated/components/Select/Select.tsx

@@ -37,6 +37,7 @@ import { Popper } from '../../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../../helpers/favorites';
 import { ValidatedOptions } from '../../../helpers/constants';
 import { findTabbableElements } from '../../../helpers/util';
+import { TextInput } from '../../../components/TextInput';
 
 // seed for the aria-labelledby ID
 let currentId = 0;
@@ -1381,8 +1382,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             <React.Fragment>
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
-                  <input
+                <TextInput 
+                    className={css(styles.selectToggleTypeahead)}
                     aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
                     id={`${selectToggleId}-select-typeahead`}
                     aria-label={typeAheadAriaLabel}
@@ -1393,14 +1394,12 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                         ? typeaheadInputValue
                         : this.getDisplay(selections[0] as string, 'text') || ''
                     }
-                    type="text"
+                    onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
                     onClick={this.onClick}
-                    onChange={this.onChange}
                     autoComplete={inputAutoComplete}
-                    disabled={isDisabled}
+                    isDisabled={isDisabled}
                     ref={this.inputRef}
-                  />
-                </div>
+                />
               </div>
               {hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn}
             </React.Fragment>
@@ -1410,8 +1409,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
                 {selections && Array.isArray(selections) && selections.length > 0 && selectedChips}
-                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
-                  <input
+                <TextInput 
+                    className={css(styles.selectToggleTypeahead)}
                     aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
                     id={`${selectToggleId}-select-multi-typeahead-typeahead`}
                     aria-label={typeAheadAriaLabel}
@@ -1419,14 +1418,12 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                     {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
                     placeholder={placeholderText as string}
                     value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
-                    type="text"
-                    onChange={this.onChange}
+                    onChange={(event) => this.onChange(event as React.ChangeEvent<HTMLInputElement>)}
                     onClick={this.onClick}
                     autoComplete={inputAutoComplete}
-                    disabled={isDisabled}
+                    isDisabled={isDisabled}
                     ref={this.inputRef}
-                  />
-                </div>
+                />
               </div>
               {hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn}
             </React.Fragment>

package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -1666,19 +1666,22 @@ exports[`typeahead multi select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
             aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
             placeholder=""
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="false"
@@ -1723,19 +1726,22 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
             aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
             placeholder=""
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="true"
@@ -1956,19 +1962,22 @@ exports[`typeahead multi select renders selected successfully 1`] = `
             </ul>
           </div>
         </div>
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
             aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
             placeholder=""
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="true"
@@ -2107,18 +2116,22 @@ exports[`typeahead select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
+            aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="typeahead-select-closed-select-typeahead"
             placeholder=""
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="false"
@@ -2163,18 +2176,22 @@ exports[`typeahead select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
+            aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="pf-select-toggle-id-9-select-typeahead"
             placeholder=""
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="true"
@@ -2277,18 +2294,22 @@ exports[`typeahead select renders selected successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
+            aria-invalid="false"
             aria-label=""
             autocomplete="off"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe="true"
             id="pf-select-toggle-id-10-select-typeahead"
             placeholder=""
             type="text"
             value="Mr"
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="true"