@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.2

package/src/demos/Card/CardData.jsx

@@ -0,0 +1,62 @@
+export const data = [
+    {
+      "id": 0,
+      "name": "PatternFly",
+      "description": "PatternFly is a community project that promotes design commonality and improves user experience.",
+      "icon": "pfIcon"
+    },
+    {
+      "id": 1,
+      "name": "ActiveMQ",
+      "description": "The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.",
+      "icon": "activeMQIcon"
+    },
+    {
+      "id": 2,
+      "name": "Apache Spark",
+      "description": "This documentation page covers the Apache Spark component for the Apache Camel.",
+      "icon": "sparkIcon"
+    },
+    {
+      "id": 3,
+      "name": "Avro",
+      "description": "This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.",
+      "icon": "avroIcon"
+    },
+    {
+      "id": 4,
+      "name": "Azure Services",
+      "description": "The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.",
+      "icon": "azureIcon"
+    },
+    {
+      "id": 5,
+      "name": "Crypto",
+      "description": "For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.",
+      "icon": "saxonIcon"
+    },
+    {
+      "id": 6,
+      "name": "DropBox",
+      "description": "The dropbox component allows you to treat Dropbox remote folders as a producer or consumer of messages.",
+      "icon": "dropBoxIcon"
+    },
+    {
+      "id": 7,
+      "name": "JBoss Data Grid",
+      "description": "Read or write to a fully-supported distributed cache and data grid for faster integration services.",
+      "icon": "infinispanIcon"
+    },
+    {
+      "id": 8,
+      "name": "REST",
+      "description": "The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport. From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.",
+      "icon": "restIcon"
+    },
+    {
+      "id": 9,
+      "name": "SWAGGER",
+      "description": "Expose REST services and their APIs using Swagger specification.",
+      "icon": "swaggerIcon"
+    }
+  ]

package/src/demos/CardDemos.md

