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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.109",
+  "version": "5.0.0-alpha.110",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "7f4932ede08af25736561cdeeeffcd110f225620"
+  "gitHead": "58f5dadf223b2b7b34f48f3dda3e1c3b06a925b8"
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -43,8 +43,10 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** Function callback called when user selects item. */
   onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
   /** Callback to allow the dropdown component to change the open state of the menu.
-   * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
+   * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
+  /** @beta Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  onOpenChangeKeys?: string[];
   /** Indicates if the menu should be without the outer box-shadow. */
   isPlain?: boolean;
   /** Indicates if the menu should be scrollable. */
@@ -76,6 +78,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   ouiaSafe = true,
   zIndex = 9999,
   popperProps,
+  onOpenChangeKeys = ['Escape', 'Tab'],
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -96,8 +99,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
         onOpenChange &&
         (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node))
       ) {
-        if (event.key === 'Escape' || event.key === 'Tab') {
-          event.preventDefault();
+        if (onOpenChangeKeys.includes(event.key)) {
           onOpenChange(false);
           toggleRef.current?.focus();
         }
@@ -130,7 +132,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef, toggleRef, onOpenChange]);
+  }, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
 
   const menu = (
     <Menu

package/src/components/Menu/Menu.tsx

@@ -301,8 +301,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
               (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element)
             }
             getFocusableElement={(navigableElement: Element) =>
-              (navigableElement.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
-              ((navigableElement.firstChild as Element).tagName === 'LABEL' &&
+              (navigableElement?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
+              ((navigableElement.firstChild as Element)?.tagName === 'LABEL' &&
                 navigableElement.querySelector('input')) || // for MenuItem checkboxes
               (navigableElement.firstChild as Element)
             }

package/src/components/Menu/MenuContainer.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Popper } from '../../helpers/Popper/Popper';
+
+export interface MenuPopperProps {
+  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
+  direction?: 'up' | 'down';
+  /** Horizontal position of the popper */
+  position?: 'right' | 'left' | 'center';
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
+  maxWidth?: string | 'trigger';
+  /** Enable to flip the popper when it reaches the boundary */
+  enableFlip?: boolean;
+}
+export interface MenuContainerProps {
+  /** Menu to be rendered */
+  menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+  /** Reference to the menu */
+  menuRef: React.RefObject<any>;
+  /** Toggle to be rendered */
+  toggle: React.ReactNode;
+  /** Reference to the toggle */
+  toggleRef: React.RefObject<any>;
+  /** Flag to indicate if menu is opened.*/
+  isOpen: boolean;
+  /** Callback to change the open state of the menu.
+   * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  onOpenChangeKeys?: string[];
+  /** z-index of the dropdown menu */
+  zIndex?: number;
+  /** Additional properties to pass to the Popper */
+  popperProps?: MenuPopperProps;
+}
+
+/**
+ * Container that links a menu and menu toggle together, to handle basic keyboard input and control the opening and closing of a menu.
+ * This component is currently in beta and is subject to change.
+ */
+export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
+  menu,
+  menuRef,
+  isOpen,
+  toggle,
+  toggleRef,
+  onOpenChange,
+  zIndex = 9999,
+  popperProps,
+  onOpenChangeKeys = ['Escape', 'Tab']
+}: MenuContainerProps) => {
+  React.useEffect(() => {
+    const handleMenuKeys = (event: KeyboardEvent) => {
+      // Close the menu on tab or escape if onOpenChange is provided
+      if (
+        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
+        toggleRef.current?.contains(event.target as Node)
+      ) {
+        if (onOpenChangeKeys.includes(event.key)) {
+          onOpenChange(false);
+          toggleRef.current?.focus();
+        }
+      }
+    };
+
+    const handleClick = (event: MouseEvent) => {
+      // toggle was clicked open via keyboard, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector(
+            'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
+          );
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
+      }
+
+      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
+      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
+        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+          onOpenChange(false);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClick);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClick);
+    };
+  }, [isOpen, menuRef, onOpenChange, onOpenChangeKeys, toggleRef]);
+
+  return (
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      zIndex={zIndex}
+      {...popperProps}
+    />
+  );
+};
+MenuContainer.displayName = 'MenuContainer';

package/src/components/Menu/examples/Menu.md

@@ -3,7 +3,19 @@ id: Menu
 section: components
 subsection: menus
 cssPrefix: pf-c-menu
-propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent', 'MenuSearch', 'MenuSearchInput', 'MenuGroup']
+propComponents:
+  [
+    'Menu',
+    'MenuList',
+    'MenuItem',
+    'MenuItemAction',
+    'MenuContent',
+    'MenuSearch',
+    'MenuSearchInput',
+    'MenuGroup',
+    'MenuContainer',
+    'MenuPopperProps'
+  ]
 ouia: true
 ---
 

package/src/components/Menu/index.ts

@@ -9,3 +9,4 @@ export * from './MenuList';
 export * from './MenuItemAction';
 export * from './DrilldownMenu';
 export * from './MenuBreadcrumb';
+export * from './MenuContainer';

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/{ComposableMenu/examples/ComposableActionsMenu.tsx → CustomMenus/examples/ActionsMenuDemo.tsx}

@@ -1,40 +1,15 @@
 import React from 'react';
-import { MenuToggle, Menu, MenuList, MenuItem, MenuGroup, MenuItemAction, Popper } from '@patternfly/react-core';
+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 ComposableActionsMenu: React.FunctionComponent = () => {
+export const ActionsMenuDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
 
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.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]);
-
   const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
     if (typeof itemId === 'string' || typeof itemId === 'undefined') {
       return;
@@ -47,32 +22,27 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     }
   };
 
-  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 ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-      {isOpen ? 'Expanded' : 'Collapsed'}
-    </MenuToggle>
-  );
-  const menu = (
-    <Menu
+  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, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}
       onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
     >
-      <MenuGroup label="Actions">
-        <MenuList>
-          <MenuItem
+      <SelectGroup label="Actions">
+        <SelectList>
+          <SelectOption
             isSelected={selectedItems.includes(0)}
             actions={
               <MenuItemAction
@@ -87,8 +57,8 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
             itemId={0}
           >
             Item 1
-          </MenuItem>
-          <MenuItem
+          </SelectOption>
+          <SelectOption
             isDisabled
             isSelected={selectedItems.includes(1)}
             actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId="alert" aria-label="Alert" />}
@@ -96,26 +66,24 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
             itemId={1}
           >
             Item 2
-          </MenuItem>
-          <MenuItem
+          </SelectOption>
+          <SelectOption
             isSelected={selectedItems.includes(2)}
             actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
             itemId={2}
           >
             Item 3
-          </MenuItem>
-          <MenuItem
+          </SelectOption>
+          <SelectOption
             isSelected={selectedItems.includes(3)}
             actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId="expand" aria-label="Expand" />}
             description="This is a description"
             itemId={3}
           >
             Item 4
-          </MenuItem>
-        </MenuList>
-      </MenuGroup>
-    </Menu>
+          </SelectOption>
+        </SelectList>
+      </SelectGroup>
+    </Select>
   );
-
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };