Replace deprecated SFC type with FunctionComponent

packages/react-core/src/components/DescriptionList/DescriptionListGroup.tsx

@@ -9,7 +9,7 @@ export interface DescriptionListGroupProps extends React.HTMLProps<HTMLDivElemen
   className?: string;
 }
 
-export const DescriptionListGroup: React.FC<DescriptionListGroupProps> = ({
+export const DescriptionListGroup: React.FunctionComponent<DescriptionListGroupProps> = ({
   className,
   children,
   ...props

packages/react-core/src/components/Drawer/DrawerActions.tsx

@@ -9,7 +9,7 @@ export interface DrawerActionsProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-export const DrawerActions: React.SFC<DrawerActionsProps> = ({
+export const DrawerActions: React.FunctionComponent<DrawerActionsProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

packages/react-core/src/components/Drawer/DrawerCloseButton.tsx

@@ -13,7 +13,7 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
   'aria-label'?: string;
 }
 
-export const DrawerCloseButton: React.SFC<DrawerCloseButtonProps> = ({
+export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   onClose = () => undefined as any,

packages/react-core/src/components/Drawer/DrawerContent.tsx

@@ -15,7 +15,7 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   colorVariant?: DrawerColorVariant | 'light-200' | 'default';
 }
 
-export const DrawerContent: React.SFC<DrawerContentProps> = ({
+export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

packages/react-core/src/components/Drawer/DrawerContentBody.tsx

@@ -11,7 +11,7 @@ export interface DrawerContentBodyProps extends React.HTMLProps<HTMLDivElement>
   hasPadding?: boolean;
 }
 
-export const DrawerContentBody: React.SFC<DrawerContentBodyProps> = ({
+export const DrawerContentBody: React.FunctionComponent<DrawerContentBodyProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

packages/react-core/src/components/Drawer/DrawerHead.tsx

@@ -12,7 +12,7 @@ export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
   hasNoPadding?: boolean;
 }
 
-export const DrawerHead: React.SFC<DrawerHeadProps> = ({
+export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

packages/react-core/src/components/Drawer/DrawerMain.tsx

@@ -9,7 +9,7 @@ export interface DrawerMainProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-export const DrawerMain: React.SFC<DrawerMainProps> = ({
+export const DrawerMain: React.FunctionComponent<DrawerMainProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

packages/react-core/src/components/Drawer/DrawerPanelBody.tsx

@@ -11,7 +11,7 @@ export interface DrawerPanelBodyProps extends React.HTMLProps<HTMLDivElement> {
   hasNoPadding?: boolean;
 }
 
-export const DrawerPanelBody: React.SFC<DrawerPanelBodyProps> = ({
+export const DrawerPanelBody: React.FunctionComponent<DrawerPanelBodyProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

packages/react-core/src/components/Drawer/DrawerSection.tsx

@@ -12,7 +12,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   colorVariant?: DrawerColorVariant | 'light-200' | 'default';
 }
 
-export const DrawerSection: React.SFC<DrawerSectionProps> = ({
+export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

packages/react-core/src/components/Dropdown/BadgeToggle.tsx

@@ -52,7 +52,7 @@ export const BadgeToggle: React.FunctionComponent<BadgeToggleProps> = ({
   bubbleEvent = false,
   onToggle = () => undefined as void,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: BadgeToggleProps) => (
   <Toggle

packages/react-core/src/components/Dropdown/Dropdown.tsx

@@ -49,7 +49,7 @@ export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps<HTML
 export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   onSelect,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ouiaId,
   ouiaSafe,
   alignments,

packages/react-core/src/components/Dropdown/DropdownItem.tsx

@@ -63,7 +63,7 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
   listItemClassName,
   onClick,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   additionalChild,
   customChild,
   tabIndex = -1,

packages/react-core/src/components/Dropdown/DropdownSeparator.tsx

@@ -14,7 +14,7 @@ export interface SeparatorProps extends React.HTMLProps<HTMLAnchorElement>, OUIA
 export const DropdownSeparator: React.FunctionComponent<SeparatorProps> = ({
   className = '',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ouiaId,
   ouiaSafe,
   ...props

packages/react-core/src/components/Dropdown/DropdownToggle.tsx

@@ -75,7 +75,7 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
   ouiaId,
   ouiaSafe,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: DropdownToggleProps) => {
   const ouiaProps = useOUIAProps(DropdownToggle.displayName, ouiaId, ouiaSafe);

packages/react-core/src/components/Dropdown/KebabToggle.tsx

@@ -47,7 +47,7 @@ export const KebabToggle: React.FunctionComponent<KebabToggleProps> = ({
   bubbleEvent = false,
   onToggle = () => undefined as void,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: KebabToggleProps) => (
   <Toggle

packages/react-core/src/components/OverflowMenu/OverflowMenuContent.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuContentProps extends React.HTMLProps<HTMLDivElement
   isPersistent?: boolean;
 }
 
-export const OverflowMenuContent: React.SFC<OverflowMenuContentProps> = ({
+export const OverflowMenuContent: React.FunctionComponent<OverflowMenuContentProps> = ({
   className,
   children,
   isPersistent

packages/react-core/src/components/OverflowMenu/OverflowMenuControl.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuControlProps extends React.HTMLProps<HTMLDivElement
   hasAdditionalOptions?: boolean;
 }
 
-export const OverflowMenuControl: React.SFC<OverflowMenuControlProps> = ({
+export const OverflowMenuControl: React.FunctionComponent<OverflowMenuControlProps> = ({
   className,
   children,
   hasAdditionalOptions,

packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx

@@ -9,7 +9,7 @@ export interface OverflowMenuDropdownItemProps extends DropdownItemProps {
   index?: number;
 }
 
-export const OverflowMenuDropdownItem: React.SFC<OverflowMenuDropdownItemProps> = ({
+export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropdownItemProps> = ({
   children,
   isShared = false,
   index,

packages/react-core/src/components/OverflowMenu/OverflowMenuGroup.tsx

@@ -14,7 +14,7 @@ export interface OverflowMenuGroupProps extends React.HTMLProps<HTMLDivElement>
   groupType?: 'button' | 'icon';
 }
 
-export const OverflowMenuGroup: React.FC<OverflowMenuGroupProps> = ({
+export const OverflowMenuGroup: React.FunctionComponent<OverflowMenuGroupProps> = ({
   className,
   children,
   isPersistent = false,

packages/react-core/src/components/OverflowMenu/OverflowMenuItem.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuItemProps extends React.HTMLProps<HTMLDivElement> {
   isPersistent?: boolean;
 }
 
-export const OverflowMenuItem: React.SFC<OverflowMenuItemProps> = ({
+export const OverflowMenuItem: React.FunctionComponent<OverflowMenuItemProps> = ({
   className,
   children,
   isPersistent = false

packages/react-core/src/components/Tabs/TabContent.tsx

@@ -28,7 +28,7 @@ const variantStyle = {
   light300: styles.modifiers.light_300
 };
 
-const TabContentBase: React.FC<TabContentProps> = ({
+const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   id,
   activeKey,
   'aria-label': ariaLabel,

packages/react-integration/demo-app-ts/src/components/demos/ConsolesDemo/ConsolesDemo.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { AccessConsoles, SerialConsole, DesktopViewer, VncConsole } from '@patternfly/react-console';
 import { debounce } from '@patternfly/react-core';
 
-export const ConsolesDemo: React.FC = () => {
+export const ConsolesDemo: React.FunctionComponent = () => {
   const [status, setStatus] = React.useState('disconnected');
   const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;
   const ref = React.createRef<any>();
@@ -32,7 +32,7 @@ export const ConsolesDemo: React.FC = () => {
 };
 ConsolesDemo.displayName = 'ConsolesDemo';
 
-const SerialConsoleCustom: React.FC<{ type: string; typeText: string }> = () => {
+const SerialConsoleCustom: React.FunctionComponent<{ type: string; typeText: string }> = () => {
   const [status, setStatus] = React.useState('disconnected');
   const setConnected = React.useRef(debounce(() => setStatus('connected'), 3000)).current;
   const ref2 = React.createRef<any>();

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Basics.tsx

@@ -187,7 +187,7 @@ export const MultiEdge = withTopologySetup(() => {
   return null;
 });
 
-const groupStory = (groupType: string): React.FC => () => {
+const groupStory = (groupType: string): React.FunctionComponent => () => {
   useComponentFactory(defaultComponentFactory);
   useModel(
     React.useMemo(

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/CollapsibleGroups.tsx

@@ -118,7 +118,7 @@ interface TopologyViewComponentProps {
   vis: Visualization;
 }
 
-const TopologyViewComponent: React.FC<TopologyViewComponentProps> = ({ vis }) => {
+const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = ({ vis }) => {
   const [selectedIds, setSelectedIds] = React.useState<string[]>();
   const [collapseBlue, setCollapseBlue] = React.useState<boolean>(false);
   const [collapseLightBlue, setCollapseLightBlue] = React.useState<boolean>(false);

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Connectors.tsx

@@ -278,7 +278,7 @@ export const CreateConnector = withTopologySetup(() => {
   return null;
 });
 
-const NodeWithPointAnchor: React.FC<{ element: Node } & WithDragNodeProps> = props => {
+const NodeWithPointAnchor: React.FunctionComponent<{ element: Node } & WithDragNodeProps> = props => {
   const nodeRef = useSvgAnchor();
   const targetRef = useSvgAnchor(AnchorEnd.target, 'edge-point');
   const { width, height } = props.element.getDimensions();

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Groups.tsx

@@ -19,7 +19,7 @@ import DemoDefaultNode from './components/DemoDefaultNode';
 import defaultLayoutFactory from './layouts/defaultLayoutFactory';
 import withTopologySetup from './utils/withTopologySetup';
 
-const GroupWithDecorator: React.FC<{ element: Node } & WithDragNodeProps> = observer(props => {
+const GroupWithDecorator: React.FunctionComponent<{ element: Node } & WithDragNodeProps> = observer(props => {
   const trafficSourceRef = useSvgAnchor(AnchorEnd.source, 'traffic');
   const b = props.element.getBounds();
   return (

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Layouts.tsx

@@ -31,7 +31,7 @@ const getModel = (layout: string): Model => {
   return model;
 };
 
-const layoutStory = (model: Model): React.FC => () => {
+const layoutStory = (model: Model): React.FunctionComponent => () => {
   useLayoutFactory(defaultLayoutFactory);
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(stylesComponentFactory);

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/PanZoom.tsx

@@ -47,7 +47,7 @@ const model: Model = {
   ]
 };
 
-export const PanZoom: React.FC = withTopologySetup(() => {
+export const PanZoom: React.FunctionComponent = withTopologySetup(() => {
   useComponentFactory(defaultComponentFactory);
   useComponentFactory(
     React.useCallback<ComponentFactory>(kind => {

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/Selection.tsx

@@ -50,7 +50,7 @@ const twoNodeModel: Model = {
   ]
 };
 
-export const UncontrolledSelection: React.FC = withTopologySetup(() => {
+export const UncontrolledSelection: React.FunctionComponent = withTopologySetup(() => {
   useComponentFactory(
     React.useCallback<ComponentFactory>((kind, type) => {
       const widget = defaultComponentFactory(kind, type);
@@ -100,7 +100,7 @@ export const ControlledSelection = withTopologySetup(() => {
   return null;
 });
 
-export const MultiSelect: React.FC = withTopologySetup(() => {
+export const MultiSelect: React.FunctionComponent = withTopologySetup(() => {
   useModel(twoNodeModel);
   useComponentFactory(
     React.useCallback<ComponentFactory>((kind, type) => {
@@ -144,7 +144,7 @@ for (let i = 1; i <= 100; i++) {
   }
 }
 
-export const Performance: React.FC = withTopologySetup(() => {
+export const Performance: React.FunctionComponent = withTopologySetup(() => {
   useModel(perfModel);
   useComponentFactory(
     React.useCallback<ComponentFactory>((kind, type) => {

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyDemo.tsx

@@ -53,7 +53,7 @@ const TOPOLOGY_PACKAGE = 9;
 const COMPLEX_GROUP = 10;
 const COLLAPSIBLE_GROUPS = 11;
 
-export const TopologyDemo: React.FC = () => {
+export const TopologyDemo: React.FunctionComponent = () => {
   const [activeKey, setActiveKey] = React.useState<number>(STYLES);
   const [activeSecondaryKey, setActiveSecondaryKey] = React.useState<number>(0);
   const [activeTertiaryKey, setActiveTertiaryKey] = React.useState<number>(0);

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx

@@ -63,7 +63,10 @@ interface TopologyViewComponentProps {
   sideBarResizable?: boolean;
 }
 
-const TopologyViewComponent: React.FC<TopologyViewComponentProps> = ({ useSidebar, sideBarResizable = false }) => {
+const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps> = ({
+  useSidebar,
+  sideBarResizable = false
+}) => {
   const [selectedIds, setSelectedIds] = React.useState<string[]>();
   const [layoutDropdownOpen, setLayoutDropdownOpen] = React.useState(false);
   const [layout, setLayout] = React.useState('ColaNoForce');

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomCircleNode.tsx

@@ -27,7 +27,7 @@ type CustomCircleNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const CustomCircle: React.FC<ShapeProps> = ({ element, className }) => {
+const CustomCircle: React.FunctionComponent<ShapeProps> = ({ element, className }) => {
   useAnchor(EllipseAnchor);
   React.useEffect(() => {
     // init height
@@ -48,7 +48,7 @@ const CustomCircle: React.FC<ShapeProps> = ({ element, className }) => {
   );
 };
 
-const CustomCircleNode: React.FC<CustomCircleNodeProps> = props => (
+const CustomCircleNode: React.FunctionComponent<CustomCircleNodeProps> = props => (
   <DemoDefaultNode getCustomShape={() => CustomCircle} {...props} />
 );
 

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPathNode.tsx

@@ -23,7 +23,7 @@ type CustomPathNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const CustomPathNode: React.FC<CustomPathNodeProps> = props => (
+const CustomPathNode: React.FunctionComponent<CustomPathNodeProps> = props => (
   <DemoDefaultNode getCustomShape={() => Path} {...props} />
 );
 

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomPolygonNode.tsx

@@ -23,7 +23,7 @@ type CustomPolygonNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const CustomPolygonNode: React.FC<CustomPolygonNodeProps> = props => (
+const CustomPolygonNode: React.FunctionComponent<CustomPolygonNodeProps> = props => (
   <DemoDefaultNode getCustomShape={() => Polygon} {...props} />
 );
 

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/CustomRectNode.tsx

@@ -25,12 +25,12 @@ type CustomRectNodeProps = {
   WithCreateConnectorProps &
   WithContextMenuProps;
 
-const CustomRect: React.FC<ShapeProps> = observer(({ className }) => {
+const CustomRect: React.FunctionComponent<ShapeProps> = observer(({ className }) => {
   useAnchor(RectAnchor);
   return <rect className={className} x={0} y={0} width={100} height={20} />;
 });
 
-const CustomRectNode: React.FC<CustomRectNodeProps> = props => (
+const CustomRectNode: React.FunctionComponent<CustomRectNodeProps> = props => (
   <DemoDefaultNode getCustomShape={() => CustomRect} {...props} />
 );
 

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultEdge.tsx

@@ -23,7 +23,7 @@ interface BendpointProps {
   point: Point;
 }
 
-const Bendpoint: React.FC<BendpointProps> = observer(({ point }) => {
+const Bendpoint: React.FunctionComponent<BendpointProps> = observer(({ point }) => {
   const [hover, setHover] = React.useState(false);
   const [, ref] = useBendpoint(point);
   return (
@@ -40,7 +40,7 @@ const Bendpoint: React.FC<BendpointProps> = observer(({ point }) => {
   );
 });
 
-const DefaultEdge: React.FC<EdgeProps> = ({
+const DefaultEdge: React.FunctionComponent<EdgeProps> = ({
   element,
   sourceDragRef,
   targetDragRef,

packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/components/DefaultGroup.tsx

@@ -23,7 +23,7 @@ type GroupProps = {
   WithDndDragProps &
   WithDndDropProps;
 
-const DefaultGroup: React.FC<GroupProps> = ({
+const DefaultGroup: React.FunctionComponent<GroupProps> = ({
   element,
   children,
   selected,