@@ -1277,16 +1277,16 @@ const UtilizationCard3: React.FunctionComponent = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -1571,9 +1571,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1641,9 +1641,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1732,9 +1732,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1802,9 +1802,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1893,9 +1893,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -1963,9 +1963,9 @@ CardNestedDemo = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2094,9 +2094,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2164,9 +2164,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2252,9 +2252,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2322,9 +2322,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2410,9 +2410,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">100C</div>
-                          <div className="pf-l-flex__item">50C</div>
-                          <div className="pf-l-flex__item">0C</div>
+                          <FlexItem>100C</FlexItem>
+                          <FlexItem>50C</FlexItem>
+                          <FlexItem>0C</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2480,9 +2480,9 @@ const AccordionCard: React.FunctionComponent = () => {
                           spaceItems={{ default: 'spaceItemsNone' }}
                           alignItems={{ md: 'alignItemsFlexEnd' }}
                         >
-                          <div className="pf-l-flex__item">3.6Ghz</div>
-                          <div className="pf-l-flex__item">1.5Ghz</div>
-                          <div className="pf-l-flex__item">0GHZ</div>
+                          <FlexItem>3.6Ghz</FlexItem>
+                          <FlexItem>1.5Ghz</FlexItem>
+                          <FlexItem>0GHZ</FlexItem>
                         </Flex>
                       </GridItem>
                       <GridItem span={10}>
@@ -2556,16 +2556,16 @@ const TrendCard1: React.FunctionComponent = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -2753,16 +2753,16 @@ CardLogViewDemo = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -2887,13 +2887,13 @@ CardEventViewDemo = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption itemId="Success" key="option1">
+      <SelectOption value="Success" key="option1">
         Success
       </SelectOption>
-      <SelectOption itemId="Error" key="option2">
+      <SelectOption value="Error" key="option2">
         Error
       </SelectOption>
-      <SelectOption itemId="Warning" key="option3">
+      <SelectOption value="Warning" key="option3">
         Error
       </SelectOption>
     </SelectList>

package/src/demos/CustomMenus/ApplicationLauncher.md

@@ -0,0 +1,30 @@
+---
+id: Application launcher
+section: components
+subsection: menus
+source: react-demos
+propComponents:
+  [
+    'MenuToggle',
+    'MenuSearch',
+    'MenuSearchInput',
+    'Tooltip',
+    'Divider',
+    'SearchInput',
+    'Dropdown',
+    'DropdownGroup',
+    'DropdownList',
+    'DropdownItem'
+  ]
+---
+
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import pfIcon from './examples/pf-logo-small.svg';
+
+As the application launcher component is now deprecated, an application launcher may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.
+
+### Application launcher menu
+
+```ts file="./examples/ApplicationLauncherDemo.tsx"
+
+```

package/src/demos/CustomMenus/ContextSelector.md

@@ -0,0 +1,30 @@
+---
+id: Context selector
+section: components
+subsection: menus
+source: react-demos
+propComponents:
+  [
+    'MenuToggle',
+    'MenuFooter',
+    'MenuSearch',
+    'MenuSearchInput',
+    'Divider',
+    'InputGroup',
+    'SearchInput',
+    'Dropdown',
+    'DropdownGroup',
+    'DropdownList',
+    'DropdownItem'
+  ]
+---
+
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+As the context selector component is now deprecated, a context selector may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.
+
+### Context selector menu
+
+```ts file="./examples/ContextSelectorDemo.tsx"
+
+```

package/src/demos/CustomMenus/CustomMenus.md

@@ -0,0 +1,84 @@
+---
+id: Custom menus
+section: components
+subsection: menus
+---
+
+import { Link } from '@reach/router';
+
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
+import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
+import pfIcon from './examples/pf-logo-small.svg';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import avatarImg from './examples/avatarImg.svg';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Menu/menu';
+
+## Examples
+
+Custom menus can be constructed using a composable approach by combining the [menu](/components/menus/menu) and [menu toggle](/components/menus/menu-toggle) components in unique ways. To handle basic keyboard inputs, [dropdown](/components/menus/dropdown), [select](/components/menus/select), or [`<MenuContainer>`](/components/menus/menu#menucontainer) components may be used in combination with menu components.
+
+Additionally, menu components may be connected to each other manually through our undocumented internal [popper.js](https://popper.js.org/) wrapper component called Popper.
+
+### With actions
+
+```ts file="./examples/ActionsMenuDemo.tsx"
+
+```
+
+### With favorites
+
+```ts file="./examples/FavoritesDemo.tsx"
+
+```
+
+### With drilldown
+
+```ts isBeta file="./examples/DrilldownMenuDemo.tsx"
+
+```
+
+### Tree view menu
+
+When rendering a menu-like element that does not contain `<MenuItem>` components, [panel](/components/panel) allows more flexible control and customization.
+
+```ts file="./examples/TreeViewMenuDemo.tsx"
+
+```
+
+### Flyout menu
+
+The flyout will automatically position to the left or top if it would otherwise go outside the window. The menu must be placed in a container outside the main content like Popper, [popover](/components/popover) or [tooltip](/components/tooltip), since it may go over the side nav.
+
+```ts isBeta file="./examples/FlyoutDemo.tsx"
+
+```
+
+### Application launcher menu
+
+```ts file="./examples/ApplicationLauncherDemo.tsx"
+
+```
+
+### Context selector menu
+
+```ts file="./examples/ContextSelectorDemo.tsx"
+
+```
+
+### Date select menu
+
+```ts file="./examples/DateSelectDemo.tsx"
+
+```

package/src/demos/CustomMenus/OptionsMenu.md

@@ -0,0 +1,17 @@
+---
+id: Options menu
+section: components
+subsection: menus
+source: react-demos
+propComponents: ['MenuToggle', 'Divider', 'Select', 'SelectList', 'SelectOption', 'SelectGroup']
+---
+
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+As the `<OptionsMenu>` component is now deprecated, an options menu may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [select](/components/menus/select) component that is built off of menu.
+
+### Options menu
+
+```ts file="./examples/OptionsMenuDemo.tsx"
+
+```

package/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { MenuToggle, MenuItemAction, Select, SelectGroup, SelectList, SelectOption } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const ActionsMenuDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  const onSelect = (event: React.MouseEvent | undefined, value: string | number | undefined) => {
+    if (typeof value === 'string' || typeof value === 'undefined') {
+      return;
+    }
+
+    if (selectedItems.includes(value)) {
+      setSelectedItems(selectedItems.filter((id) => id !== value));
+    } else {
+      setSelectedItems([...selectedItems, value]);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Select
+      isOpen={isOpen}
+      ref={menuRef}
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+          {isOpen ? 'Expanded' : 'Collapsed'}
+        </MenuToggle>
+      )}
+      // eslint-disable-next-line no-console
+      onActionClick={(event, value, actionId) => console.log(`clicked on ${value} - ${actionId}`)}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+    >
+      <SelectGroup label="Actions">
+        <SelectList>
+          <SelectOption
+            isSelected={selectedItems.includes(0)}
+            actions={
+              <MenuItemAction
+                icon={<CodeBranchIcon aria-hidden />}
+                actionId="code"
+                // eslint-disable-next-line no-console
+                onClick={() => console.log('clicked on code icon')}
+                aria-label="Code"
+              />
+            }
+            description="This is a description"
+            value={0}
+          >
+            Item 1
+          </SelectOption>
+          <SelectOption
+            isDisabled
+            isSelected={selectedItems.includes(1)}
+            actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId="alert" aria-label="Alert" />}
+            description="This is a description"
+            value={1}
+          >
+            Item 2
+          </SelectOption>
+          <SelectOption
+            isSelected={selectedItems.includes(2)}
+            actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
+            value={2}
+          >
+            Item 3
+          </SelectOption>
+          <SelectOption
+            isSelected={selectedItems.includes(3)}
+            actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId="expand" aria-label="Expand" />}
+            description="This is a description"
+            value={3}
+          >
+            Item 4
+          </SelectOption>
+        </SelectList>
+      </SelectGroup>
+    </Select>
+  );
+};