@patternfly/react-core 6.0.0-alpha.57 → 6.0.0-alpha.58

package/src/deprecated/components/Dropdown/examples/DropdownPositionRight.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownPosition
-} from '@patternfly/react-core/deprecated';
-
-export const DropdownPositionRight: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('toggle-position-right');
-    element?.focus();
-  };
-
-  const onSelect = () => {
-    setIsOpen(false);
-    onFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem
-      key="disabled action"
-      isAriaDisabled
-      component="button"
-      tooltip="Tooltip for disabled item"
-      tooltipProps={{ position: 'top' }}
-    >
-      Disabled action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated action
-    </DropdownItem>
-  ];
-
-  return (
-    <Dropdown
-      onSelect={onSelect}
-      position={DropdownPosition.right}
-      toggle={
-        <DropdownToggle id="toggle-position-right" onToggle={onToggle}>
-          Dropdown
-        </DropdownToggle>
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
-  );
-};

package/src/deprecated/components/Dropdown/examples/DropdownPrimaryToggle.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-
-export const DropdownPrimaryToggle: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('toggle-primary');
-    element?.focus();
-  };
-
-  const onSelect = () => {
-    setIsOpen(false);
-    onFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem
-      key="disabled action"
-      isAriaDisabled
-      component="button"
-      tooltip="Tooltip for disabled item"
-      tooltipProps={{ position: 'top' }}
-    >
-      Disabled action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated action
-    </DropdownItem>
-  ];
-
-  return (
-    <Dropdown
-      onSelect={onSelect}
-      toggle={
-        <DropdownToggle id="toggle-primary" toggleVariant="primary" onToggle={onToggle}>
-          Dropdown
-        </DropdownToggle>
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
-  );
-};

package/src/deprecated/components/Dropdown/examples/DropdownRouterLink.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core/deprecated';
-import { Link } from '@reach/router';
-
-export const DropdownRouterLink: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('toggle-router-link');
-    element?.focus();
-  };
-
-  const onSelect = () => {
-    setIsOpen(false);
-    onFocus();
-  };
-
-  const dropdownItems = [<DropdownItem key="routerlink" component={<Link to="/">@reach/router Link</Link>} />];
-
-  return (
-    <Dropdown
-      onSelect={onSelect}
-      toggle={
-        <DropdownToggle id="toggle-router-link" onToggle={onToggle}>
-          Dropdown
-        </DropdownToggle>
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
-  );
-};

package/src/deprecated/components/Dropdown/examples/DropdownSecondaryToggle.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core/deprecated';
-
-export const DropdownPrimaryToggle: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('toggle-secondary');
-    element?.focus();
-  };
-
-  const onSelect = () => {
-    setIsOpen(false);
-    onFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem
-      key="disabled action"
-      isAriaDisabled
-      component="button"
-      tooltip="Tooltip for disabled item"
-      tooltipProps={{ position: 'top' }}
-    >
-      Disabled action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated action
-    </DropdownItem>
-  ];
-
-  return (
-    <Dropdown
-      onSelect={onSelect}
-      toggle={
-        <DropdownToggle id="toggle-secondary" toggleVariant="secondary" onToggle={onToggle}>
-          Dropdown
-        </DropdownToggle>
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
-  );
-};

package/src/deprecated/components/Dropdown/examples/DropdownSplitButton.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-  DropdownItem,
-  DropdownSeparator
-} from '@patternfly/react-core/deprecated';
-
-export const DropdownSplitButton: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('toggle-split-button');
-    element?.focus();
-  };
-
-  const onSelect = () => {
-    setIsOpen(false);
-    onFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem
-      key="disabled action"
-      isAriaDisabled
-      component="button"
-      tooltip="Tooltip for disabled item"
-      tooltipProps={{ position: 'top' }}
-    >
-      Disabled action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated action
-    </DropdownItem>
-  ];
-
-  return (
-    <Dropdown
-      onSelect={onSelect}
-      toggle={
-        <DropdownToggle
-          splitButtonItems={[
-            <DropdownToggleCheckbox id="split-button-toggle-checkbox" key="split-checkbox" aria-label="Select all" />
-          ]}
-          onToggle={onToggle}
-          id="toggle-split-button"
-        />
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
-  );
-};

