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

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>
+  );
+};