@patternfly/react-core 4.232.1 → 4.232.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.232.1",
+  "version": "4.232.4",
   "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",
@@ -50,16 +50,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.83.1",
-    "@patternfly/react-styles": "^4.82.1",
-    "@patternfly/react-tokens": "^4.84.1",
+    "@patternfly/react-icons": "^4.83.4",
+    "@patternfly/react-styles": "^4.82.4",
+    "@patternfly/react-tokens": "^4.84.4",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.206.3",
+    "@patternfly/patternfly": "4.207.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "6fb07165361827ac63abf470cc14dd1dfe379f91"
+  "gitHead": "2703441fedb84ee7d3608adc90d7e4fbecc51f2e"
 }

package/src/components/Select/Select.tsx

@@ -558,7 +558,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
   };
 
   extendTypeaheadChildren(typeaheadCurrIndex: number, favoritesGroup?: React.ReactNode[]) {
-    const { isGrouped, onFavorite } = this.props;
+    const { isGrouped, onFavorite, createText } = this.props;
     const typeaheadChildren = favoritesGroup
       ? favoritesGroup.concat(this.state.typeaheadFilteredChildren)
       : this.state.typeaheadFilteredChildren;
@@ -586,8 +586,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                       activeElement &&
                       (activeElement.id === (child as React.ReactElement).props.id ||
                         (this.props.isCreatable &&
-                          typeaheadActiveChild.innerText ===
-                            `{createText} "${(group as React.ReactElement).props.value}"`))
+                          typeaheadActiveChild.textContent ===
+                            `${createText} "${(group as React.ReactElement).props.value}"`))
                   })
             )
           });
@@ -600,10 +600,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
                 : React.cloneElement(child as React.ReactElement, {
                     isFocused:
                       typeaheadActiveChild &&
-                      (typeaheadActiveChild.innerText === (child as React.ReactElement).props.value.toString() ||
+                      (typeaheadActiveChild.textContent === (child as React.ReactElement).props.value.toString() ||
                         (this.props.isCreatable &&
-                          typeaheadActiveChild.innerText ===
-                            `{createText} "${(child as React.ReactElement).props.value}"`))
+                          typeaheadActiveChild.textContent ===
+                            `${createText} "${(child as React.ReactElement).props.value}"`))
                   })
             )
           });
@@ -612,8 +612,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           return React.cloneElement(group as React.ReactElement, {
             isFocused:
               typeaheadActiveChild &&
-              (typeaheadActiveChild.innerText === group.props.value.toString() ||
-                (this.props.isCreatable && typeaheadActiveChild.innerText === `{createText} "${group.props.value}"`))
+              (typeaheadActiveChild.textContent === group.props.value.toString() ||
+                (this.props.isCreatable && typeaheadActiveChild.textContent === `${createText} "${group.props.value}"`))
           });
         }
       });
@@ -624,9 +624,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         ? child
         : React.cloneElement(child as React.ReactElement, {
             isFocused: typeaheadActiveChild
-              ? typeaheadActiveChild.innerText === (child as React.ReactElement).props.value.toString() ||
+              ? typeaheadActiveChild.textContent === (child as React.ReactElement).props.value.toString() ||
                 (this.props.isCreatable &&
-                  typeaheadActiveChild.innerText === `{createText} "${(child as React.ReactElement).props.value}"`)
+                  typeaheadActiveChild.textContent === `${createText} "${(child as React.ReactElement).props.value}"`)
               : index === typeaheadCurrIndex // fallback for view more + typeahead use cases, when the new expanded list is loaded and refCollection hasn't be updated yet
           });
     });
@@ -665,11 +665,11 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       : this.refCollection[nextIndex][0];
 
     let typeaheadInputValue = '';
-    if (isCreatable && optionTextElm.innerText.includes(createText)) {
+    if (isCreatable && optionTextElm.textContent.includes(createText)) {
       typeaheadInputValue = this.state.creatableValue;
     } else if (optionTextElm && !isLoad) {
       // !isLoad prevents the view more button text from appearing the typeahead input
-      typeaheadInputValue = optionTextElm.innerText;
+      typeaheadInputValue = optionTextElm.textContent;
     }
     this.setState(prevState => ({
       typeaheadCurrIndex: updateCurrentIndex ? nextIndex : prevState.typeaheadCurrIndex,
@@ -725,15 +725,15 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             if (!typeaheadActiveChild.classList.contains('pf-m-load')) {
               const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
               const typeaheadActiveChildText = hasDescriptionElm
-                ? (typeaheadActiveChild.firstChild as HTMLElement).innerText
-                : typeaheadActiveChild.innerText;
+                ? (typeaheadActiveChild.firstChild as HTMLElement).textContent
+                : typeaheadActiveChild.textContent;
               this.setState({
                 typeaheadInputValue: typeaheadActiveChildText
               });
             }
           } else if (this.refCollection[0] && this.refCollection[0][0]) {
             this.setState({
-              typeaheadInputValue: this.refCollection[0][0].innerText
+              typeaheadInputValue: this.refCollection[0][0].textContent
             });
           }
           if (typeaheadActiveChild) {
@@ -1267,7 +1267,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           className
         )}
         {...(width && { style: { width } })}
-        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
         {isOpen && menuContainer}
@@ -1288,7 +1287,6 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         ref={this.parentRef}
         {...getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         {...(width && { style: { width } })}
-        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
         {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
       >
         <SelectToggle
@@ -1308,6 +1306,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           variant={variant}
           aria-labelledby={`${ariaLabelledBy || ''} ${selectToggleId}`}
           aria-label={toggleAriaLabel}
+          {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
           handleTypeaheadKeys={this.handleTypeaheadKeys}
           moveFocusToLastMenuItem={this.moveFocusToLastMenuItem}
           isDisabled={isDisabled}

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

@@ -516,3 +516,23 @@ describe('select with placeholder', () => {
     expect(screen.getByRole('button', { name: 'Options menu' })).not.toHaveClass('pf-m-placeholder');
   });
 });
+
+test('applies focus styling to the create option when reached via keyboard navigation', () => {
+  render(
+    <Select
+      variant={SelectVariant.typeahead}
+      onToggle={() => {}}
+      isOpen
+      isCreatable
+    >
+      {selectOptions}
+    </Select>
+  );
+
+  const input = screen.getByRole('textbox');
+  userEvent.type(input, 'a{arrowdown}');
+
+  const createOption = screen.getByRole('option', { name: 'Create "a"' });
+
+  expect(createOption.parentElement).toHaveClass('pf-m-focus');
+});