Major release upgrade guide

<AccordionExpandedContentBody>Body</AccordionExpandedContentBody>

<AccordionExpandableContentBody>Body</AccordionExpandableContentBody>

<Accordion displaySize="large" />

<Accordion displaySize="lg" />

<Alert aria-label="Error alert" />

<Alert  />

<Alert titleHeadingLevel="h4" />

<Alert component="h4" />

const alertVariantOption = AlertVariant.default;
<Alert variant={AlertVariant["default"]}></Alert>
<Alert variant="default"></Alert>
<AlertIcon variant={"default"}></AlertIcon>

const alertVariantOption = AlertVariant.custom;
<Alert variant={AlertVariant["custom"]}></Alert>
<Alert variant="custom"></Alert>
<AlertIcon variant={"custom"}></AlertIcon>

import { ApplicationLauncher } from '@patternfly/react-core';

import { ApplicationLauncher } from '@patternfly/react-core/deprecated';

<ApplicationLauncher onFavorite={(id) => handler(id)} onSearch={(text) => searchHandler(text)}/>
const handler1 = (id) => {};
const searchHandler1 = (text) => {};
<ApplicationLauncher onFavorite={handler1} onSearch={searchHandler1}>
function handler2(id) {};
function searchHandler2(text) {};
<ApplicationLauncher onFavorite={handler2} onSearch={searchHandler2}>

<ApplicationLauncher onFavorite={(_event, id) => handler(id)} onSearch={(_event, text) => searchHandler(text)}/>
const handler1 = (_event, id) => {};
const searchHandler1 = (_event, text) => {};
<ApplicationLauncher onFavorite={handler1} onSearch={searchHandler1}>
function handler2(_event, id) {};
function searchHandler2(_event, text) {};
<ApplicationLauncher onFavorite={handler2} onSearch={searchHandler2}>

<ApplicationLauncher removeFindDomNode />

<ApplicationLauncher  />

<BackgroundImage filter={<SomeFilter />} src={{xs: 'file/path'}} />

const srcPath = {xs: 'file/path'};
<BackgroundImage src={srcPath} />

// An error is raised for the src prop
<BackgroundImage  src={{xs: 'file/path'}} />

const srcPath = {xs: 'file/path'};
// An error is raised for the src prop
<BackgroundImage src={srcPath} />

const backgroundImgSrcObj: BackgroundImageSrcMap = {};

const backgroundImgSrcObj = {};

<Banner variant="danger" />

<Banner variant="red" />

<Button isSmall />
<Button isLarge />

<Button size="sm" />
<Button size="lg" />

<Button isSmall />
<Button isLarge />

<Button size="sm" />
<Button size="lg" />

<CalendarMonth onChange={(date) => handler(date)} onMonthChange={(newDate) => handler(newDate)} />
<CalendarMonth onMonthChange={(newDate, event) => handler(newDate, event)} />
const changeHandler1 = (date) => {};
const handler1 = (newDate, event) => {};
<CalendarMonth onChange={changeHandler1} onMonthChange={handler1}>
function changeHandler2(date) {};
function handler2(newDate, event) {};
<CalendarMonth onChange={changeHandler2} onMonthChange={handler2}>

<CalendarMonth onChange={(_event, date) => handler(date)} onMonthChange={(_event, newDate) => handler(newDate)} />
<CalendarMonth onMonthChange={(event, newDate) => handler(newDate, event)} />
const changeHandler1 = (_event, date) => {};
const handler1 = (_event, newDate) => {};
<CalendarMonth onMonthChange={handler1}>
function changeHandler2(_event, date) {};
function handler2(_event, newDate) {};
<CalendarMonth onChange={changeHandler2} onMonthChange={handler2}>

<Card isSelectableRaised isDisabledRaised />
<Card isSelectableRaised hasSelectableInput />

<Card isSelectable isDisabled />
<Card isSelectable hasSelectableInput tabIndex={0} />

<Card isHoverable />

<Card  />

<Card onSelectableInputChange={(id) => handler(id)} />
const handler1 = (id) => {};
<Card onSelectableInputChange={handler1}>
function handler2(id) {};
<Card onSelectableInputChange={handler2}>

<Card onSelectableInputChange={(_event, id) => handler(id)} />
const handler1 = (_event, id) => {};
<Card onSelectableInputChange={handler1}>
function handler2(_event, id) {};
<Card onSelectableInputChange={handler2}>

<CardHeader>
  <CardHeaderMain>Header content</CardHeaderMain>
  <CardActions className="test" hasNoOffset><Button>Card action</Button></CardActions>
</CardHeader>

<CardHeader actions={{ actions: <><Button>Card action</Button></>, hasNoOffset: true, className: "test"}} >
  Header content
  
</CardHeader>

import { getResizeObserver } from "@patternfly/react-charts";

import { getResizeObserver } from "@patternfly/react-core";

import { Chart, ChartThemeVariant } from '@patternfly/react-charts';

import { Chart } from '@patternfly/react-charts';

import { DarkBlueColorTheme, DarkCyanColorTheme, DarkGoldColorTheme, DarkGrayColorTheme, DarkGreenColorTheme, DarkMultiColorOrderedTheme, DarkMultiColorUnorderedTheme,
DarkOrangeColorTheme, DarkPurpleColorTheme, ChartLegend } from '@patternfly/react-charts';

import { ChartLegend } from '@patternfly/react-charts';

import { Chart, ChartThemeColor, getCustomTheme } from '@patternfly/react-charts';

const customTheme = {...};
const newTheme = getCustomTheme(ChartThemeColor.default, 'light', customTheme);

return (
  <Chart themeVariant='light' theme={newTheme}/>
);

import { Chart, ChartThemeColor, getCustomTheme } from '@patternfly/react-charts';

const customTheme = {...};
const newTheme = getCustomTheme(ChartThemeColor.default, customTheme);

return (
  <Chart theme={newTheme}/>
);

<Checkbox onChange={(id) => handler(id)} />
<Checkbox onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<Checkbox onChange={handler1}>
function handler2(id, event) {};
<Checkbox onChange={handler2}>

<Checkbox onChange={(_event, id) => handler(id)} />
<Checkbox onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<Checkbox onChange={handler1}>
function handler2(_event, id) {};
<Checkbox onChange={handler2}>

<ClipboardCopy onChange={(text) => handleChange(text)} />
const handleChange1 = (text) => {};
<ClipboardCopy onChange={toggle1}>
function handleChange2(text) {};
<ClipboardCopy onChange={toggle2}>

<ClipboardCopy onChange={(_event, text) => handleChange(text)} />
const handleChange1 = (_event, text) => {};
<ClipboardCopy onChange={toggle1}>
function handleChange2(_event, text) {};
<ClipboardCopy onChange={toggle2}>

<ClipboardCopy position={PopoverPosition.top} />
<ClipboardCopyButton position={PopoverPosition.bottom} />

<ClipboardCopy position="top" />
<ClipboardCopyButton position="bottom" />

<ClipboardCopy switchDelay="500" />

<ClipboardCopy  />

<ClipboardCopy removeFindDomNode />

<ClipboardCopy  />

<CodeEditor entryDelay="500" exitDelay="500" maxWidth="15rem" position="top" toolTipText="hi" />

<CodeEditor      />

import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';

import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core/deprecated';

<ContextSelector removeFindDomNode />

<ContextSelector  />

<DataList onSelectableRowChange={(id) => handler(id)} />
<DataList onSelectableRowChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<DataList onSelectableRowChange={handler1} />
function handler2(id, event) {};
<DataList onSelectableRowChange={handler2} />

<DataList onSelectableRowChange={(_event, id) => handler(id)} />
<DataList onSelectableRowChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<DataList onSelectableRowChange={handler1} />
function handler2(_event, id) {};
<DataList onSelectableRowChange={handler2} />

<DataList onDragFinish onDragStart onDragMove onDragCancel itemOrder />

<DataList      />

<DataList onSelectDataListItem={(id) => onSelect(id)} />

const toggle1 = (id) => {};
<DataList onSelectDataListItem={toggle1}>

function toggle2(id) {};
<DataList onSelectDataListItem={toggle2}>

<DataList onSelectDataListItem={(_event, id) => onSelect(id)} />

const toggle1 = (_event, id) => {};
<DataList onSelectDataListItem={toggle1}>

function toggle2(_event, id) {};
<DataList onSelectDataListItem={toggle2}>

<DataListCheck onChange={(checked) => onChange(checked)} />

const onChange1 = (checked) => {};
<DataListCheck onChange={onChange1}>

function onChange2(checked) {};
<DataListCheck onChange={onChange2}>

<DataListCheck onChange={(_event, checked) => onChange(checked)} />

const onChange1 = (_event, checked) => {};
<DataListCheck onChange={onChange1}>

function onChange2(_event, checked) {};
<DataListCheck onChange={onChange2}>

<Divider isVertical />

<Divider orientation={{ default: "vertical" }} />

<DrawerPanelContent onResize={(width, id) => onChange(checked)} />
    
    const onResize1 = (width, id) => {};
    <DrawerPanelContent onResize={onResize1}>
    
    function onResize2(width, id) {};
    <DrawerPanelContent onResize={onResize2}>

<DrawerPanelContent onResize={(_event, width, id) => onChange(checked)} />
    
    const onResize1 = (_event, width, id) => {};
    <DrawerPanelContent onResize={onResize1}>
    
    function onResize2(_event, width, id) {};
    <DrawerPanelContent onResize={onResize2}>

import { Dropdown, DropdownPosition, Button } from '@patternfly/react-core';

import { Button } from '@patternfly/react-core';
    import { Dropdown, DropdownPosition } from '@patternfly/react-core/deprecated';

<DropdownItem isHovered={isHovered} />

<DropdownItem  />

<DropdownMenu openedOnEnter={false} />

<DropdownMenu  />

<DropdownToggle isPrimary />

<DropdownToggle toggleVariant="primary" />

<DropdownToggleCheckbox onChange={(id) => handler(id)} />
    <DropdownToggleCheckbox onChange={(id, event) => handler(id, event)} />
    const handler1 = (id, event) => {};
    <DropdownToggleCheckbox onChange={handler1}>

<DropdownToggleCheckbox onChange={(_event, id) => handler(id)} />
    <DropdownToggleCheckboxDeprecated onChange={(event, id) => handler(id, event)} />
    const handler1 = (event, id) => {};
    <DropdownToggleCheckbox onChange={handler1}>

import { Dropdown } from '@patternfly/react-core/next';

import { Dropdown /* data- Codemods */ } from '@patternfly/react-core';