package/src/deprecated/components/Dropdown/examples/DropdownSplitButtonAction.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-
-export const DropdownSplitButtonAction: React.FunctionComponent = () => {
-  const [isActionOpen, setIsActionOpen] = React.useState(false);
-  const [isCogOpen, setIsCogOpen] = React.useState(false);
-
-  const onActionToggle = (_event: any, isActionOpen: boolean) => {
-    setIsActionOpen(isActionOpen);
-  };
-  const onCogToggle = (_event: any, isCogOpen: boolean) => {
-    setIsCogOpen(isCogOpen);
-  };
-
-  const onActionClick = () => {
-    window.alert('You selected an action button!');
-  };
-  const onCogClick = () => {
-    window.alert('You selected the Cog!');
-  };
-
-  const onActionFocus = () => {
-    const element = document.getElementById('toggle-split-button-action');
-    element?.focus();
-  };
-  const onCogFocus = () => {
-    const element = document.getElementById('toggle-split-button-cog');
-    element?.focus();
-  };
-
-  const onActionSelect = () => {
-    setIsActionOpen(false);
-    onActionFocus();
-  };
-  const onCogSelect = () => {
-    setIsCogOpen(false);
-    onCogFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="action" component="button" onClick={onActionClick}>
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" component="button" isDisabled onClick={onActionClick}>
-      Disabled action
-    </DropdownItem>,
-    <DropdownItem key="other action" component="button" onClick={onActionClick}>
-      Other action
-    </DropdownItem>
-  ];
-
-  const dropdownIconItems = [
-    <DropdownItem key="action" component="button" icon={<CogIcon />} onClick={onActionClick}>
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" component="button" icon={<BellIcon />} isDisabled onClick={onActionClick}>
-      Disabled action
-    </DropdownItem>,
-    <DropdownItem key="other action" component="button" icon={<CubesIcon />} onClick={onActionClick}>
-      Other action
-    </DropdownItem>
-  ];
-
-  return (
-    <React.Fragment>
-      <Dropdown
-        onSelect={onActionSelect}
-        toggle={
-          <DropdownToggle
-            id="toggle-split-button-action"
-            splitButtonItems={[
-              <DropdownToggleAction key="action" onClick={onActionClick}>
-                Action
-              </DropdownToggleAction>
-            ]}
-            splitButtonVariant="action"
-            onToggle={onActionToggle}
-          />
-        }
-        isOpen={isActionOpen}
-        dropdownItems={dropdownItems}
-      />{' '}
-      <Dropdown
-        onSelect={onCogSelect}
-        toggle={
-          <DropdownToggle
-            id="toggle-split-button-cog"
-            splitButtonItems={[
-              <DropdownToggleAction key="cog-action" aria-label="Action" onClick={onCogClick}>
-                <CogIcon />
-              </DropdownToggleAction>
-            ]}
-            splitButtonVariant="action"
-            onToggle={onCogToggle}
-          />
-        }
-        isOpen={isCogOpen}
-        dropdownItems={dropdownIconItems}
-      />
-    </React.Fragment>
-  );
-};

package/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionPrimary.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-
-export const DropdownSplitButtonActionPrimary: React.FunctionComponent = () => {
-  const [isActionOpen, setIsActionOpen] = React.useState(false);
-  const [isCogOpen, setIsCogOpen] = React.useState(false);
-
-  const onActionToggle = (_event: any, isActionOpen: boolean) => {
-    setIsActionOpen(isActionOpen);
-  };
-  const onCogToggle = (_event: any, isCogOpen: boolean) => {
-    setIsCogOpen(isCogOpen);
-  };
-
-  const onActionClick = () => {
-    window.alert('You selected an action button!');
-  };
-  const onCogClick = () => {
-    window.alert('You selected the Cog!');
-  };
-
-  const onActionFocus = () => {
-    const element = document.getElementById('toggle-split-button-action-primary');
-    element?.focus();
-  };
-  const onCogFocus = () => {
-    const element = document.getElementById('toggle-split-button-cog-primary');
-    element?.focus();
-  };
-
-  const onActionSelect = () => {
-    setIsActionOpen(false);
-    onActionFocus();
-  };
-  const onCogSelect = () => {
-    setIsCogOpen(false);
-    onCogFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="action" component="button" onClick={onActionClick}>
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" component="button" isDisabled onClick={onActionClick}>
-      Disabled action
-    </DropdownItem>,
-    <DropdownItem key="other action" component="button" onClick={onActionClick}>
-      Other action
-    </DropdownItem>
-  ];
-
-  const dropdownIconItems = [
-    <DropdownItem key="action" component="button" icon={<CogIcon />} onClick={onActionClick}>
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" component="button" icon={<BellIcon />} isDisabled onClick={onActionClick}>
-      Disabled action
-    </DropdownItem>,
-    <DropdownItem key="other action" component="button" icon={<CubesIcon />} onClick={onActionClick}>
-      Other action
-    </DropdownItem>
-  ];
-
-  return (
-    <React.Fragment>
-      <Dropdown
-        onSelect={onActionSelect}
-        toggle={
-          <DropdownToggle
-            id="toggle-split-button-action-primary"
-            splitButtonItems={[
-              <DropdownToggleAction key="action" onClick={onActionClick}>
-                Action
-              </DropdownToggleAction>
-            ]}
-            toggleVariant="primary"
-            splitButtonVariant="action"
-            onToggle={onActionToggle}
-          />
-        }
-        isOpen={isActionOpen}
-        dropdownItems={dropdownItems}
-      />{' '}
-      <Dropdown
-        onSelect={onCogSelect}
-        toggle={
-          <DropdownToggle
-            id="toggle-split-button-cog-primary"
-            splitButtonItems={[
-              <DropdownToggleAction key="cog-action" aria-label="Action" onClick={onCogClick}>
-                <CogIcon />
-              </DropdownToggleAction>
-            ]}
-            toggleVariant="primary"
-            splitButtonVariant="action"
-            onToggle={onCogToggle}
-          />
-        }
-        isOpen={isCogOpen}
-        dropdownItems={dropdownIconItems}
-      />
-    </React.Fragment>
-  );
-};

