@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

package/src/components/Wizard/WizardToggle.tsx

@@ -42,8 +42,8 @@ export const WizardToggle = ({
   'aria-label': ariaLabel = 'Wizard toggle'
 }: WizardToggleProps) => {
   const isActiveSubStep = isWizardSubStep(activeStep);
-  const parentStep = isActiveSubStep && steps.find(step => step.id === activeStep.parentId);
-  const nonSubSteps = steps.filter(step => !isWizardSubStep(step));
+  const parentStep = isActiveSubStep && steps.find((step) => step.id === activeStep.parentId);
+  const nonSubSteps = steps.filter((step) => !isWizardSubStep(step));
   const wizardToggleIndex = nonSubSteps.indexOf(parentStep || activeStep) + 1;
 
   const handleKeyClicks = React.useCallback(
@@ -65,7 +65,7 @@ export const WizardToggle = ({
     };
   }, [handleKeyClicks]);
 
-  const bodyContent = steps.map(step => {
+  const bodyContent = steps.map((step) => {
     const props: WizardStepProps = step.component?.props || {};
     const { children, body, ...propsWithoutChildren } = props;
 

package/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -1,6 +1,15 @@
 import React from 'react';
 
-import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput, Wizard, WizardStep } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  Wizard,
+  WizardStep
+} from '@patternfly/react-core';
 
 interface SampleFormProps {
   value: string;

package/src/components/Wizard/examples/WizardWithCustomFooter.tsx

@@ -1,6 +1,16 @@
 import React from 'react';
 
-import { Button, Flex, FlexItem, Spinner, useWizardContext, Wizard, WizardFooter, WizardFooterWrapper, WizardStep } from '@patternfly/react-core';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  Spinner,
+  useWizardContext,
+  Wizard,
+  WizardFooter,
+  WizardFooterWrapper,
+  WizardStep
+} from '@patternfly/react-core';
 
 const CustomWizardFooter = () => {
   const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();
@@ -22,7 +32,7 @@ const CustomStepTwoFooter = () => {
 
   async function onNext() {
     setIsLoading(true);
-    await new Promise(resolve => setTimeout(resolve, 2000));
+    await new Promise((resolve) => setTimeout(resolve, 2000));
     setIsLoading(false);
 
     goToNextStep();
@@ -70,7 +80,7 @@ export const WizardWithCustomFooter: React.FunctionComponent = () => {
   async function onSubmit(): Promise<void> {
     setIsSubmitting(true);
 
-    await new Promise(resolve => setTimeout(resolve, 5000));
+    await new Promise((resolve) => setTimeout(resolve, 5000));
 
     setIsSubmitting(false);
   }

package/src/components/Wizard/examples/WizardWithCustomNav.tsx

@@ -16,7 +16,7 @@ export const WizardWithCustomNav: React.FunctionComponent = () => {
     goToStepByIndex: (index: number) => void
   ) => (
     <WizardNav isExpanded={isExpanded}>
-      {steps.map(step => (
+      {steps.map((step) => (
         <WizardNavItem
           key={step.id}
           id={step.id}

package/src/demos/Card/Card.md

@@ -5,19 +5,18 @@ section: patterns
 
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import pfIcon from './pf-logo-small.svg';
-import activeMQIcon from './activemq-core_200x150.png';
-import avroIcon from './camel-avro_200x150.png';
-import dropBoxIcon from './camel-dropbox_200x150.png';
-import infinispanIcon from './camel-infinispan_200x150.png';
-import saxonIcon from './camel-saxon_200x150.png';
-import sparkIcon from './camel-spark_200x150.png';
-import swaggerIcon from './camel-swagger-java_200x150.png';
-import azureIcon from './FuseConnector_Icons_AzureServices.png';
-import restIcon from './FuseConnector_Icons_REST.png';
+import pfIcon from '../assets/pf-logo-small.svg';
+import activeMQIcon from '../assets/activemq-core_200x150.png';
+import avroIcon from '../assets/camel-avro_200x150.png';
+import dropBoxIcon from '../assets/camel-dropbox_200x150.png';
+import infinispanIcon from '../assets/camel-infinispan_200x150.png';
+import saxonIcon from '../assets/camel-saxon_200x150.png';
+import sparkIcon from '../assets/camel-spark_200x150.png';
+import swaggerIcon from '../assets/camel-swagger-java_200x150.png';
+import azureIcon from '../assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '../assets/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { data } from './CardData.jsx';
 
@@ -37,7 +36,6 @@ import {
   CardHeader,
   CardTitle,
   CardBody,
-  Checkbox,
   Divider,
   Dropdown,
   DropdownItem,
@@ -60,7 +58,6 @@ import {
   Pagination,
   TextContent,
   Text,
-  Title,
   Toolbar,
   ToolbarItem,
   ToolbarFilter,
@@ -71,20 +68,18 @@ import {
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import pfIcon from './pf-logo-small.svg';
-import activeMQIcon from './activemq-core_200x150.png';
-import avroIcon from './camel-avro_200x150.png';
-import dropBoxIcon from './camel-dropbox_200x150.png';
-import infinispanIcon from './camel-infinispan_200x150.png';
-import saxonIcon from './camel-saxon_200x150.png';
-import sparkIcon from './camel-spark_200x150.png';
-import swaggerIcon from './camel-swagger-java_200x150.png';
-import azureIcon from './FuseConnector_Icons_AzureServices.png';
-import restIcon from './FuseConnector_Icons_REST.png';
+import pfIcon from '../assets/pf-logo-small.svg';
+import activeMQIcon from '../assets/activemq-core_200x150.png';
+import avroIcon from '../assets/camel-avro_200x150.png';
+import dropBoxIcon from '../assets/camel-dropbox_200x150.png';
+import infinispanIcon from '../assets/camel-infinispan_200x150.png';
+import saxonIcon from '../assets/camel-saxon_200x150.png';
+import sparkIcon from '../assets/camel-spark_200x150.png';
+import swaggerIcon from '../assets/camel-swagger-java_200x150.png';
+import azureIcon from '../assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '../assets/FuseConnector_Icons_REST.png';
 import { data } from './CardData.jsx';
 
 class CardViewBasic extends React.Component {
@@ -137,19 +132,18 @@ class CardViewBasic extends React.Component {
     };
 
     this.onCardKebabDropdownToggle = (key, event) => {
-      event?.stopPropagation();
       this.setState((prevState) => ({
         [key]: !prevState[key]
       }));
     };
 
-    this.onCardKebabDropdownSelect = (key, event) => {
+    this.onCardKebabDropdownSelect = (key) => {
       this.setState({
         [key]: !this.state[key]
       });
     };
 
-    this.deleteItem = (item) => (event) => {
+    this.deleteItem = (item) => () => {
       const filter = (getter) => (val) => getter(val) !== item.id;
       this.setState({
         cardData: this.state.cardData.filter(filter(({ id }) => id)),
@@ -185,7 +179,7 @@ class CardViewBasic extends React.Component {
     this.onNameSelect = (event, selection) => {
       const checked = event.target.checked;
       this.setState((prevState) => {
-        const prevSelections = prevState.filters['products'];
+        const prevSelections = prevState.filters.products;
         return {
           filters: {
             ...prevState.filters,
@@ -214,29 +208,9 @@ class CardViewBasic extends React.Component {
       }
     };
 
-    this.onKeyDown = (event, productId) => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      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: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
-              }
-            : {
-                selectedItems: [...prevState.selectedItems, productId * 1],
-                areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
-              };
-        });
-      }
-    };
-
     this.onClick = (productId) => {
-      this.setState((prevState) => {
-        return prevState.selectedItems.includes(productId * 1)
+      this.setState((prevState) =>
+        prevState.selectedItems.includes(productId * 1)
           ? {
               selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
@@ -244,8 +218,8 @@ class CardViewBasic extends React.Component {
           : {
               selectedItems: [...prevState.selectedItems, productId * 1],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
-            };
-      });
+            }
+      );
     };
   }
 
@@ -268,17 +242,19 @@ class CardViewBasic extends React.Component {
 
   splitCheckboxSelectAll(e) {
     const { checked } = e.target;
-    const { isChecked, cardData } = this.state;
+    const { isChecked } = this.state;
     let collection = [];
 
     if (checked) {
-      for (var i = 0; i <= 9; i++) collection = [...collection, i];
+      for (let i = 0; i <= 9; i++) {
+        collection = [...collection, i];
+      }
     }
 
     this.setState(
       {
         selectedItems: collection,
-        isChecked: isChecked,
+        isChecked,
         areAllSelected: checked
       },
       this.updateSelected
@@ -287,7 +263,7 @@ class CardViewBasic extends React.Component {
 
   selectPage(e) {
     const { checked } = e.target;
-    const { isChecked, totalItemCount, perPage } = this.state;
+    const { totalItemCount, perPage } = this.state;
     let collection = [];
 
     collection = this.getAllItems();
@@ -302,12 +278,12 @@ class CardViewBasic extends React.Component {
     );
   }
 
-  selectAll(e) {
-    const { checked } = e.target;
-    const { isChecked } = this.state;
+  selectAll() {
 
     let collection = [];
-    for (var i = 0; i <= 9; i++) collection = [...collection, i];
+    for (let i = 0; i <= 9; i++) {
+      collection = [...collection, i];
+    }
 
     this.setState(
       {
@@ -319,9 +295,7 @@ class CardViewBasic extends React.Component {
     );
   }
 
-  selectNone(e) {
-    const { checked } = e.target;
-    const { isChecked, selectedItems } = this.state;
+  selectNone() {
     this.setState(
       {
         selectedItems: [],
@@ -344,7 +318,7 @@ class CardViewBasic extends React.Component {
 
   updateSelected() {
     const { cardData, selectedItems } = this.state;
-    let rows = cardData.map((post) => {
+    const rows = cardData.map((post) => {
       post.selected = selectedItems.includes(post.id);
       return post;
     });
@@ -355,7 +329,7 @@ class CardViewBasic extends React.Component {
   }
 
   renderPagination() {
-    const { page, perPage, totalItemCount, cardData } = this.state;
+    const { page, perPage, totalItemCount } = this.state;
 
     const defaultPerPageOptions = [
       {
@@ -387,7 +361,7 @@ class CardViewBasic extends React.Component {
   }
 
   buildSelectDropdown() {
-    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected, filters, cardData } = this.state;
+    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
     const numSelected = selectedItems.length;
     const allSelected = areAllSelected;
     const anySelected = numSelected > 0;
@@ -524,19 +498,13 @@ class CardViewBasic extends React.Component {
 
   render() {
     const {
-      isUpperToolbarDropdownOpen,
-      isLowerToolbarDropdownOpen,
-      isUpperToolbarKebabDropdownOpen,
       isLowerToolbarKebabDropdownOpen,
-      isCardKebabDropdownOpen,
-      splitButtonDropdownIsOpen,
-      activeItem,
       filters,
       cardData,
-      checked,
       selectedItems,
-      areAllSelected,
-      isChecked,
+      totalItemCount,
+      onPerPageSelect,
+      onSetPage,
       page,
       perPage
     } = this.state;
@@ -615,9 +583,7 @@ class CardViewBasic extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? data.filter((card) => {
-            return filters.products.length === 0 || filters.products.includes(card.name);
-          })
+        ? data.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
         : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);
 
     return (
@@ -652,17 +618,20 @@ class CardViewBasic extends React.Component {
               </Card>
               {filtered.map((product, key) => (
                 <Card
-                  hasSelectableInput
                   isCompact
-                  isSelectableRaised
+                  isClickable
+                  isSelectable
                   key={product.name}
                   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
+                    selectableActions={{
+                      isChecked: selectedItems.includes(product.id),
+                      selectableActionId: `selectable-actions-item-${product.id}`,
+                      selectableActionAriaLabelledby: product.name.replace(/ /g, '-'),
+                      name: `check-${product.id}`,
+                      onChange: () => this.onClick(product.id)
+                    }}
                     actions={{
                       actions: (
                         <>
@@ -674,7 +643,9 @@ class CardViewBasic extends React.Component {
                                 ref={toggleRef}
                                 aria-label={`${product.name} actions`}
                                 variant="plain"
-                                onClick={(e) => this.onCardKebabDropdownToggle(key, e)}
+                                onClick={(e) => {
+                                  this.onCardKebabDropdownToggle(key, e);
+                                }}
                                 isExpanded={this.state[key]}
                               >
                                 <EllipsisVIcon />
@@ -689,13 +660,6 @@ class CardViewBasic extends React.Component {
                               </DropdownItem>
                             </DropdownList>
                           </Dropdown>
-                          <Checkbox
-                            checked={isChecked}
-                            value={product.id}
-                            isChecked={selectedItems.includes(product.id)}
-                            aria-label="card checkbox example"
-                            id={`check-${product.id}`}
-                          />
                         </>
                       )
                     }}
@@ -710,12 +674,11 @@ class CardViewBasic extends React.Component {
           </PageSection>
           <PageSection isFilled={false} sticky="bottom" padding={{ default: 'noPadding' }} variant="light">
             <Pagination
-              itemCount={this.state.totalItemCount}
+              itemCount={totalItemCount}
               page={page}
-              page={this.state.page}
-              perPage={this.state.perPage}
-              onPerPageSelect={this.onPerPageSelect}
-              onSetPage={this.onSetPage}
+              perPage={perPage}
+              onPerPageSelect={onPerPageSelect}
+              onSetPage={onSetPage}
               variant="bottom"
             />
           </PageSection>

package/src/demos/Card/CardData.jsx

@@ -1,62 +1,67 @@
 export const data = [
-    {
-      "id": 0,
-      "name": "PatternFly",
-      "description": "PatternFly is a community project that promotes design commonality and improves user experience.",
-      "icon": "pfIcon"
-    },
-    {
-      "id": 1,
-      "name": "ActiveMQ",
-      "description": "The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.",
-      "icon": "activeMQIcon"
-    },
-    {
-      "id": 2,
-      "name": "Apache Spark",
-      "description": "This documentation page covers the Apache Spark component for the Apache Camel.",
-      "icon": "sparkIcon"
-    },
-    {
-      "id": 3,
-      "name": "Avro",
-      "description": "This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.",
-      "icon": "avroIcon"
-    },
-    {
-      "id": 4,
-      "name": "Azure Services",
-      "description": "The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.",
-      "icon": "azureIcon"
-    },
-    {
-      "id": 5,
-      "name": "Crypto",
-      "description": "For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.",
-      "icon": "saxonIcon"
-    },
-    {
-      "id": 6,
-      "name": "DropBox",
-      "description": "The dropbox component allows you to treat Dropbox remote folders as a producer or consumer of messages.",
-      "icon": "dropBoxIcon"
-    },
-    {
-      "id": 7,
-      "name": "JBoss Data Grid",
-      "description": "Read or write to a fully-supported distributed cache and data grid for faster integration services.",
-      "icon": "infinispanIcon"
-    },
-    {
-      "id": 8,
-      "name": "REST",
-      "description": "The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport. From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.",
-      "icon": "restIcon"
-    },
-    {
-      "id": 9,
-      "name": "SWAGGER",
-      "description": "Expose REST services and their APIs using Swagger specification.",
-      "icon": "swaggerIcon"
-    }
-  ]
+  {
+    id: 0,
+    name: 'PatternFly',
+    description: 'PatternFly is a community project that promotes design commonality and improves user experience.',
+    icon: 'pfIcon'
+  },
+  {
+    id: 1,
+    name: 'ActiveMQ',
+    description:
+      'The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.',
+    icon: 'activeMQIcon'
+  },
+  {
+    id: 2,
+    name: 'Apache Spark',
+    description: 'This documentation page covers the Apache Spark component for the Apache Camel.',
+    icon: 'sparkIcon'
+  },
+  {
+    id: 3,
+    name: 'Avro',
+    description:
+      'This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.',
+    icon: 'avroIcon'
+  },
+  {
+    id: 4,
+    name: 'Azure Services',
+    description: 'The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.',
+    icon: 'azureIcon'
+  },
+  {
+    id: 5,
+    name: 'Crypto',
+    description:
+      'For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.',
+    icon: 'saxonIcon'
+  },
+  {
+    id: 6,
+    name: 'DropBox',
+    description:
+      'The dropbox component allows you to treat Dropbox remote folders as a producer or consumer of messages.',
+    icon: 'dropBoxIcon'
+  },
+  {
+    id: 7,
+    name: 'JBoss Data Grid',
+    description: 'Read or write to a fully-supported distributed cache and data grid for faster integration services.',
+    icon: 'infinispanIcon'
+  },
+  {
+    id: 8,
+    name: 'REST',
+    description:
+      'The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport. From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.',
+    icon: 'restIcon'
+  },
+  {
+    id: 9,
+    name: 'SWAGGER',
+    description: 'Expose REST services and their APIs using Swagger specification.',
+    icon: 'swaggerIcon'
+  }
+];

package/src/demos/CustomMenus/ApplicationLauncher.md

@@ -19,7 +19,7 @@ propComponents:
 ---
 
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import pfIcon from './examples/pf-logo-small.svg';
+import pfIcon from '../assets/pf-logo-small.svg';
 
 As the application launcher component is now deprecated, an application launcher may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.
 

package/src/demos/CustomMenus/CustomMenus.md

@@ -17,11 +17,11 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import pfIcon from './examples/pf-logo-small.svg';
+import pfIcon from '../assets/pf-logo-small.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import avatarImg from './examples/avatarImg.svg';
+import avatarImg from '../assets/avatarImg.svg';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -61,7 +61,6 @@ const columnNames = {
   location: 'Location'
 };
 
-/* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterAttributeSearch: React.FunctionComponent = () => {
   // Set up repo filtering
   const [searchValue, setSearchValue] = React.useState('');

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -50,7 +50,6 @@ const columnNames = {
   location: 'Location'
 };
 
-/* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterCheckboxSelect: React.FunctionComponent = () => {
   // Set up repo filtering
   const [selections, setSelections] = React.useState<string[]>([]);

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -60,7 +60,6 @@ const columnNames = {
   location: 'Location'
 };
 
-/* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterFaceted: React.FunctionComponent = () => {
   // Set up repo filtering
   const [locationSelections, setLocationSelections] = React.useState<string[]>([]);

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -59,7 +59,6 @@ const columnNames = {
   location: 'Location'
 };
 
-/* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   // Set up repo filtering
   const [locationSelections, setLocationSelections] = React.useState<string[]>([]);

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -57,7 +57,6 @@ const columnNames = {
   location: 'Location'
 };
 
-/* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterSameSelectGroup: React.FunctionComponent = () => {
   // Set up repo filtering
   const [locationSelection, setLocationSelection] = React.useState('All locations');

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -56,7 +56,6 @@ const columnNames = {
   location: 'Location'
 };
 
-/* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterSearchInput: React.FunctionComponent = () => {
   // Set up repo filtering
   const [searchValue, setSearchValue] = React.useState('');

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -47,7 +47,6 @@ const columnNames = {
   location: 'Location'
 };
 
-/* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterSingleSelect: React.FunctionComponent = () => {
   // Set up repo filtering
   const [searchValue, setSearchValue] = React.useState('');

package/src/demos/Masthead.md

@@ -10,8 +10,8 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import pfIcon from './Card/pf-logo-small.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfIcon from './assets/pf-logo-small.svg';
 import pfLogo from './assets/pf-logo.svg';
 import { Link } from '@reach/router';