@patternfly/react-core 5.0.0-alpha.109 → 5.0.0-alpha.110

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import { MenuToggle, Divider, Dropdown, DropdownGroup, DropdownList, DropdownItem } from '@patternfly/react-core';
+
+export const FavoritesDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [favorites, setFavorites] = React.useState<string[]>([]);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const menuItems = [
+    <DropdownGroup key="group1" label="Group 1">
+      <DropdownList>
+        <DropdownItem itemId="0" id="0" isFavorited={favorites.includes('0')}>
+          Item 1
+        </DropdownItem>
+        <DropdownItem itemId="1" id="1" isFavorited={favorites.includes('1')}>
+          Item 2
+        </DropdownItem>
+        <DropdownItem itemId="2" id="2" isFavorited={favorites.includes('2')}>
+          Item 3
+        </DropdownItem>
+        <DropdownItem itemId="3" id="3" isFavorited={favorites.includes('3')}>
+          Item 4
+        </DropdownItem>
+      </DropdownList>
+    </DropdownGroup>,
+    <Divider key="group1-divider" />,
+    <DropdownGroup key="group2" label="Group 2">
+      <DropdownList>
+        <DropdownItem itemId="4" id="4" isFavorited={favorites.includes('4')}>
+          Item 5
+        </DropdownItem>
+        <DropdownItem itemId="5" id="5" isFavorited={favorites.includes('5')}>
+          Item 6
+        </DropdownItem>
+        <DropdownItem itemId="6" id="6" isFavorited={favorites.includes('6')}>
+          Item 7
+        </DropdownItem>
+        <DropdownItem itemId="7" id="7" isFavorited={favorites.includes('7')}>
+          Item 8
+        </DropdownItem>
+      </DropdownList>
+    </DropdownGroup>
+  ];
+
+  const createFavorites = (favIds: string[]) => {
+    const favorites: JSX.Element[] = [];
+
+    menuItems.forEach((item) => {
+      if (item.type === DropdownList) {
+        item.props.children.filter((child) => {
+          if (favIds.includes(child.props.itemId)) {
+            favorites.push(child);
+          }
+        });
+      } else if (item.type === DropdownGroup) {
+        item.props.children.props.children.filter((child) => {
+          if (favIds.includes(child.props.itemId)) {
+            favorites.push(child);
+          }
+        });
+      } else {
+        if (favIds.includes(item.props.itemId)) {
+          favorites.push(item);
+        }
+      }
+    });
+
+    return favorites;
+  };
+
+  React.useEffect(() => {
+    if (favorites.length === 0) {
+      const firstElement = menuRef?.current?.querySelector('li > button:not(:disabled)');
+      firstElement && (firstElement as HTMLElement).focus();
+    }
+  }, [favorites]);
+
+  const onFavorite = (event: any, itemId: string, actionId: string) => {
+    event.stopPropagation();
+    if (actionId === 'fav') {
+      const isFavorite = favorites.includes(itemId);
+      if (isFavorite) {
+        setFavorites(favorites.filter((fav) => fav !== itemId));
+      } else {
+        setFavorites([...favorites, itemId]);
+      }
+    }
+  };
+
+  return (
+    // eslint-disable-next-line no-console
+    <Dropdown
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+          {isOpen ? 'Expanded' : 'Collapsed'}
+        </MenuToggle>
+      )}
+      ref={menuRef}
+      onActionClick={onFavorite}
+      // eslint-disable-next-line no-console
+      onSelect={(_ev, itemId) => console.log('selected', itemId)}
+    >
+      {favorites.length > 0 && (
+        <React.Fragment>
+          <DropdownGroup key="favorites-group" label="Favorites">
+            <DropdownList>{createFavorites(favorites)}</DropdownList>
+          </DropdownGroup>
+          <Divider key="favorites-divider" />
+        </React.Fragment>
+      )}
+      {menuItems}
+    </Dropdown>
+  );
+};

package/src/demos/{ComposableMenu/examples/ComposableFlyout.tsx → CustomMenus/examples/FlyoutDemo.tsx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, MenuContainer } from '@patternfly/react-core';
 
 /* eslint-disable no-console */
 const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) =>
@@ -30,56 +30,22 @@ const FlyoutMenu: React.FunctionComponent<FlyoutMenuProps> = ({ depth, children
   </Menu>
 );
 
-export const ComposableFlyout: React.FunctionComponent = () => {
+export const FlyoutDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
 
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (!isOpen) {
-      return;
-    }
-    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
-      if (event.key === 'Escape' || event.key === 'Tab') {
-        setIsOpen(!isOpen);
-        toggleRef.current?.focus();
-      }
-    }
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
   let curFlyout = <FlyoutMenu depth={1} />;
   for (let i = 2; i < 14; i++) {
     curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;
   }
 
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled), li > a:not(:disabled)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
+  const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
 
   const toggle = (
-    <MenuToggle onClick={onToggleClick} isExpanded={isOpen}>
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
       {isOpen ? 'Expanded' : 'Collapsed'}
     </MenuToggle>
   );
