@patternfly/react-core 4.202.7 → 4.202.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.7",
+  "version": "4.202.10",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.53.7",
-    "@patternfly/react-styles": "^4.52.7",
-    "@patternfly/react-tokens": "^4.54.7",
+    "@patternfly/react-icons": "^4.53.10",
+    "@patternfly/react-styles": "^4.52.10",
+    "@patternfly/react-tokens": "^4.54.10",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "aa38935ea3b57607894dcc53696234838dc712d5"
+  "gitHead": "a1d1e3253b278b497301e5c3e967afa54d5cfa7b"
 }

package/src/components/Card/examples/Card.md

@@ -2,7 +2,7 @@
 id: Card
 section: components
 cssPrefix: pf-c-card
-propComponents: ['Card', 'CardHeader', 'CardHeaderMain', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
+propComponents: ['Card', 'CardActions', 'CardHeader', 'CardHeaderMain', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
 ouia: true
 ---
 

package/src/components/Select/Select.tsx

@@ -270,7 +270,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       this.state.viewMoreNextIndex !== -1 &&
       this.refCollection.length > this.state.viewMoreNextIndex &&
       this.props.loadingVariant !== 'spinner' &&
-      this.refCollection[this.state.viewMoreNextIndex][0]
+      this.refCollection[this.state.viewMoreNextIndex][0] &&
+      this.props.variant !== 'typeahead' && // do not hard focus newly added items for typeahead variants
+      this.props.variant !== 'typeaheadmulti'
     ) {
       this.refCollection[this.state.viewMoreNextIndex][0].focus();
     }
@@ -581,17 +583,16 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         }
       });
     }
-
-    return typeaheadChildren.map((child: React.ReactNode) => {
+    return typeaheadChildren.map((child: React.ReactNode, index) => {
       const childElement = child as any;
       return childElement.type.displayName === 'Divider'
         ? child
         : React.cloneElement(child as React.ReactElement, {
-            isFocused:
-              typeaheadActiveChild &&
-              (typeaheadActiveChild.innerText === (child as React.ReactElement).props.value.toString() ||
+            isFocused: typeaheadActiveChild
+              ? typeaheadActiveChild.innerText === (child as React.ReactElement).props.value.toString() ||
                 (this.props.isCreatable &&
-                  typeaheadActiveChild.innerText === `{createText} "${(child as React.ReactElement).props.value}"`))
+                  typeaheadActiveChild.innerText === `{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
           });
     });
   }
@@ -621,6 +622,9 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const hasDescriptionElm = Boolean(
       this.refCollection[nextIndex][0] && this.refCollection[nextIndex][0].classList.contains('pf-m-description')
     );
+    const isLoad = Boolean(
+      this.refCollection[nextIndex][0] && this.refCollection[nextIndex][0].classList.contains('pf-m-load')
+    );
     const optionTextElm = hasDescriptionElm
       ? (this.refCollection[nextIndex][0].firstElementChild as HTMLElement)
       : this.refCollection[nextIndex][0];
@@ -628,7 +632,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     let typeaheadInputValue = '';
     if (isCreatable && optionTextElm.innerText.includes(createText)) {
       typeaheadInputValue = this.state.creatableValue;
-    } else if (optionTextElm) {
+    } else if (optionTextElm && !isLoad) {
+      // !isLoad prevents the view more button text from appearing the typeahead input
       typeaheadInputValue = optionTextElm.innerText;
     }
     this.setState(prevState => ({
@@ -682,19 +687,20 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           (typeaheadActiveChild || (this.refCollection[0] && this.refCollection[0][0]))
         ) {
           if (typeaheadActiveChild) {
-            const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
-            const typeaheadActiveChildText = hasDescriptionElm
-              ? (typeaheadActiveChild.firstChild as HTMLElement).innerText
-              : typeaheadActiveChild.innerText;
-            this.setState({
-              typeaheadInputValue: typeaheadActiveChildText
-            });
-          } else {
+            if (!typeaheadActiveChild.classList.contains('pf-m-load')) {
+              const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
+              const typeaheadActiveChildText = hasDescriptionElm
+                ? (typeaheadActiveChild.firstChild as HTMLElement).innerText
+                : typeaheadActiveChild.innerText;
+              this.setState({
+                typeaheadInputValue: typeaheadActiveChildText
+              });
+            }
+          } else if (this.refCollection[0] && this.refCollection[0][0]) {
             this.setState({
               typeaheadInputValue: this.refCollection[0][0].innerText
             });
           }
-
           if (typeaheadActiveChild) {
             typeaheadActiveChild.click();
           } else {

package/src/components/Select/SelectMenu.tsx

@@ -135,8 +135,16 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
     let index = hasInlineFilter ? 1 : 0;
     if (isGrouped) {
       return React.Children.map(children, (group: React.ReactElement) => {
-        if (group.type === SelectOption || group.type === Divider) {
+        if (group.type === Divider) {
           return group;
+        } else if (group.type === SelectOption) {
+          return React.cloneElement(group, {
+            isChecked: this.checkForValue(group.props.value, checked),
+            sendRef,
+            keyHandler,
+            index: index++,
+            isLastOptionBeforeFooter
+          });
         }
         return React.cloneElement(group, {
           titleId: group.props.label && group.props.label.replace(/\W/g, '-'),

package/src/components/Select/SelectOption.tsx

@@ -282,7 +282,7 @@ export class SelectOption extends React.Component<SelectOptionProps> {
             role="presentation"
             className={css(
               isLoading && styles.selectListItem,
-              !isLoad && !isLoading && styles.selectMenuWrapper,
+              !isLoading && styles.selectMenuWrapper,
               isFavorite && styles.modifiers.favorite,
               isFocused && styles.modifiers.focus,
               isLoading && styles.modifiers.loading

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

@@ -1533,7 +1533,7 @@ exports[`select custom select filter filters properly 1`] = `
               isChecked={false}
               isDisabled={false}
               isFavorite={null}
-              isFocused={null}
+              isFocused={false}
               isLastOptionBeforeFooter={[Function]}
               isLoad={false}
               isLoading={false}
@@ -1573,7 +1573,7 @@ exports[`select custom select filter filters properly 1`] = `
               isChecked={false}
               isDisabled={false}
               isFavorite={null}
-              isFocused={null}
+              isFocused={false}
               isLastOptionBeforeFooter={[Function]}
               isLoad={false}
               isLoading={false}
@@ -1613,7 +1613,7 @@ exports[`select custom select filter filters properly 1`] = `
               isChecked={false}
               isDisabled={false}
               isFavorite={null}
-              isFocused={null}
+              isFocused={false}
               isLastOptionBeforeFooter={[Function]}
               isLoad={false}
               isLoading={false}
@@ -3395,7 +3395,7 @@ exports[`typeahead select test select existing option on a non-creatable select
               isChecked={false}
               isDisabled={false}
               isFavorite={null}
-              isFocused={null}
+              isFocused={false}
               isLastOptionBeforeFooter={[Function]}
               isLoad={false}
               isLoading={false}