<Dropdown removeFindDomNode />

<Dropdown  />

<DropdownItem itemId="Item 1" />

<DropdownItem value="Item 1" />

<Toggle isPrimary />

<Toggle toggleVariant="primary" />

<DualListSelector onAvailableOptionsSearchInputChanged={(id) => handler(id)} />
    <DualListSelector onAvailableOptionsSearchInputChanged={(id, event) => handler(id, event)} />
    const handler1 = (id, event) => {};
    <DualListSelector onAvailableOptionsSearchInputChanged={handler1}>
    function handler2(id, event) {};
    <DualListSelector onAvailableOptionsSearchInputChanged={handler2}>
    
    <DualListSelector onChosenOptionsSearchInputChanged={(id) => handler(id)} />
    <DualListSelector onChosenOptionsSearchInputChanged={(id, event) => handler(id, event)} />
    const handler1 = (id, event) => {};
    <DualListSelector onChosenOptionsSearchInputChanged={handler1}>
    function handler2(id, event) {};
    <DualListSelector onChosenOptionsSearchInputChanged={handler2}>
    
    <DualListSelector onListChange={(id) => handler(id)} />
    const handler1 = (id) => {};
    <DualListSelector onListChange={handler1}>
    function handler2(id) {};
    <DualListSelector onListChange={handler2}>

<DualListSelector onAvailableOptionsSearchInputChanged={(_event, id) => handler(id)} />
    <DualListSelector onAvailableOptionsSearchInputChanged={(event, id) => handler(id, event)} />
    const handler1 = (_event, id) => {};
    <DualListSelector onAvailableOptionsSearchInputChanged={handler1}>
    function handler2(_event, id) {};
    <DualListSelector onAvailableOptionsSearchInputChanged={handler2}>
    
    <DualListSelector onChosenOptionsSearchInputChanged={(_event, id) => handler(id)} />
    <DualListSelector onChosenOptionsSearchInputChanged={(event, id) => handler(id, event)} />
    const handler1 = (_event, id) => {};
    <DualListSelector onChosenOptionsSearchInputChanged={handler1}>
    function handler2(_event, id) {};
    <DualListSelector onChosenOptionsSearchInputChanged={handler2}>
    
    <DualListSelector onListChange={(_event, id) => handler(id)} />
    const handler1 = (_event, id) => {};
    <DualListSelector onListChange={handler1}>
    function handler2(_event, id) {};
    <DualListSelector onListChange={handler2}>

import { EmptyStatePrimary as Primary, EmptyStateSecondaryActions } from '@patternfly/react-core';
    <>
      <Primary>Primary action</Primary>
      <EmptyStateSecondaryActions>Other actions</EmptyStateSecondaryActions>
    </>