@@ -100,5 +66,14 @@ export const ComposableFlyout: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
+  return (
+    <MenuContainer
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      menu={menu}
+      menuRef={menuRef}
+      toggle={toggle}
+      toggleRef={toggleRef}
+    />
+  );
 };

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { MenuToggle, Divider, Select, SelectList, SelectOption, SelectGroup } from '@patternfly/react-core';
+
+export const OptionsMenuDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string>('');
+  const menuRef = React.useRef<HTMLDivElement>();
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Select
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+          Options menu
+        </MenuToggle>
+      )}
+      ref={menuRef}
+      id="options-menu"
+      selected={selected}
+      onSelect={(_ev, itemId) => itemId && setSelected(itemId.toString())}
+    >
+      <SelectList>
+        <SelectOption itemId="0" isSelected={selected === '0'}>
+          Option 1
+        </SelectOption>
+        <SelectOption itemId="1" isSelected={selected === '1'} isDisabled>
+          Disabled Option
+        </SelectOption>
+        <Divider key="group1-divider" />
+        <SelectGroup label="Group 1">
+          <SelectList>
+            <SelectOption itemId="2" isSelected={selected === '2'}>
+              Option 1
+            </SelectOption>
+            <SelectOption itemId="3" isSelected={selected === '3'}>
+              Option 2
+            </SelectOption>
+          </SelectList>
+        </SelectGroup>
+        <Divider key="group2-divider" />
+        <SelectGroup label="Group 2">
+          <SelectList>
+            <SelectOption itemId="4" isSelected={selected === '4'}>
+              Option 1
+            </SelectOption>
+            <SelectOption itemId="5" isSelected={selected === '5'}>
+              Option 2
+            </SelectOption>
+          </SelectList>
+        </SelectGroup>
+      </SelectList>
+    </Select>
+  );
+};

package/src/demos/{ComposableMenu/examples/ComposableTreeViewMenu.tsx → CustomMenus/examples/TreeViewMenuDemo.tsx}

@@ -5,12 +5,12 @@ import {
   PanelMain,
   PanelMainBody,
   Title,
-  Popper,
+  MenuContainer,
   TreeView,
   TreeViewDataItem
 } from '@patternfly/react-core';
 
-export const ComposableTreeViewMenu: React.FunctionComponent = () => {
+export const TreeViewMenuDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
@@ -166,55 +166,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
     );
   };
 
-  // Controls keys that should open/close the menu
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (!isOpen) {
-      return;
-    }
-    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
-      // The escape key when pressed while inside the menu should close the menu and refocus the toggle
-      if (event.key === 'Escape') {
-        setIsOpen(!isOpen);
-        toggleRef.current?.focus();
-      }
-
-      // The tab key when pressed while inside the menu and on the contained last tree view should close the menu and refocus the toggle
-      // Shift tab should keep the default behavior to return to a previous tree view
-      if (event.key === 'Tab' && !event.shiftKey) {
-        const treeList = menuRef.current?.querySelectorAll('.pf-c-tree-view') || [];
-        if (treeList[treeList.length - 1].contains(event.target as Node)) {
-          event.preventDefault();
-          setIsOpen(!isOpen);
-          toggleRef.current?.focus();
-        }
-      }
-    }
-  };
-
-  // Controls that a click outside the menu while the menu is open should close the menu
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled), li > a:not(:disabled)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
+  const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
 
@@ -267,5 +219,16 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
       </PanelMain>
     </Panel>
   );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
+
+  return (
+    <MenuContainer
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
+      menu={menu}
+      menuRef={menuRef}
+      toggle={toggle}
+      toggleRef={toggleRef}
+    />
+  );
 };

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -1,118 +0,0 @@
----
-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';
-
-## Demos
-
-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. Composable menus currently require consumer keyboard handling and use of our undocumented [popper.js](https://popper.js.org/) wrapper component called Popper. We understand this is inconvientent boilerplate and these examples will be updated to use [Dropdown](/components/dropdown) in a future release.
-
-### Composable simple dropdown
-
-```ts file="./examples/ComposableSimpleDropdown.tsx"
-
-```
-
-### Composable actions menu
-
-```ts file="./examples/ComposableActionsMenu.tsx"
-
-```
-
-### Composable simple select
-
-```ts file="./examples/ComposableSimpleSelect.tsx"
-
-```
-
-### Composable simple checkbox select
-
-```ts file="./examples/ComposableSimpleCheckboxSelect.tsx"
-
-```
-
-### Composable typeahead select
-
-```ts file="./examples/ComposableTypeaheadSelect.tsx"
-
-```
-
-### Composable multiple typeahead select
-
-```ts file="./examples/ComposableMultipleTypeaheadSelect.tsx"
-
-```
-
-### Composable drilldown menu
-
-```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"
-
-```
-
-### Composable 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/ComposableTreeViewMenu.tsx"
-
-```
-
-### Composable flyout
-
-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/ComposableFlyout.tsx"
-
-```
-
-### Composable application launcher
-
-```ts file="./examples/ComposableApplicationLauncher.tsx"
-
-```
-
-### Composable context selector
-
-```ts file="./examples/ComposableContextSelector.tsx"
-
-```
-
-### Composable options menu variants
-
-```ts file="./examples/ComposableOptionsMenuVariants.tsx"
-
-```
-
-### Composable dropdown variants
-
-```ts file="./examples/ComposableDropdwnVariants.tsx"
-
-```
-
-### Composable date select
-
-```ts file="./examples/ComposableDateSelect.tsx"
-
-```