@patternfly/react-core 4.213.1 → 4.213.4

package/src/demos/Card/Card.md

@@ -197,7 +197,7 @@ class CardViewBasic extends React.Component {
         });
       }
     };
-    
+
     this.onKeyDown = (event, productId) => {
       console.log(productId);
       if (event.target !== event.currentTarget) {
@@ -206,28 +206,30 @@ class CardViewBasic extends React.Component {
       if ([' ', 'Enter'].includes(event.key)) {
         event.preventDefault();
         this.setState(prevState => {
-          return prevState.selectedItems.includes(productId*1) ? 
-          {
-            selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
-            areAllSelected: false
-          } : {
-            selectedItems: [...prevState.selectedItems, productId * 1],
-            areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
-          };
+          return prevState.selectedItems.includes(productId * 1)
+            ? {
+                selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+                areAllSelected: false
+              }
+            : {
+                selectedItems: [...prevState.selectedItems, productId * 1],
+                areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+              };
         });
       }
     };
-    
+
     this.onClick = productId => {
       this.setState(prevState => {
-        return prevState.selectedItems.includes(productId*1) ? 
-        {
-          selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
-          areAllSelected: false
-        } : {
-          selectedItems: [...prevState.selectedItems, productId * 1],
-          areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
-        };
+        return prevState.selectedItems.includes(productId * 1)
+          ? {
+              selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+              areAllSelected: false
+            }
+          : {
+              selectedItems: [...prevState.selectedItems, productId * 1],
+              areAllSelected: prevState.totalItemCount === prevState.selectedItems.length + 1
+            };
       });
     };
   }
@@ -559,12 +561,8 @@ class CardViewBasic extends React.Component {
             </Toolbar>
           </PageSection>
           <PageSection isFilled>
-            <Gallery hasGutter>
-              <Card 
-                isSelectable 
-                selectableVariant="raised" 
-                isCompact
-              >
+            <Gallery hasGutter aria-label="Selectable card container">
+              <Card isSelectableRaised isCompact>
                 <Bullseye>
                   <EmptyState variant={EmptyStateVariant.xs}>
                     <EmptyStateIcon icon={PlusCircleIcon} />
@@ -578,13 +576,15 @@ class CardViewBasic extends React.Component {
                 </Bullseye>
               </Card>
               {filtered.map((product, key) => (
-                <Card 
-                  isSelectable 
-                  selectableVariant="raised" 
-                  isCompact 
+                <Card
+                  isSelectableRaised
+                  hasSelectableInput
+                  isCompact
                   key={product.name}
-                  onKeyDown={(e) => this.onKeyDown(e, product.id)}
+                  id={product.name.replace(/ /g, '-')}
+                  onKeyDown={e => this.onKeyDown(e, product.id)}
                   onClick={() => this.onClick(product.id)}
+                  onSelectableInputChange={() => this.onClick(product.id)}
                   isSelected={selectedItems.includes(product.id)}
                 >
                   <CardHeader>

package/src/demos/PrimaryDetail.md

@@ -1100,6 +1100,7 @@ class PrimaryDetailCardView extends React.Component {
         return;
       }
       if ([13, 32].includes(event.keyCode)) {
+        event.preventDefault();
         const newSelected = event.currentTarget.id;
         this.setState({
           activeCard: newSelected,
@@ -1121,6 +1122,17 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
+    this.onChange = (labelledById, _event) => {
+      if (labelledById === this.state.activeCard) {
+        return;
+      }
+
+      this.setState({
+        activeCard: labelledById,
+        isDrawerExpanded: true
+      });
+    };
+
     this.onPerPageSelect = (_evt, perPage) => {
       this.setState({ page: 1, perPage });
     };
@@ -1262,7 +1274,7 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     const drawerContent = (
-      <Gallery hasGutter>
+      <Gallery hasGutter aria-label="Selectable card container">
         {filtered.map((product, key) => (
           <React.Fragment>
             <Card
@@ -1271,8 +1283,10 @@ class PrimaryDetailCardView extends React.Component {
               id={'card-view-' + key}
               onKeyDown={this.onKeyDown}
               onClick={this.onCardClick}
+              onSelectableInputChange={this.onChange}
               isSelectable
-              isSelected={activeCard === key}
+              isSelected={activeCard === 'card-view-' + key}
+              hasSelectableInput
             >
               <CardHeader>
                 <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -89,14 +89,17 @@ export const ModalTabs: React.FunctionComponent = () => {
           </TextContent>
         </PageSection>
         <PageSection isFilled>
-          <Gallery hasGutter>
+          <Gallery hasGutter aria-label="Selectable card container">
             {products.map(product => (
               <Card
                 isSelectable
                 isSelectableRaised
+                hasSelectableInput
                 isCompact
                 key={product.id}
+                id={product.name.replace(/ /g, '-')}
                 onClick={onCardClick(product)}
+                onSelectableInputChange={() => onCardClick(product)()}
                 onKeyPress={onCardKeyPress(product)}
               >
                 <CardTitle>{product.name}</CardTitle>

package/src/helpers/Popper/Popper.tsx

@@ -14,6 +14,17 @@ const getOppositePlacement = (placement: Placement): any =>
     (matched: string) => hash[matched as 'left' | 'right' | 'bottom' | 'top'] as BasePlacement
   );
 
+export interface ToggleMenuBaseProps {
+  /** The container to append the menu to. Defaults to 'inline'
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * menuAppendTo="parent"
+   * menuAppendTo={() => document.body}
+   * menuAppendTo={document.getElementById('target')}
+   */
+  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'parent' | 'inline';
+}
+
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;