@patternfly/react-core 5.0.0-alpha.115 → 5.0.0-alpha.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.115",
+  "version": "5.0.0-alpha.117",
   "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": "ff94267709508525b7fe8dd1da0b7ea6a33854aa"
+  "gitHead": "1c5fa51019a97419db49101738f263ce0092d173"
 }

package/src/components/Pagination/Navigation.tsx

@@ -113,10 +113,23 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     lastPage: number,
     onPageInput: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void
   ): void {
+    const allowedKeys = [
+      'Tab',
+      'Backspace',
+      'Delete',
+      'ArrowLeft',
+      'ArrowRight',
+      'Home',
+      'End',
+      'ArrowUp',
+      'ArrowDown'
+    ];
     if (event.key === KeyTypes.Enter) {
       const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
       onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
       this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
+    } else if (!/^\d*$/.test(event.key) && !allowedKeys.includes(event.key)) {
+      event.preventDefault();
     }
   }
 

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

@@ -1381,25 +1381,26 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             <React.Fragment>
               <div className={css(styles.selectToggleWrapper)}>
                 {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <input
-                  className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                  id={`${selectToggleId}-select-typeahead`}
-                  aria-label={typeAheadAriaLabel}
-                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                  placeholder={placeholderText as string}
-                  value={
-                    typeaheadInputValue !== null
-                      ? typeaheadInputValue
-                      : this.getDisplay(selections[0] as string, 'text') || ''
-                  }
-                  type="text"
-                  onClick={this.onClick}
-                  onChange={this.onChange}
-                  autoComplete={inputAutoComplete}
-                  disabled={isDisabled}
-                  ref={this.inputRef}
-                />
+                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
+                  <input
+                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                    id={`${selectToggleId}-select-typeahead`}
+                    aria-label={typeAheadAriaLabel}
+                    {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
+                    placeholder={placeholderText as string}
+                    value={
+                      typeaheadInputValue !== null
+                        ? typeaheadInputValue
+                        : this.getDisplay(selections[0] as string, 'text') || ''
+                    }
+                    type="text"
+                    onClick={this.onClick}
+                    onChange={this.onChange}
+                    autoComplete={inputAutoComplete}
+                    disabled={isDisabled}
+                    ref={this.inputRef}
+                  />
+                </div>
               </div>
               {hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn}
             </React.Fragment>
@@ -1409,22 +1410,23 @@ 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}
-                <input
-                  className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                  id={`${selectToggleId}-select-multi-typeahead-typeahead`}
-                  aria-label={typeAheadAriaLabel}
-                  aria-invalid={validated === ValidatedOptions.error}
-                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                  placeholder={placeholderText as string}
-                  value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
-                  type="text"
-                  onChange={this.onChange}
-                  onClick={this.onClick}
-                  autoComplete={inputAutoComplete}
-                  disabled={isDisabled}
-                  ref={this.inputRef}
-                />
+                <div className={css(formStyles.formControl, styles.selectToggleTypeahead)}>
+                  <input
+                    aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
+                    id={`${selectToggleId}-select-multi-typeahead-typeahead`}
+                    aria-label={typeAheadAriaLabel}
+                    aria-invalid={validated === ValidatedOptions.error}
+                    {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
+                    placeholder={placeholderText as string}
+                    value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
+                    type="text"
+                    onChange={this.onChange}
+                    onClick={this.onClick}
+                    autoComplete={inputAutoComplete}
+                    disabled={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

@@ -1620,16 +1620,19 @@ exports[`typeahead multi select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="false"
@@ -1672,16 +1675,19 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -1896,16 +1902,19 @@ exports[`typeahead multi select renders selected successfully 1`] = `
             </ul>
           </div>
         </div>
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -2038,15 +2047,18 @@ exports[`typeahead select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-select-closed-select-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-select-closed-select-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="false"
@@ -2089,15 +2101,18 @@ exports[`typeahead select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-9-select-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-9-select-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -2198,15 +2213,18 @@ exports[`typeahead select renders selected successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-10-select-typeahead"
-          placeholder=""
-          type="text"
-          value="Mr"
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-10-select-typeahead"
+            placeholder=""
+            type="text"
+            value="Mr"
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"