@patternfly/react-core 5.0.0-alpha.28 → 5.0.0-alpha.29

package/src/demos/PrimaryDetail.md

@@ -112,7 +112,7 @@ class PrimaryDetailFullPage extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
@@ -158,7 +158,7 @@ class PrimaryDetailFullPage extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,
@@ -572,7 +572,7 @@ class PrimaryDetailContentPadding extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
@@ -618,7 +618,7 @@ class PrimaryDetailContentPadding extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,
@@ -955,7 +955,6 @@ import React from 'react';
 import {
   Button,
   Card,
-  CardActions,
   CardHeader,
   CardBody,
   CardTitle,
@@ -1034,12 +1033,12 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         isLowerToolbarDropdownOpen
       }));
     };
 
-    this.onToolbarDropdownSelect = _event => {
+    this.onToolbarDropdownSelect = (_event) => {
       this.setState({
         isLowerToolbarDropdownOpen: !this.state.isLowerToolbarDropdownOpen
       });
@@ -1051,7 +1050,7 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
-    this.onToolbarKebabDropdownSelect = _event => {
+    this.onToolbarKebabDropdownSelect = (_event) => {
       this.setState({
         isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
@@ -1066,12 +1065,14 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onNameSelect = (event, selection) => {
       const checked = event.target.checked;
-      this.setState(prevState => {
+      this.setState((prevState) => {
         const prevSelections = prevState.filters.products;
         return {
           filters: {
             ...prevState.filters,
-            ['products']: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+            ['products']: checked
+              ? [...prevSelections, selection]
+              : prevSelections.filter((value) => value !== selection)
           }
         };
       });
@@ -1079,8 +1080,8 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onDelete = (type = '', id = '') => {
       if (type) {
-        this.setState(prevState => {
-          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
+        this.setState((prevState) => {
+          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);
           return {
             filters: prevState.filters
           };
@@ -1103,10 +1104,10 @@ class PrimaryDetailCardView extends React.Component {
 
     this.onCheckboxClick = (event, productId) => {
       event.stopPropagation();
-      this.setState(prevState =>
+      this.setState((prevState) =>
         prevState.selectedItems.includes(productId * 1) || this.state.selectedItems.includes(productId * 1)
           ? {
-              selectedItems: [...this.state.selectedItems.filter(id => productId * 1 !== id)],
+              selectedItems: [...this.state.selectedItems.filter((id) => productId * 1 !== id)],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
             }
           : {
@@ -1116,7 +1117,7 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.onCardClick = event => {
+    this.onCardClick = (event) => {
       if (event.currentTarget.id === this.state.activeCard) {
         this.setState({
           isDrawerExpanded: !this.state.isDrawerExpanded,
@@ -1196,7 +1197,7 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.splitCheckboxSelectAll = e => {
+    this.splitCheckboxSelectAll = (e) => {
       const { checked } = e.target;
       const { isChecked } = this.state;
       let collection = [];
@@ -1219,7 +1220,7 @@ class PrimaryDetailCardView extends React.Component {
       );
     };
 
-    this.onSplitButtonSelect = _event => {
+    this.onSplitButtonSelect = (_event) => {
       this.setState((prevState, _props) => ({
         splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen,
         isDrawerExpanded: false,
@@ -1248,18 +1249,18 @@ class PrimaryDetailCardView extends React.Component {
 
     this.deleteItem = (event, item) => {
       event.stopPropagation();
-      const filter = getter => val => getter(val) !== item.id;
+      const filter = (getter) => (val) => getter(val) !== item.id;
       const filteredCards = this.state.res.filter(filter(({ id }) => id));
       this.setState({
         res: filteredCards,
-        selectedItems: this.state.selectedItems.filter(filter(id => id)),
+        selectedItems: this.state.selectedItems.filter(filter((id) => id)),
         totalItemCount: this.state.totalItemCount - 1,
         isDrawerExpanded: false,
         activeCard: null
       });
     };
 
-    this.onKeyDown = event => {
+    this.onKeyDown = (event) => {
       if (event.target !== event.currentTarget) {
         return;
       }
@@ -1294,10 +1295,10 @@ class PrimaryDetailCardView extends React.Component {
 
   fetch(page, perPage) {
     fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then(resp => resp.json())
-      .then(resp => this.setState({ res: resp, perPage, page }))
+      .then((resp) => resp.json())
+      .then((resp) => this.setState({ res: resp, perPage, page }))
       .then(() => this.updateSelected())
-      .catch(err => this.setState({ error: err }));
+      .catch((err) => this.setState({ error: err }));
   }
 
   componentDidMount() {
@@ -1383,15 +1384,8 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   render() {
-    const {
-      isDrawerExpanded,
-      isChecked,
-      selectedItems,
-      activeCard,
-      isLowerToolbarKebabDropdownOpen,
-      filters,
-      res
-    } = this.state;
+    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, res } =
+      this.state;
 
     const toolbarKebabDropdownItems = [
       <DropdownItem key="link">Link</DropdownItem>,
@@ -1420,7 +1414,7 @@ class PrimaryDetailCardView extends React.Component {
         <ToolbarItem>
           <Button variant="secondary">Action</Button>
         </ToolbarItem>
-        <ToolbarItem hasAdditionalOptions>
+        <ToolbarItem>
           <Dropdown
             onSelect={this.onToolbarKebabDropdownSelect}
             toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="card-view-data-toolbar-dropdown" />}
@@ -1436,7 +1430,7 @@ class PrimaryDetailCardView extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? res.filter(card => filters.products.length === 0 || filters.products.includes(card.name))
+        ? res.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
         : res;
 
     const icons = {
@@ -1456,7 +1450,6 @@ class PrimaryDetailCardView extends React.Component {
       <Gallery hasGutter role="region" aria-label="Selectable card container">
         {filtered.map((product, key) => (
           <Card
-            isHoverable
             key={product.name}
             id={'card-view-' + key}
             onKeyDown={this.onKeyDown}
@@ -1466,37 +1459,42 @@ class PrimaryDetailCardView extends React.Component {
             isSelected={activeCard === 'card-view-' + key}
             hasSelectableInput
           >
-            <CardHeader>
-              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
-              <CardActions>
-                <Dropdown
-                  isPlain
-                  position="right"
-                  onSelect={e => this.onCardKebabDropdownSelect(key, e)}
-                  toggle={
-                    <KebabToggle
-                      onToggle={(event, isCardKebabDropdownOpen) =>
-                        this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen)
+            <CardHeader
+              actions={{
+                actions: (
+                  <>
+                    <Dropdown
+                      isPlain
+                      position="right"
+                      onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
+                      toggle={
+                        <KebabToggle
+                          onToggle={(event, isCardKebabDropdownOpen) =>
+                            this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen)
+                          }
+                        />
                       }
+                      isOpen={this.state[key]}
+                      dropdownItems={[
+                        <DropdownItem key="trash" onClick={(e) => this.deleteItem(e, product)} position="right">
+                          <TrashIcon />
+                          Delete
+                        </DropdownItem>
+                      ]}
+                    />
+                    <Checkbox
+                      checked={isChecked}
+                      onClick={(event) => this.onCheckboxClick(event, product.id)}
+                      value={product.id}
+                      isChecked={selectedItems.includes(product.id)}
+                      aria-label="card checkbox example"
+                      id={`check-${product.id}`}
                     />
-                  }
-                  isOpen={this.state[key]}
-                  dropdownItems={[
-                    <DropdownItem key="trash" onClick={e => this.deleteItem(e, product)} position="right">
-                      <TrashIcon />
-                      Delete
-                    </DropdownItem>
-                  ]}
-                />
-                <Checkbox
-                  checked={isChecked}
-                  onClick={event => this.onCheckboxClick(event, product.id)}
-                  value={product.id}
-                  isChecked={selectedItems.includes(product.id)}
-                  aria-label="card checkbox example"
-                  id={`check-${product.id}`}
-                />
-              </CardActions>
+                  </>
+                )
+              }}
+            >
+              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
             </CardHeader>
             <CardTitle>{product.name}</CardTitle>
             <CardBody>{product.description}</CardBody>
@@ -1782,7 +1780,7 @@ class PrimaryDetailDataListInCard extends React.Component {
         isDropdownOpen: isOpen
       });
     };
-    this.onDropdownSelect = event => {
+    this.onDropdownSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -1792,7 +1790,7 @@ class PrimaryDetailDataListInCard extends React.Component {
       const element = document.getElementById('toggle-id');
       element.focus();
     };
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (id) => {
       this.setState({
         selectedDataListItemId: id,
         drawerPanelBodyContent: id.charAt(id.length - 1),
@@ -2056,7 +2054,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       { value: 'High', disabled: false }
     ];
 
-    this.onInputChange = newValue => {
+    this.onInputChange = (newValue) => {
       this.setState({ inputValue: newValue });
     };
 
@@ -2102,7 +2100,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       });
     };
 
-    this.onSelectDataListItem = id => {
+    this.onSelectDataListItem = (id) => {
       this.setState({
         selectedDataListItemId: id,
         isDrawerExpanded: true,

package/components/Card/CardHeadMain.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export interface CardHeadMainProps extends React.HTMLProps<HTMLDivElement> {
-    /** Content rendered inside the Card Head Main */
-    children?: React.ReactNode;
-    /** Additional classes added to the Card Head Main */
-    className?: string;
-}
-export declare const CardHeadMain: React.FunctionComponent<CardHeadMainProps>;
-//# sourceMappingURL=CardHeadMain.d.ts.map

package/components/Card/CardHeadMain.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardHeadMain.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/CardHeadMain.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACxE,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAQnE,CAAC"}

package/components/Card/CardHeadMain.js

@@ -1,9 +0,0 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-export const CardHeadMain = (_a) => {
-    var { children = null, className = '' } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css('pf-c-card__head-main', className) }, props), children));
-};
-CardHeadMain.displayName = 'CardHeadMain';
-//# sourceMappingURL=CardHeadMain.js.map

package/components/Card/CardHeadMain.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardHeadMain.js","sourceRoot":"","sources":["../../../../src/components/Card/CardHeadMain.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAS/C,MAAM,CAAC,MAAM,YAAY,GAA+C,CAAC,EAIrD,EAAE,EAAE;QAJiD,EACvE,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,EAAE,OAEI,EADf,KAAK,cAH+D,yBAIxE,CADS;IACe,OAAA,CACvB,2CAAK,SAAS,EAAE,GAAG,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAAM,KAAK,GAC9D,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/esm/components/Card/CardHeadMain.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export interface CardHeadMainProps extends React.HTMLProps<HTMLDivElement> {
-    /** Content rendered inside the Card Head Main */
-    children?: React.ReactNode;
-    /** Additional classes added to the Card Head Main */
-    className?: string;
-}
-export declare const CardHeadMain: React.FunctionComponent<CardHeadMainProps>;
-//# sourceMappingURL=CardHeadMain.d.ts.map

package/dist/esm/components/Card/CardHeadMain.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardHeadMain.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/CardHeadMain.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACxE,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAQnE,CAAC"}

package/dist/esm/components/Card/CardHeadMain.js

@@ -1,9 +0,0 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-export const CardHeadMain = (_a) => {
-    var { children = null, className = '' } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css('pf-c-card__head-main', className) }, props), children));
-};
-CardHeadMain.displayName = 'CardHeadMain';
-//# sourceMappingURL=CardHeadMain.js.map

package/dist/esm/components/Card/CardHeadMain.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardHeadMain.js","sourceRoot":"","sources":["../../../../src/components/Card/CardHeadMain.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAS/C,MAAM,CAAC,MAAM,YAAY,GAA+C,CAAC,EAIrD,EAAE,EAAE;QAJiD,EACvE,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,EAAE,OAEI,EADf,KAAK,cAH+D,yBAIxE,CADS;IACe,OAAA,CACvB,2CAAK,SAAS,EAAE,GAAG,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAAM,KAAK,GAC9D,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AACF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/js/components/Card/CardHeadMain.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export interface CardHeadMainProps extends React.HTMLProps<HTMLDivElement> {
-    /** Content rendered inside the Card Head Main */
-    children?: React.ReactNode;
-    /** Additional classes added to the Card Head Main */
-    className?: string;
-}
-export declare const CardHeadMain: React.FunctionComponent<CardHeadMainProps>;
-//# sourceMappingURL=CardHeadMain.d.ts.map

package/dist/js/components/Card/CardHeadMain.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardHeadMain.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/CardHeadMain.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACxE,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAQnE,CAAC"}

package/dist/js/components/Card/CardHeadMain.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardHeadMain = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_styles_1 = require("@patternfly/react-styles");
-const CardHeadMain = (_a) => {
-    var { children = null, className = '' } = _a, props = tslib_1.__rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: (0, react_styles_1.css)('pf-c-card__head-main', className) }, props), children));
-};
-exports.CardHeadMain = CardHeadMain;
-exports.CardHeadMain.displayName = 'CardHeadMain';
-//# sourceMappingURL=CardHeadMain.js.map

package/dist/js/components/Card/CardHeadMain.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardHeadMain.js","sourceRoot":"","sources":["../../../../src/components/Card/CardHeadMain.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2DAA+C;AASxC,MAAM,YAAY,GAA+C,CAAC,EAIrD,EAAE,EAAE;QAJiD,EACvE,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,EAAE,OAEI,EADf,KAAK,sBAH+D,yBAIxE,CADS;IACe,OAAA,CACvB,2CAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,sBAAsB,EAAE,SAAS,CAAC,IAAM,KAAK,GAC9D,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AARW,QAAA,YAAY,gBAQvB;AACF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/src/components/Card/CardHeadMain.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-
-export interface CardHeadMainProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Card Head Main */
-  children?: React.ReactNode;
-  /** Additional classes added to the Card Head Main */
-  className?: string;
-}
-
-export const CardHeadMain: React.FunctionComponent<CardHeadMainProps> = ({
-  children = null,
-  className = '',
-  ...props
-}: CardHeadMainProps) => (
-  <div className={css('pf-c-card__head-main', className)} {...props}>
-    {children}
-  </div>
-);
-CardHeadMain.displayName = 'CardHeadMain';

package/src/components/Card/__tests__/CardHeadMain.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { CardHeadMain } from '../CardHeadMain';
-
-describe('CardHeadMain', () => {
-  test('renders with PatternFly Core styles', () => {
-    const { asFragment } = render(<CardHeadMain>text</CardHeadMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('className is added to the root element', () => {
-    render(<CardHeadMain className="extra-class">text</CardHeadMain>);
-    expect(screen.getByText('text')).toHaveClass('extra-class');
-  });
-
-  test('extra props are spread to the root element', () => {
-    const testId = 'card-head-main';
-
-    render(<CardHeadMain data-testid={testId} />);
-    expect(screen.getByTestId(testId)).toBeInTheDocument();
-  });
-});

package/src/components/Card/__tests__/__snapshots__/CardHeadMain.test.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CardHeadMain renders with PatternFly Core styles 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-card__head-main"
-  >
-    text
-  </div>
-</DocumentFragment>
-`;

package/src/components/Card/examples/CardOnlyImageInCardHead.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Brand, Card, CardBody, CardFooter, CardHeader, CardHeaderMain, CardTitle } from '@patternfly/react-core';
-import pfLogo from './pfLogo.svg';
-
-export const CardOnlyImageInCardHead: React.FunctionComponent = () => (
-  <Card>
-    <CardHeader>
-      <CardHeaderMain>
-        <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
-      </CardHeaderMain>
-    </CardHeader>
-    <CardTitle>Header</CardTitle>
-    <CardBody>Body</CardBody>
-    <CardFooter>Footer</CardFooter>
-  </Card>
-);