import { EmptyStateActions } from '@patternfly/react-core';
    <>
      <EmptyStateActions>Primary action</EmptyStateActions>
      <EmptyStateActions>Other actions</EmptyStateActions>
    </>

    import { EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';

    <EmptyState>
      <EmptyStateIcon icon={CubesIcon} />
      <Title headingLevel="h5" size="4xl">
        Empty state
      </Title>
      <EmptyStateBody>
        Some content
      </EmptyStateBody>
      <EmptyStateActions>
        Primary action
      </EmptyStateActions>
      <EmptyStateActions>
        Other actions
      </EmptyStateActions>
    </EmptyState>

import { EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateIcon, EmptyStateHeader, EmptyStateFooter,  } from '@patternfly/react-core';
    
    <EmptyState>
      <EmptyStateHeader titleText="Empty state" icon={<EmptyStateIcon icon={CubesIcon} />} headingLevel="h5" />
      <EmptyStateBody>
        Some content
      </EmptyStateBody><EmptyStateFooter>
      <EmptyStateActions>
        Primary action
      </EmptyStateActions>
      <EmptyStateActions>
        Other actions
      </EmptyStateActions>
    </EmptyStateFooter></EmptyState>

<EmptyStateIcon icon={CubesIcon} variant="icon"/>
    <EmptyStateIcon component={Spinner} variant="container"/>

<EmptyStateIcon icon={CubesIcon} />
    <EmptyStateIcon icon={Spinner} />

const myVariant = EmptyStateVariant.small;
    <EmptyState variant={EmptyStateVariant.large} />
    <EmptyState variant="small" />
    <EmptyState variant="large" />

const myVariant = EmptyStateVariant.sm;
    <EmptyState variant={EmptyStateVariant.lg} />
    <EmptyState variant="sm" />
    <EmptyState variant="lg" />

<ExpandableSection displaySize="large" />

<ExpandableSection displaySize="lg" />

<ExpandableSection onToggle={(id) => handler(id)} />
    const handler1 = (id) => {};
    <ExpandableSection onToggle={handler1} />
    function handler2(id) {};
    <ExpandableSection onToggle={handler2} />

<ExpandableSection onToggle={(_event, id) => handler(id)} />
    const handler1 = (_event, id) => {};
    <ExpandableSection onToggle={handler1} />
    function handler2(_event, id) {};
    <ExpandableSection onToggle={handler2} />

<FileUpload onTextChange={text => textHandler(text)} />
    <FileUploadField onTextChange={text => textHandler1(text)} />
    const textHandler2 = (text) => {};
    const textHandler3 = (text) => {};
    <FileUpload onTextChange={textHandler2} />
    <FileUploadField onTextChange={textHandler3} />
    function textHandler4(text) {};
    function textHandler5(text) {};
    <FileUpload onTextChange={textHandler4} />
    <FileUploadField onTextChange={textHandler5} />

<FileUpload onTextChange={(_event, text) => textHandler(text)} />
    <FileUploadField onTextChange={(_event, text) => textHandler1(text)} />
    const textHandler2 = (_event, text) => {};
    const textHandler3 = (_event, text) => {};
    <FileUpload onTextChange={textHandler2} />
    <FileUploadField onTextChange={textHandler3} />
    function textHandler4(_event, text) {};
    function textHandler5(_event, text) {};
    <FileUpload onTextChange={textHandler4} />
    <FileUploadField onTextChange={textHandler5} />

<FileUpload
      onDataChange={(data) => changeHandler(data)}
      onReadFailed={(error, fileHandle) => readFailedHandler(error, fileHandle)}
      onReadFinished={(fileHandle) => readFinishedHandler(fileHandle)}
      onReadStarted={(fileHandle) => readStartedHandler(fileHandle)}
    />;
    
    const changeHandler1 = (data) => {};
    const readFailedHandler1 = (error, fileHandle) => {};
    const readFinishedHandler1 = (fileHandle) => {};
    const readStartedHandler1 = (fileHandle) => {};
    <FileUpload
      onDataChange={changeHandler1}
      onReadFailed={readFailedHandler1}
      onReadFinished={readFinishedHandler1}
      onReadStarted={readStartedHandler1}
    />
    
    function changeHandler2(data) {};
    function readFailedHandler2(error, fileHandle) {};
    function readFinishedHandler2(fileHandle) {};
    function readStartedHandler2(fileHandle) {};
    <FileUpload
      onDataChange={changeHandler2}
      onReadFailed={readFailedHandler2}
      onReadFinished={readFinishedHandler2}
      onReadStarted={readStartedHandler2}
    />;

<FileUpload
      onDataChange={(_event, data) => changeHandler(data)}
      onReadFailed={(_event, error, fileHandle) => readFailedHandler(error, fileHandle)}
      onReadFinished={(_event, fileHandle) => readFinishedHandler(fileHandle)}
      onReadStarted={(_event, fileHandle) => readStartedHandler(fileHandle)}
    />;
    
    const changeHandler1 = (_event, data) => {};
    const readFailedHandler1 = (_event, error, fileHandle) => {};
    const readFinishedHandler1 = (_event, fileHandle) => {};
    const readStartedHandler1 = (_event, fileHandle) => {};
    <FileUpload
      onDataChange={changeHandler1}
      onReadFailed={readFailedHandler1}
      onReadFinished={readFinishedHandler1}
      onReadStarted={readStartedHandler1}
    />;
    
    function changeHandler2(_event, data) {};
    function readFailedHandler2(_event, error, fileHandle) {};
    function readFinishedHandler2(_event, fileHandled) {};
    function readStartedHandler2(_event, fileHandle) {};
    <FileUpload
      onDataChange={changeHandler2}
      onReadFailed={readFailedHandler2}
      onReadFinished={readFinishedHandler2}
      onReadStarted={readStartedHandler2}
    />;

<FileUpload onChange={onChange} />

<FileUpload  /> 

<MultipleFileUpload onFileDrop={(id) => handler(id)} />
const handler1 = (id) => {};
<MultipleFileUpload onFileDrop={handler1} />
function handler2(id) {};
<MultipleFileUpload onFileDrop={handler2} />

<MultipleFileUpload onFileDrop={(_event, id) => handler(id)} />
const handler1 = (_event, id) => {};
<MultipleFileUpload onFileDrop={handler1} />
function handler2(_event, id) {};
<MultipleFileUpload onFileDrop={handler2} />

<FormSelect isIconSprite />
    <TextArea isIconSprite isReadOnly />
    <TextInput isIconSprite iconVariant customIconUrl customIconDimensions isReadOnly />
    
    // With an existing readOnlyVariant prop
    <TextArea isReadOnly readOnlyVariant="plain" >

<FormSelect  />
    <TextArea  readOnlyVariant="default" />
    <TextInput     readOnlyVariant="default" />
    
    // With an existing readOnlyVariant prop
    <TextArea  readOnlyVariant="plain" >

<FormGroup
      helperTextInvalid={helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : helpText}
      validated={validated}
    >
      <TextInput
        validated={validated}
        value={value}
        onChange={onChange}
        isRequired={isRequired}
        placeholder={placeholder}
      />
    </FormGroup>

<FormGroup>
      <TextInput
        validated={validated}
        value={value}
        onChange={onChange}
        isRequired={isRequired}
        placeholder={placeholder}
      />
      {validated === 'error' && helpText && (
        <FormHelperText>
          <HelperText>
            <HelperTextItem variant="error">
              {helpText}
            </HelperTextItem>
          </HelperText>
        </FormHelperText>
      )}
    </FormGroup>

<FormHelperText isError={true} isHidden={false} icon={<Icon />} component="div" />

<FormHelperText     />

<FormSelect onChange={(id) => handler(id)} />
    <FormSelect onChange={(id, event) => handler(id, event)} />
    const handler1 = (id, event) => {};
    <FormSelect onChange={handler1} />
    function handler2(id, event) {};
    <FormSelect onChange={handler2} />

<FormSelect onChange={(_event, id) => handler(id)} />
    <FormSelect onChange={(event, id) => handler(id, event)} />
    const handler1 = (_event, id) => {};
    <FormSelect onChange={handler1} />
    function handler2(_event, id) {};
    <FormSelect onChange={handler2} />

    <InputGroup>
      <input />
      <textarea />
      <TextArea />
      <TextInput />
      <InputGroupText>Some text</InputGroupText>
      <button />
    </InputGroup>

<InputGroup>
      <InputGroupItem isFill><input /></InputGroupItem>
      <InputGroupItem isFill><textarea /></InputGroupItem>
      <InputGroupItem isFill><TextArea /></InputGroupItem>
      <InputGroupItem isFill><TextInput /></InputGroupItem>
      <InputGroupText>Some text</InputGroupText>
      <InputGroupItem><button /></InputGroupItem>
    </InputGroup>

<InputGroupText variant={InputGroupTextVariant.plain} />

<InputGroupText  />

<Label isTruncated />

<Label  />

<LoginForm onChangeUsername={(id) => handler(id)} />
<LoginForm onChangeUsername={(id, event) => handler(id, event)} />
const usernameHandler1 = (id, event) => {};
<LoginForm onChangeUsername={usernameHandler1} />
function usernameHandler2(id, event) {};
<LoginForm onChangeUsername={usernameHandler2} />

<LoginForm onChangePassword={(id) => handler(id)} />
<LoginForm onChangePassword={(id, event) => handler(id, event)} />
const passwordHandler1 = (id, event) => {};
<LoginForm onChangePassword={passwordHandler1} />
function passwordHandler2(id, event) {};
<LoginForm onChangePassword={passwordHandler2} />

<LoginForm onChangeRememberMe={(id) => handler(id)} />
<LoginForm onChangeRememberMe={(id, event) => handler(id, event)} />
const rememberMeHandler1 = (id, event) => {};
<LoginForm onChangeRememberMe={rememberMeHandler1} />
function rememberMeHandler2(id, event) {};
<LoginForm onChangeRememberMe={rememberMeHandler2} />

<LoginForm onChangeUsername={(_event, id) => handler(id)} />
<LoginForm onChangeUsername={(event, id) => handler(id, event)} />
const usernameHandler1 = (_event, id) => {};
<LoginForm onChangeUsername={usernameHandler1} />
function usernameHandler2(_event, id) {};
<LoginForm onChangeUsername={usernameHandler2} />

<LoginForm onChangePassword={(_event, id) => handler(id)} />
<LoginForm onChangePassword={(event, id) => handler(id, event)} />
const passwordHandler1 = (_event, id) => {};
<LoginForm onChangePassword={passwordHandler1} />
function passwordHandler2(_event, id) {};
<LoginForm onChangePassword={passwordHandler2} />

<LoginForm onChangeRememberMe={(_event, id) => handler(id)} />
<LoginForm onChangeRememberMe={(event, id) => handler(id, event)} />
const rememberMeHandler1 = (_event, id) => {};
<LoginForm onChangeRememberMe={rememberMeHandler1} />
function rememberMeHandler2(_event, id) {};
<LoginForm onChangeRememberMe={rememberMeHandler2} />

<LoginPage backgroundImgAlt="Alt text" backgroundImgSrc={{xs: 'file/path'}} />

const srcPath = {xs: 'file/path'};
<LoginPage backgroundImgSrc={srcPath} />

// An error is raised for the backgroundImgSrc prop
<LoginPage  backgroundImgSrc={{xs: 'file/path'}} />

const srcPath = {xs: 'file/path'};
// An error is raised for the backgroundImgSrc prop
<LoginPage backgroundImgSrc={srcPath} />

<MastheadBrand />
<MastheadBrand component="div" />

<MastheadBrand component="a" />
<MastheadBrand component="div" />

<MenuItem hasCheck />

<MenuItem hasCheckbox />

<Menu aria-label="tester">
  <MenuList>
    ...menu items placed here
  </MenuList>
</Menu>

<Menu aria-label="tester">
  <MenuList>
    ...menu items placed here
  </MenuList>
  <MenuList>
    ...menu items placed here
  </MenuList>
</Menu>

<Menu aria-label="tester">
  <MenuGroup>
    <MenuList>
      ...menu items placed here
    </MenuList>
  </MenuGroup>
</Menu>

<Menu >
  <MenuList aria-label="tester">
    ...menu items placed here
  </MenuList>
</Menu>

<Menu >
  <MenuList>
    ...menu items placed here
  </MenuList>
  <MenuList>
    ...menu items placed here
  </MenuList>
</Menu>

<Menu >
  <MenuGroup>
    <MenuList>
      ...menu items placed here
    </MenuList>
  </MenuGroup>
</Menu>

  <MenuInput><SearchInput /></MenuInput>

    <MenuSearch><MenuSearchInput><SearchInput /></MenuSearchInput></MenuSearch>

const variantOption = "default";
<Modal titleIconVariant={variantOption}></Modal>
<ModalContent titleIconVariant="default"></ModalContent>

const variantOption = "custom";
<Modal titleIconVariant={variantOption}></Modal>
<ModalContent titleIconVariant="custom"></ModalContent>

<Navigation onSelect={(id) => handler(id)} />
const handler1 = (id) => {};
<Navigation onSelect={handler1} />
function handler2(id) {};
<Navigation onSelect={handler2} />

<Navigation onToggle={(id) => handler(id)} />
const toggleHandler1 = (id) => {};
<Navigation onToggle={toggleHandler1} />
function toggleHandler2(id) {};
<Navigation onToggle={toggleHandler2} />

<Navigation onSelect={(_event, id) => handler(id)} />
const handler1 = (_event, id) => {};
<Navigation onSelect={handler1} />
function handler2(_event, id) {};
<Navigation onSelect={handler2} />

<Navigation onToggle={(_event, id) => handler(id)} />
const toggleHandler1 = (_event, id) => {};
<Navigation onToggle={toggleHandler1} />
function toggleHandler2(_event, id) {};
<Navigation onToggle={toggleHandler2} />

<NavItem removeFindDomNode />

<NavItem  />

  <NotificationBadge isRead />
  <NotificationBadge isRead={false} />
  <NotificationBadge isRead={isRead} />
  <NotificationBadge isRead={isRead || markedRead} />

  <NotificationBadge variant="read" />
  <NotificationBadge variant="unread" />
  <NotificationBadge variant={isRead ? "read" : "unread"} />
  <NotificationBadge variant={(isRead || markedRead) ? "read" : "unread"} />

<NotificationDrawerListItemHeader variant="default"></NotificationDrawerListItemHeader>

<NotificationDrawerListItemHeader variant="custom"></NotificationDrawerListItemHeader>

<NumberInput allowEmptyInput />

<NumberInput  />

import { OptionsMenu, OptionsMenuToggle } from '@patternfly/react-core';

import { OptionsMenu, OptionsMenuToggle } from '@patternfly/react-core/deprecated';

<OptionsMenu removeFindDomNode />

<OptionsMenu  />

<OverflowMenuDropdownItem index={0}>

<OverflowMenuDropdownItem itemId={0}>

<PageSidebar isNavOpen={true} />
<PageToggleButton isNavOpen={true} onNavToggle={() => {}} />

<PageSidebar isSidebarOpen={true} />
            <PageToggleButton isSidebarOpen={true} onSidebarToggle={() => {}} />

<Page onPageResize={({obj}) => onChange({obj})} />

                const resize1 = ({obj}) => {};
                <Page onPageResize={resize1}>

                function resize2({obj}) {};
                <Page onPageResize={resize2}>

<Page onPageResize={(_event, {obj}) => onChange({obj})} />

                const resize1 = (_event, {obj}) => {};
                <Page onPageResize={resize1}>

                function resize2(_event, {obj}) {};
                <Page onPageResize={resize2}>

import { Button,
                PageHeader,
                PageHeaderTools,
                PageHeaderToolsGroup,
                PageHeaderToolsItem,
            } from "@patternfly/react-core";

import {
	Button
} from '@patternfly/react-core';
import {
	PageHeader,
	PageHeaderTools,
	PageHeaderToolsGroup,
	PageHeaderToolsItem
} from '@patternfly/react-core/deprecated';

<PageHeader />
<PageHeader logoComponent="div" />

<PageHeader logoComponent="a" />
<PageHeader logoComponent="div" />

<PageSidebar theme="light" nav="Content">

<PageSidebar theme="light">
                <PageSidebarBody>
                Content
                </PageSidebarBody>
                </PageSidebar>

<Pagination
  perPageComponenet="div"
  defaultToFullPage
  titles={{
    currPage: "text"
    paginationTitle: "text"
    toFirstPage: "text"
    toLastPage: "text"
    toNextPage: "text"
    toPreviousPage: "text"
    optionsToggle: "text"
  }}
/>

<Pagination
  isLastFullPageShown
  titles={{
    currPageAriaLabel: "text"
    paginationAriaLabel: "text"
    toFirstPageAriaLabel: "text"
    toLastPageAriaLabel: "text"
    toNextPageAriaLabel: "text"
    toPreviousPageAriaLabel: "text"
    optionsToggleAriaLabel: "text"
  }}
/>

import { Pagination, ToggleTemplateProps } from '@patternfly/react-core';
<Pagination toggleTemplate={({firstIndex, lastIndex} : ToggleTemplateProps) => <div />} />

import { Pagination, PaginationToggleTemplateProps } from '@patternfly/react-core';
<Pagination toggleTemplate={({firstIndex, lastIndex} : PaginationToggleTemplateProps) => <div />} />

<Popover boundary={} tippyProps={} shouldClose={(tip, hideFunction) => {/* ... */}} onHidden={(tip) => {/* ... */}} onHide={(tip) => {/* ... */}} onMount={(tip) => {/* ... */}} onShow={(tip) => {/* ... */}} onShown={(tip) => {/* ... */}} />

<Popover
  shouldClose={(hideFunction) => {
    /* ... */
  }}
  onHidden={() => {
    /* ... */
  }}
  onHide={() => {
    /* ... */
  }}
  onMount={() => {
    /* ... */
  }}
  onShow={() => {
    /* ... */
  }}
  onShown={() => {
    /* ... */
  }}
/>

<Popover shouldOpen={(fn) => openHandler(fn)} shouldClose={(fn2) => closeHandler(fn2)} />
<Popover shouldOpen={(fn, event) => openHandler(fn, event)} shouldClose={(fn, event) => closeHandler(fn, event)}/>
const openHandler1 = (fn, event) => {};
const closeHandler1 = (fn, event) => {};
<Popover shouldOpen={openHandler1} shouldClose={closeHandler1} />
function openHandler2(fn, event) {};
function closeHandler2(fn, event) {};
<Popover shouldOpen={openHandler2} shouldClose={closeHandler2} />

<Popover shouldOpen={(_event, fn) => openHandler(fn)} shouldClose={(_event, fn2) => closeHandler(fn2)} />
<Popover shouldOpen={(event, fn) => openHandler(fn, event)} shouldClose={(event, fn) => closeHandler(fn, event)}/>
const openHandler1 = (event, id) => {};
const closeHandler1 = (event, id) => {};
<Popover shouldOpen={openHandler1} shouldClose={closeHandler1} />
function openHandler2(event, id) {};
function closeHandler2(event, id) {};
<Popover shouldOpen={openHandler2} shouldClose={closeHandler2} />

<Popover removeFindDomNode />

<Popover  />

<Popover alertSeverityVariant="default"></Popover>

<Popover alertSeverityVariant="custom"></Popover>

<Popover reference={componentRef} />

<Popover triggerRef={componentRef} />

<Popper popperMatchesTriggerWidth />

<Popper  />

<Radio onChange={(checked) => handler(checked)} />
<Radio onChange={(checked, event) => handler(checked, event)} />
const handler1 = (checked, event) => {};
<Radio onChange={handler1} />
function handler2(checked, event) {};
<Radio onChange={handler2} />

<Radio onChange={(_event, checked) => handler(checked)} />
<Radio onChange={(event, checked) => handler(checked, event)} />
const handler1 = (_event, checked) => {};
<Radio onChange={handler1} />
function handler2(_event, checked) {};
<Radio onChange={handler2} />

<SearchInput removeFindDomNode />

<SearchInput  />

<SelectOption hasCheck />

<SelectOption hasCheckbox />

import { Select } from '@patternfly/react-core/next';

import { Select /* data- Codemods */ } from '@patternfly/react-core';

<Select removeFindDomNode />

<Select  />

import { Button, Select, SelectOption, SelectVariant, SelectDirection, SelectGroup } from "@patternfly/react-core";

import {
	Button
} from '@patternfly/react-core';
import {
	Select,
	SelectOption,
	SelectVariant,
	SelectDirection,
	SelectGroup
} from '@patternfly/react-core/deprecated';

<SelectOption itemId="Option 1" />

<SelectOption value="Option 1" />

<SimpleList isCurrent />

<SimpleList isActive />

<Slider onChange={(value) => handler(value)} />
const handler1 = (value) => {};
<Slider onChange={handler1} />
function handler2(value) {};
<Slider onChange={handler2} />

<Slider onChange={(_event, value) => handler(value)} />
const handler1 = (_event, value) => {};
<Slider onChange={handler1} />
function handler2(_event, value) {};
<Slider onChange={handler2} />

<Spinner isSVG />

<Spinner  />

<Switch onChange={(id) => handler(id)} />
<Switch onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<Switch onChange={handler1} />
function handler2(id, event) {};
<Switch onChange={handler2} />

<Switch onChange={(_event, id) => handler(id)} />
<Switch onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<Switch onChange={handler1} />
function handler2(_event, id) {};
<Switch onChange={handler2} />

<EditableSelectInputCell onSelect={(value) => onSelectHandler(value)} clearSelection={(row, cell) => clearSelectionHandler(row, cell)} />
    <EditableSelectInputCell onSelect={(value, event) => onSelectHandler(value, event)} />
    const onSelectHandler1 = (value, event) => {};
    const clearSelectionHandler1 = (row, cell) => {};
    <EditableSelectInputCell onSelect={onSelectHandler1} clearSelection={clearSelectionHandler1} />
    function onSelectHandler2(value) {};
    function clearSelectionHandler2(row, cell) {};
    <EditableSelectInputCell onSelect={onSelectHandler2} clearSelection={clearSelectionHandler2} />

<EditableSelectInputCell onSelect={(_event, value) => onSelectHandler(value)} clearSelection={(_event, row, cell) => clearSelectionHandler(row, cell)} />
    <EditableSelectInputCell onSelect={(event, value) => onSelectHandler(value, event)} />
    const onSelectHandler1 = (event, value) => {};
    const clearSelectionHandler1 = (event, row, cell) => {};
    <EditableSelectInputCell onSelect={onSelectHandler1} clearSelection={clearSelectionHandler1} />
    function onSelectHandler2(_event, value) {};
    function clearSelectionHandler2(_event, row, cell) {};
    <EditableSelectInputCell onSelect={onSelectHandler2} clearSelection={clearSelectionHandler2} />

<Tr isHoverable />

<Tr isClickable />

import { TableComposable } from '@patternfly/react-table';

<TableComposable />

import { Table /* data- Codemods */ } from '@patternfly/react-table';

<Table />

import { Table, TableBody, TableHeader, TableProps } from "@patternfly/react-table";

import {
 Table,
 TableBody,
 TableHeader,
 TableProps
} from '@patternfly/react-table/deprecated';

<TableComposable hasSelectableRowCaption />

<TableComposable  />

let myObj = { disable: true };
myObj["disable"] = false;
myObj.disable = true;
myObj = { disable: false };

<Td select={myObj} actions={{ disable: false }}></Td>;

const disable = true;
const obj = { disable };
<>
  <Td select={obj} actions={{ "disable": true }}></Td>
  <Td select={{disable}}></Td>
</>;

let myObj = { isDisabled: true };
myObj["isDisabled"] = false;
myObj.isDisabled = true;
myObj = { isDisabled: false };

<Td select={myObj} actions={{ isDisabled: false }}></Td>;

const isDisabled = true;
const obj = { isDisabled };
<>
  <Td select={obj} actions={{ "isDisabled": true }}></Td>
  <Td select={{isDisabled}}></Td>
</>;

<ActionsColumn items={[{tooltip: "test"}]} />
<ActionsColumn items={[{tooltip: "test", tooltipProps: {direction: "top"}}]} />

const actionItems = [{tooltip: "test"}];
<ActionsColumn items={actionItems} />

const actionItems = () => [{tooltip: "test"}];
<ActionsColumn items={actionItems} />

<ActionsColumn items={[{tooltipProps: { content: "test" }}]} />
<ActionsColumn items={[{ tooltipProps: {content: "test", direction: "top"}}]} />

const actionItems = [{tooltipProps: { content: "test" }}];
<ActionsColumn items={actionItems} />

const actionItems = () => [{tooltipProps: { content: "test" }}];
<ActionsColumn items={actionItems} />

<OverflowTab removeFindDomNode />

<OverflowTab  />

<Tabs onToggle={(id) => handler(id)} />
const handler1 = (id) => {};
<Tabs onToggle={handler1} />
function handler2(id) {};
<Tabs onToggle={handler2} />

<Tabs onToggle={(_event, id) => handler(id)} />
const handler1 = (_event, id) => {};
<Tabs onToggle={handler1} />
function handler2(_event, id) {};
<Tabs onToggle={handler2} />

<Tabs hasBorderBottom />
<Tabs hasBorderBottom={true} />
<Tabs hasBorderBottom={false} />
<Tabs hasBorderBottom={someVar} />

<Tabs  />
<Tabs  />
<Tabs hasNoBorderBottom />
<Tabs hasNoBorderBottom={!someVar} />

<Tabs hasSecondaryBorderBottom />

<Tabs  />

<TextArea onChange={(id) => handler(id)} />
<TextArea onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<TextArea onChange={handler1} />
function handler2(id, event) {};
<TextArea onChange={handler2} />

<TextArea onChange={(_event, id) => handler(id)} />
<TextArea onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<TextArea onChange={handler1} />
function handler2(_event, id) {};
<TextArea onChange={handler2} />

<TextInput onChange={(id) => handler(id)} />
<TextInput onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<TextInput onChange={handler1} />
function handler2(id, event) {};
<TextInput onChange={handler2} />

<TextInput onChange={(_event, id) => handler(id)} />
<TextInput onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<TextInput onChange={handler1} />
function handler2(_event, id) {};
<TextInput onChange={handler2} />

<Timepicker removeFindDomNode />

<Timepicker  />

<ToggleGroupItem onChange={(id) => handler(id)} />
<ToggleGroupItem onChange={(id, event) => handler(id, event)} />
const handler1 = (id, event) => {};
<ToggleGroupItem onChange={handler1} />
function handler2(id, event) {};
<ToggleGroupItem onChange={handler2} />

<ToggleGroupItem onChange={(_event, id) => handler(id)} />
<ToggleGroupItem onChange={(event, id) => handler(id, event)} />
const handler1 = (_event, id) => {};
<ToggleGroupItem onChange={handler1} />
function handler2(_event, id) {};
<ToggleGroupItem onChange={handler2} />

<ToolbarContent visiblity={{ default: "hidden" }} />

<ToolbarContent visibility={{ default: "hidden" }} />

<ToolbarContent alignment={{ default: 'alignLeft' }} />
<ToolbarGroup alignment={{ default: 'alignLeft' }} />
<ToolbarItem alignment={{ default: 'alignLeft' }} />

<ToolbarContent  />
<ToolbarGroup align={{ default: 'alignLeft' }} />
<ToolbarItem align={{ default: 'alignLeft' }} />

<Tooltip removeFindDomNode />

<Tooltip  />

<Tooltip boundary={} tippyProps={} isAppLauncher />

<Tooltip     />

<Tooltip reference={componentRef} />

<Tooltip triggerRef={componentRef} />

<TreeView hasCheck />

<TreeView hasCheckbox />

<Truncate removeFindDomNode />

<Truncate  />

<Toggle onToggle={(isOpen) => onToggle(isOpen)} />

const toggleBadge = (isOpen) => {};
<BadgeToggle onToggle={toggleBadge}>

function toggleDropdown(isOpen) {};
<DropdownToggle onToggle={toggleDropdown}>

<Toggle onToggle={(_event, isOpen) => onToggle(isOpen)} />

const toggleBadge = (_event, isOpen) => {};
<BadgeToggle onToggle={toggleBadge}>

function toggleDropdown(_event, isOpen) {};
<DropdownToggle onToggle={toggleDropdown}>>

import { Wizard } from '@patternfly/react-core/next';

import { Wizard /* data- Codemods */ } from '@patternfly/react-core';

import { Wizard, Button } from '@patternfly/react-core';

import { Button } from '@patternfly/react-core';
import { Wizard } from '@patternfly/react-core/deprecated';