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

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md

@@ -1,79 +0,0 @@
----
-id: Application launcher
-section: components
-subsection: menus
-cssPrefix: pf-v5-c-app-launcher
-propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem', 'ApplicationLauncherContent']
-ouia: true
-deprecated: true
----
-
-import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/deprecated';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import { Link } from '@reach/router';
-import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
-
-Note: Application launcher is built on dropdown, for extended API go to [dropdown](/components/menus/dropdown) documentation.
-To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [tooltip](/components/tooltip).
-
-## Examples
-
-### Basic
-
-```ts file="./ApplicationLauncherBasic.tsx"
-
-```
-
-### Router link
-
-```ts file="./ApplicationLauncherRouterLink.tsx"
-
-```
-
-### Disabled
-
-```ts file="./ApplicationLauncherDisabled.tsx"
-
-```
-
-### Aligned right
-
-```ts file="./ApplicationLauncherAlignRight.tsx"
-
-```
-
-### Aligned top
-
-```ts file="./ApplicationLauncherAlignTop.tsx"
-
-```
-
-### With tooltip
-
-```ts file="./ApplicationLauncherTooltip.tsx"
-
-```
-
-### With sections and icons
-
-```ts file="./ApplicationLauncherSectionsAndIcons.tsx"
-
-```
-
-### With favorites and search
-
-```ts file="./ApplicationLauncherFavoritesAndSearch.tsx"
-
-```
-
-### With custom icon
-
-```ts file="./ApplicationLauncherCustomIcon.tsx"
-
-```
-
-### Basic with menu appended to document body
-
-```ts file="./ApplicationLauncherDocumentBody.tsx"
-
-```

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { DropdownPosition } from '@patternfly/react-core/deprecated';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated';
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherItem key="application_1a" href="#">
-    Application 1 (anchor link)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-    Application 2 (button with onClick)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-    Unavailable application
-  </ApplicationLauncherItem>
-];
-
-export const ApplicationLauncherAlignRight: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return (
-    <ApplicationLauncher
-      onSelect={onSelect}
-      onToggle={onToggle}
-      isOpen={isOpen}
-      items={appLauncherItems}
-      position={DropdownPosition.right}
-      style={{ marginLeft: 'calc(100% - 46px)' }}
-    />
-  );
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem, DropdownDirection } from '@patternfly/react-core/deprecated';
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherItem key="application_1a" href="#">
-    Application 1 (anchor link)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-    Application 2 (button with onClick)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-    Unavailable application
-  </ApplicationLauncherItem>
-];
-
-export const ApplicationLauncherAlignTop: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return (
-    <ApplicationLauncher
-      onSelect={onSelect}
-      onToggle={onToggle}
-      isOpen={isOpen}
-      items={appLauncherItems}
-      direction={DropdownDirection.up}
-    />
-  );
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated';
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherItem key="application_1a" href="#">
-    Application 1 (anchor link)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-    Application 2 (button with onClick)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-    Unavailable application
-  </ApplicationLauncherItem>
-];
-
-export const ApplicationLauncherBasic: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherItem key="application_1a" href="#">
-    Application 1 (anchor link)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-    Application 2 (button with onClick)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-    Unavailable application
-  </ApplicationLauncherItem>
-];
-
-export const ApplicationLauncherCustomIcon: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return (
-    <ApplicationLauncher
-      onSelect={onSelect}
-      onToggle={onToggle}
-      isOpen={isOpen}
-      items={appLauncherItems}
-      toggleIcon={<HelpIcon />}
-    />
-  );
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated';
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherItem key="application_1a" href="#">
-    Application 1 (anchor link)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-    Application 2 (button with onClick)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-    Unavailable application
-  </ApplicationLauncherItem>
-];
-
-export const ApplicationLauncherDisabled: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return (
-    <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} isDisabled />
-  );
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated';
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherItem key="application_1a" href="#">
-    Application 1 (anchor link)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-    Application 2 (button with onClick)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-    Unavailable application
-  </ApplicationLauncherItem>
-];
-
-export const ApplicationLauncherDocumentBody: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return (
-    <ApplicationLauncher
-      menuAppendTo={() => document.body}
-      onSelect={onSelect}
-      onToggle={onToggle}
-      isOpen={isOpen}
-      items={appLauncherItems}
-    />
-  );
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
-  ApplicationLauncherGroup,
-  ApplicationLauncherSeparator
-} from '@patternfly/react-core/deprecated';
-import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
-
-const icon: JSX.Element = <img src={pfLogoSm} />;
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherGroup key="group 1c">
-    <ApplicationLauncherItem key="group 1a" id="item-1" icon={icon}>
-      Item without group title
-    </ApplicationLauncherItem>
-    <ApplicationLauncherSeparator key="separator" />
-  </ApplicationLauncherGroup>,
-  <ApplicationLauncherGroup label="Group 2" key="group 2c">
-    <ApplicationLauncherItem key="group 2a" id="item-2" isExternal icon={icon} component="button">
-      Group 2 button
-    </ApplicationLauncherItem>
-    <ApplicationLauncherItem key="group 2b" id="item-3" isExternal href="#" icon={icon}>
-      Group 2 anchor link
-    </ApplicationLauncherItem>
-    <ApplicationLauncherSeparator key="separator" />
-  </ApplicationLauncherGroup>,
-  <ApplicationLauncherGroup label="Group 3" key="group 3c">
-    <ApplicationLauncherItem key="group 3a" id="item-4" isExternal icon={icon} component="button">
-      Group 3 button
-    </ApplicationLauncherItem>
-    <ApplicationLauncherItem key="group 3b" id="item-5" isExternal href="#" icon={icon}>
-      Group 3 anchor link
-    </ApplicationLauncherItem>
-  </ApplicationLauncherGroup>
-];
-
-export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [favorites, setFavorites] = React.useState<string[]>([]);
-  const [filteredItems, setFilteredItems] = React.useState<React.ReactNode[]>(null);
-
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
-    setFilteredItems(null);
-  };
-
-  const onFavorite = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>, itemId: string, isFavorite: boolean) => {
-    let updatedFavorites: string[] = [...favorites, itemId];
-
-    if (isFavorite) {
-      updatedFavorites = favorites.filter((id) => id !== itemId);
-    }
-
-    setFavorites(updatedFavorites);
-  };
-
-  const onSearch = (_event: React.FormEvent<HTMLInputElement>, textInput: string) => {
-    if (textInput === '') {
-      setFilteredItems(null);
-    } else {
-      const filteredGroups = appLauncherItems
-        .map((group: React.ReactElement) => {
-          const filteredGroup = React.cloneElement(group, {
-            children: group.props.children.filter((item: React.ReactElement) => {
-              if (item.type === ApplicationLauncherSeparator) {
-                return item;
-              }
-
-              return item.props.children.toLowerCase().includes(textInput.toLowerCase());
-            })
-          });
-
-          if (
-            filteredGroup.props.children.length > 0 &&
-            filteredGroup.props.children[0].type !== ApplicationLauncherSeparator
-          ) {
-            return filteredGroup;
-          }
-        })
-        .filter((newGroup) => newGroup);
-
-      if (filteredGroups.length > 0) {
-        let lastGroup = filteredGroups.pop();
-
-        lastGroup = React.cloneElement(lastGroup, {
-          children: lastGroup.props.children.filter((item) => item.type !== ApplicationLauncherSeparator)
-        });
-
-        filteredGroups.push(lastGroup);
-      }
-
-      setFilteredItems(filteredGroups);
-    }
-  };
-
-  return (
-    <ApplicationLauncher
-      onToggle={onToggle}
-      onFavorite={onFavorite}
-      onSearch={onSearch}
-      isOpen={isOpen}
-      items={filteredItems || appLauncherItems}
-      favorites={favorites}
-      isGrouped
-    />
-  );
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { Link } from '@reach/router';
-import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
-  ApplicationLauncherContent
-} from '@patternfly/react-core/deprecated';
-import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
-/* eslint-disable camelcase */
-import c_app_launcher__menu_item_Color from '@patternfly/react-tokens/dist/esm/c_app_launcher__menu_item_Color';
-
-const icon: JSX.Element = <img src={pfLogoSm} />;
-
-const linkStyle: React.CSSProperties = {
-  color: c_app_launcher__menu_item_Color.var,
-  textDecoration: 'none'
-};
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherItem
-    key="router1"
-    component={
-      <Link to="/" style={linkStyle}>
-        @reach/router Link
-      </Link>
-    }
-  />,
-  <ApplicationLauncherItem
-    key="router2"
-    isExternal
-    icon={icon}
-    component={
-      <Link to="/" style={linkStyle}>
-        <ApplicationLauncherContent>@reach/router Link with icon</ApplicationLauncherContent>
-      </Link>
-    }
-  />,
-  <ApplicationLauncherItem key="application_1a" href="#">
-    Application 1 (anchor link)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-    Application 2 (button with onClick)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-    Unavailable application
-  </ApplicationLauncherItem>
-];
-
-export const ApplicationLauncherRouterLink: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
-  ApplicationLauncherGroup,
-  ApplicationLauncherSeparator
-} from '@patternfly/react-core/deprecated';
-import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
-
-const icon = <img src={pfLogoSm} />;
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherGroup key="group 1c">
-    <ApplicationLauncherItem key="group 1a" icon={icon}>
-      Item without group title
-    </ApplicationLauncherItem>
-    <ApplicationLauncherSeparator key="separator" />
-  </ApplicationLauncherGroup>,
-  <ApplicationLauncherGroup label="Group 2" key="group 2c">
-    <ApplicationLauncherItem key="group 2a" isExternal icon={icon} component="button">
-      Group 2 button
-    </ApplicationLauncherItem>
-    <ApplicationLauncherItem key="group 2b" isExternal href="#" icon={icon}>
-      Group 2 anchor link
-    </ApplicationLauncherItem>
-    <ApplicationLauncherSeparator key="separator" />
-  </ApplicationLauncherGroup>,
-  <ApplicationLauncherGroup label="Group 3" key="group 3c">
-    <ApplicationLauncherItem key="group 3a" isExternal icon={icon} component="button">
-      Group 3 button
-    </ApplicationLauncherItem>
-    <ApplicationLauncherItem key="group 3b" isExternal href="#" icon={icon}>
-      Group 3 anchor link
-    </ApplicationLauncherItem>
-  </ApplicationLauncherGroup>
-];
-
-export const ApplicationLauncherSectionsAndIcons: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return (
-    <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} isGrouped />
-  );
-};

