Fix/3223 integration ts

packages/react-integration/demo-app-ts/src/App.tsx

@@ -10,7 +10,7 @@ interface AppState {
 
 class App extends React.Component<{}, AppState> {
   state: AppState = {
-    activeItem: null
+    activeItem: ''
   };
 
   private onNavSelect = (selectedItem: { itemId: number | string }) => {

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

@@ -6,9 +6,9 @@ interface AboutModalState {
   isModalOpen: boolean;
 }
 
-export class AboutModalDemo extends React.Component<null, AboutModalState> {
+export class AboutModalDemo extends React.Component<{}, AboutModalState> {
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       isModalOpen: false
     };

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

@@ -7,7 +7,7 @@ interface AccordionDemoState {
 
 export class AccordionDemo extends React.Component<null, AccordionDemoState> {
   state: AccordionDemoState = {
-    expanded: null
+    expanded: ''
   };
 
   componentDidMount() {
@@ -16,7 +16,7 @@ export class AccordionDemo extends React.Component<null, AccordionDemoState> {
 
   onToggle = (id: string) => {
     const { expanded } = this.state;
-    this.setState({ expanded: id !== expanded ? id : null });
+    this.setState({ expanded: id !== expanded ? id : '' });
   };
 
   render() {

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

@@ -6,9 +6,9 @@ interface AlertDemoState {
   alertTwoVisible: boolean;
 }
 
-export class AlertDemo extends React.Component<null, AlertDemoState> {
+export class AlertDemo extends React.Component<{}, AlertDemoState> {
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = { alertOneVisible: true, alertTwoVisible: true };
   }
 

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

@@ -12,19 +12,20 @@ interface AlertGroupDemoState {
   timer: number;
 }
 
-export class AlertGroupDemo extends React.Component<null, AlertGroupDemoState> {
+export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> {
   stopAsyncAlerts: () => void;
   removeAlert: (key: React.ReactText) => void;
 
-  constructor(props: {}) {
-    super(props as null);
+  constructor(props: {}, removeAlert: (key: React.ReactText) => void) {
+    super(props);
     this.state = {
       alerts: [],
-      timer: null
+      timer: 0
     };
     this.stopAsyncAlerts = () => {
       clearInterval(this.state.timer);
     };
+    this.removeAlert = removeAlert;
   }
   componentWillUnmount() {
     this.stopAsyncAlerts();

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

@@ -5,11 +5,11 @@ interface ApplicationLauncherState {
   isOpen: boolean;
 }
 
-export class ApplicationLauncherDemo extends React.Component<null, ApplicationLauncherState> {
+export class ApplicationLauncherDemo extends React.Component<{}, ApplicationLauncherState> {
   onToggle: (isOpen: boolean) => void;
   onSelect: (event: any) => void;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       isOpen: false
     };

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

@@ -9,17 +9,17 @@ import {
 interface ApplicationLauncherFavoritesDemoState {
   isOpen: boolean;
   favorites: string[];
-  filteredItems: JSX.Element[];
+  filteredItems: (JSX.Element | null)[] | null;
 }
 
 export class ApplicationLauncherFavoritesDemo extends React.Component<null, ApplicationLauncherFavoritesDemoState> {
   state: ApplicationLauncherFavoritesDemoState = {
     isOpen: false,
-    favorites: [],
+    favorites: [''],
     filteredItems: null
   };
 
-  appLauncherItems = [
+  appLauncherItems: JSX.Element[] = [
     <ApplicationLauncherGroup key="group 1c">
       <ApplicationLauncherItem key="group 1a" id="item-1">
         Item without group title
@@ -88,16 +88,20 @@ export class ApplicationLauncherFavoritesDemo extends React.Component<null, Appl
             filteredGroup.props.children[0].type !== ApplicationLauncherSeparator
           ) {
             return filteredGroup;
+          } else {
+            return null;
           }
         })
         .filter(newGroup => newGroup);
 
       if (filteredGroups.length > 0) {
         let lastGroup = filteredGroups.pop();
-        lastGroup = React.cloneElement(lastGroup, {
-          children: lastGroup.props.children.filter((item: JSX.Element) => item.type !== ApplicationLauncherSeparator)
-        });
-        filteredGroups.push(lastGroup);
+        if (lastGroup) {
+          lastGroup = React.cloneElement(lastGroup, {
+            children: lastGroup.props.children.filter((item: JSX.Element) => item.type !== ApplicationLauncherSeparator)
+          });
+          filteredGroups.push(lastGroup);
+        }
       }
 
       this.setState({

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

@@ -9,7 +9,7 @@ interface CheckboxState {
 export class CheckboxDemo extends React.Component<{}, CheckboxState> {
   handleChange: (check: boolean, event: React.FormEvent<HTMLInputElement>) => void;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       check1: false,
       check2: false

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

@@ -12,7 +12,7 @@ interface BadgeChipState {
 export class ChipGroupDemo extends Component<{}, BadgeChipState> {
   deleteItem: (id: string) => void;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       badgeChipArray: [
         {

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

@@ -13,7 +13,7 @@ export class ToolbarChipGroupDemo extends Component<{}, ToolbarChipGroupState> {
   deleteCategory: (category: string) => void;
 
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       chipGroups: [
         {

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

@@ -3,66 +3,58 @@ import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
 
 interface ContextSelectorState {
   isOpen: boolean;
-  selected: string;
+  selected: React.ReactNode;
   searchValue: string;
   filteredItems: string[];
 }
 
 export class ContextSelectorDemo extends React.Component<{}, ContextSelectorState> {
-  items: string[];
-  onToggle: (event, isOpen: boolean) => void;
-  onSelect: (event, value: string) => void;
-  onSearchInputChange: (value: string) => void;
-  onSearchButtonClick: (event: React.SyntheticEvent<HTMLButtonElement, Event>) => void;
-  constructor(props: {}) {
-    super(props as null);
-    this.items = [
-      'My Project',
-      'OpenShift Cluster',
-      'Production Ansible',
-      'AWS',
-      'Azure',
-      'My Project 2',
-      'OpenShift Cluster ',
-      'Production Ansible 2 ',
-      'AWS 2',
-      'Azure 2'
-    ];
+  items = [
+    'My Project',
+    'OpenShift Cluster',
+    'Production Ansible',
+    'AWS',
+    'Azure',
+    'My Project 2',
+    'OpenShift Cluster ',
+    'Production Ansible 2 ',
+    'AWS 2',
+    'Azure 2'
+  ];
 
-    this.state = {
-      isOpen: false,
-      selected: this.items[0],
-      searchValue: '',
-      filteredItems: this.items
-    };
+  state = {
+    isOpen: false,
+    selected: this.items[0],
+    searchValue: '',
+    filteredItems: this.items
+  };
 
-    this.onToggle = (event, isOpen) => {
-      this.setState({
-        isOpen
-      });
-    };
+  onToggle = (event: React.SyntheticEvent, isOpen: boolean) => {
+    this.setState({
+      isOpen
+    });
+  };
 
-    this.onSelect = (event, value) => {
-      this.setState({
-        selected: value,
-        isOpen: !this.state.isOpen
-      });
-    };
+  onSelect = (event: React.SyntheticEvent, value: React.ReactNode) => {
+    this.setState({
+      selected: value,
+      isOpen: !this.state.isOpen
+    });
+  };
 
-    this.onSearchInputChange = value => {
-      this.setState({ searchValue: value });
-    };
+  onSearchInputChange = (value: string) => {
+    this.setState({ searchValue: value });
+  };
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.onSearchButtonClick = _event => {
-      const filtered =
-        this.state.searchValue === ''
-          ? this.items
-          : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onSearchButtonClick = (event?: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    const filtered =
+      this.state.searchValue === ''
+        ? this.items
+        : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
 
-      this.setState({ filteredItems: filtered || [] });
-    };
-  }
+    this.setState({ filteredItems: filtered || [] });
+  };
 
   componentDidMount() {
     window.scrollTo(0, 0);

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

@@ -13,8 +13,8 @@ interface DataListState {
 }
 
 export class DataListDemo extends React.Component<DataListProps, DataListState> {
-  constructor(props: {}) {
-    super(props as null);
+  constructor(props: DataListProps) {
+    super(props);
     this.state = {
       selectedDataListItemId: ''
     };

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

@@ -4,6 +4,8 @@ import {
   ButtonVariant,
   DataToolbar,
   DataToolbarItem,
+  DataToolbarChip,
+  DataToolbarChipGroup,
   DataToolbarContent,
   DataToolbarFilter,
   DataToolbarToggleGroup,
@@ -29,7 +31,7 @@ import SyncIcon from '@patternfly/react-icons/dist/js/icons/sync-icon';
 interface Filter {
   risk: string[];
   status: string[];
-  key?: string[];
+  key: string[];
 }
 
 interface DataToolbarState {
@@ -51,7 +53,8 @@ export class DataToolbarDemo extends React.Component<DataToolbarProps, DataToolb
       riskisOpen: false,
       filters: {
         risk: ['Low'],
-        status: ['New', 'Pending']
+        status: ['New', 'Pending'],
+        key: ['']
       },
       kebabIsOpen: false
     };
@@ -73,8 +76,13 @@ export class DataToolbarDemo extends React.Component<DataToolbarProps, DataToolb
     this.setState({ inputValue: newValue });
   };
 
-  onSelect = (type: string, event, selection: string | SelectOptionObject) => {
-    const checked = event.target.checked;
+  onSelect = (
+    type: keyof Filter,
+    event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject
+  ) => {
+    const selectedTarget = event.target as HTMLInputElement;
+    const checked = selectedTarget.checked;
     this.setState(prevState => {
       const prevSelections = prevState.filters[type];
       return {
@@ -96,11 +104,12 @@ export class DataToolbarDemo extends React.Component<DataToolbarProps, DataToolb
     this.onSelect('risk', event, selection);
   };
 
-  onDelete = (type = '', id = '') => {
+  onDelete = (type: string | DataToolbarChipGroup = '', id: DataToolbarChip | string = '') => {
     if (type) {
+      const lowerCaseType = typeof type === 'string' ? type.toLowerCase() : type.name.toLowerCase();
       this.setState(prevState => {
         const newState = Object.assign(prevState);
-        newState.filters[type.toLowerCase()] = newState.filters[type.toLowerCase()].filter((s: string) => s !== id);
+        newState.filters[lowerCaseType] = newState.filters[lowerCaseType].filter((s: string) => s !== id);
         return {
           filters: newState.filters
         };
@@ -109,7 +118,8 @@ export class DataToolbarDemo extends React.Component<DataToolbarProps, DataToolb
       this.setState({
         filters: {
           risk: [],
-          status: []
+          status: [],
+          key: []
         }
       });
     }

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

@@ -7,9 +7,9 @@ import {
 } from '@patternfly/react-charts';
 
 export class DonutUtilizationGreenStaticRightDemo extends React.Component<{}, { used: number }> {
-  interval: number;
+  interval: number = 0;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       used: 0
     };

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

@@ -4,7 +4,7 @@ import { ChartDonutUtilization } from '@patternfly/react-charts';
 export class DonutUtilizationInvertedRightDemo extends React.Component<{}, { used: number; spacer: string }> {
   interval: any;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       spacer: '',
       used: 100

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { ChartDonutUtilization } from '@patternfly/react-charts';
 
 export class DonutUtilizationSimpleRightDemo extends React.Component<{}, { used: number; spacer: string }> {
-  interval: number;
+  interval: number = 0;
 
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       spacer: '',
       used: 0

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { ChartDonutUtilization, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 
 export class DonutUtilizationSimpleRightGreenDemo extends React.Component<{}, { used: number; spacer: string }> {
-  interval: number;
+  interval: number = 0;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       spacer: '',
       used: 0