package/src/deprecated/components/Dropdown/examples/DropdownSplitButtonActionSecondary.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownToggle, DropdownToggleAction, DropdownItem } from '@patternfly/react-core/deprecated';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-
-export const DropdownSplitButtonActionSecondary: React.FunctionComponent = () => {
-  const [isActionOpen, setIsActionOpen] = React.useState(false);
-  const [isCogOpen, setIsCogOpen] = React.useState(false);
-
-  const onActionToggle = (_event: any, isActionOpen: boolean) => {
-    setIsActionOpen(isActionOpen);
-  };
-  const onCogToggle = (_event: any, isCogOpen: boolean) => {
-    setIsCogOpen(isCogOpen);
-  };
-
-  const onActionClick = () => {
-    window.alert('You selected an action button!');
-  };
-  const onCogClick = () => {
-    window.alert('You selected the Cog!');
-  };
-
-  const onActionFocus = () => {
-    const element = document.getElementById('toggle-split-button-action-secondary');
-    element?.focus();
-  };
-  const onCogFocus = () => {
-    const element = document.getElementById('toggle-split-button-cog-secondary');
-    element?.focus();
-  };
-
-  const onActionSelect = () => {
-    setIsActionOpen(false);
-    onActionFocus();
-  };
-  const onCogSelect = () => {
-    setIsCogOpen(false);
-    onCogFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="action" component="button" onClick={onActionClick}>
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" component="button" isDisabled onClick={onActionClick}>
-      Disabled action
-    </DropdownItem>,
-    <DropdownItem key="other action" component="button" onClick={onActionClick}>
-      Other action
-    </DropdownItem>
-  ];
-
-  const dropdownIconItems = [
-    <DropdownItem key="action" component="button" icon={<CogIcon />} onClick={onActionClick}>
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" component="button" icon={<BellIcon />} isDisabled onClick={onActionClick}>
-      Disabled action
-    </DropdownItem>,
-    <DropdownItem key="other action" component="button" icon={<CubesIcon />} onClick={onActionClick}>
-      Other action
-    </DropdownItem>
-  ];
-
-  return (
-    <React.Fragment>
-      <Dropdown
-        onSelect={onActionSelect}
-        toggle={
-          <DropdownToggle
-            id="toggle-split-button-action-secondary"
-            splitButtonItems={[
-              <DropdownToggleAction key="action" onClick={onActionClick}>
-                Action
-              </DropdownToggleAction>
-            ]}
-            toggleVariant="secondary"
-            splitButtonVariant="action"
-            onToggle={onActionToggle}
-          />
-        }
-        isOpen={isActionOpen}
-        dropdownItems={dropdownItems}
-      />{' '}
-      <Dropdown
-        onSelect={onCogSelect}
-        toggle={
-          <DropdownToggle
-            id="toggle-split-button-cog-secondary"
-            splitButtonItems={[
-              <DropdownToggleAction key="cog-action" aria-label="Action" onClick={onCogClick}>
-                <CogIcon />
-              </DropdownToggleAction>
-            ]}
-            toggleVariant="secondary"
-            splitButtonVariant="action"
-            onToggle={onCogToggle}
-          />
-        }
-        isOpen={isCogOpen}
-        dropdownItems={dropdownIconItems}
-      />
-    </React.Fragment>
-  );
-};

package/src/deprecated/components/Dropdown/examples/DropdownSplitButtonDisabled.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import {
-  Dropdown,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-  DropdownItem,
-  DropdownSeparator
-} from '@patternfly/react-core/deprecated';
-
-export const DropdownSplitButtonDisabled: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-  };
-
-  const onFocus = () => {
-    const element = document.getElementById('toggle-split-button');
-    element?.focus();
-  };
-
-  const onSelect = () => {
-    setIsOpen(false);
-    onFocus();
-  };
-
-  const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem
-      key="disabled action"
-      isAriaDisabled
-      component="button"
-      tooltip="Tooltip for disabled item"
-      tooltipProps={{ position: 'top' }}
-    >
-      Disabled action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated action
-    </DropdownItem>
-  ];
-
-  return (
-    <Dropdown
-      onSelect={onSelect}
-      toggle={
-        <DropdownToggle
-          splitButtonItems={[
-            <DropdownToggleCheckbox
-              isDisabled
-              id="split-button-disabled-checkbox"
-              key="split-checkbox"
-              aria-label="Select all"
-            />
-          ]}
-          onToggle={onToggle}
-          isDisabled
-          id="toggle-split-button-disabled"
-        />
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
-  );
-};