package/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core/deprecated';
-
-const appLauncherItems: React.ReactElement[] = [
-  <ApplicationLauncherItem key="application_1b" href="#" tooltip={<div>Launch Application 1</div>}>
-    Application 1 (anchor link)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem
-    key="application_2b"
-    component="button"
-    tooltip={<div>Launch Application 2</div>}
-    tooltipProps={{ position: 'right' }}
-    onClick={() => alert('Clicked item 2')}
-  >
-    Application 2 (onClick)
-  </ApplicationLauncherItem>,
-  <ApplicationLauncherItem
-    key="application_3b"
-    component="button"
-    tooltip={<div>Launch Application 3</div>}
-    tooltipProps={{ position: 'bottom' }}
-    onClick={() => alert('Clicked item 3')}
-  >
-    Application 3 (onClick)
-  </ApplicationLauncherItem>
-];
-
-export const ApplicationLauncherTooltip: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
-
-  return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;
-};

package/src/deprecated/components/ApplicationLauncher/index.ts

@@ -1,9 +0,0 @@
-export * from './ApplicationLauncher';
-export * from './ApplicationLauncherContext';
-export * from './ApplicationLauncherItem';
-export * from './ApplicationLauncherItemContext';
-export * from './ApplicationLauncherContent';
-export * from './ApplicationLauncherIcon';
-export * from './ApplicationLauncherText';
-export * from './ApplicationLauncherGroup';
-export * from './ApplicationLauncherSeparator';