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

package/src/demos/{ComposableMenu/examples/ComposableApplicationLauncher.tsx → CustomMenus/examples/ApplicationLauncherDemo.tsx}

@@ -1,50 +1,29 @@
 import React from 'react';
 import {
   MenuToggle,
-  Menu,
-  MenuContent,
-  MenuList,
-  MenuItem,
-  MenuGroup,
   MenuSearch,
   MenuSearchInput,
-  Popper,
   Tooltip,
   Divider,
-  SearchInput
+  SearchInput,
+  Dropdown,
+  DropdownGroup,
+  DropdownList,
+  DropdownItem
 } from '@patternfly/react-core';
-import { Link } from '@reach/router';
 import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';
 import pfIcon from 'pf-logo-small.svg';
 
-export const ComposableApplicationLauncher: React.FunctionComponent = () => {
+const MockLink: React.FunctionComponent = ({ to, ...props }: any) => <a href={to} {...props}></a>;
+
+export const ApplicationLauncherDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
   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') {
-        setIsOpen(!isOpen);
-        toggleRef.current?.focus();
-      }
-    }
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
+  const onToggleClick = () => {
     setTimeout(() => {
       if (menuRef.current) {
         const firstElement = menuRef.current.querySelector(
@@ -57,100 +36,77 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
-  const toggle = (
-    <MenuToggle
-      aria-label="Toggle"
-      ref={toggleRef}
-      variant="plain"
-      onClick={onToggleClick}
-      isExpanded={isOpen}
-      style={{ width: 'auto' }}
-    >
-      <ThIcon />
-    </MenuToggle>
-  );
-
   const menuItems = [
-    <MenuGroup key="group1" label="Group 1">
-      <MenuList>
-        <MenuItem itemId="0" id="0" isFavorited={favorites.includes('0')}>
+    <DropdownGroup key="group1" label="Group 1">
+      <DropdownList>
+        <DropdownItem value="0" id="0" isFavorited={favorites.includes('0')}>
           Application 1
-        </MenuItem>
-        <MenuItem
-          itemId="1"
+        </DropdownItem>
+        <DropdownItem
+          value="1"
           id="1"
           isFavorited={favorites.includes('1')}
           to="#default-link2"
           onClick={(ev) => ev.preventDefault()}
         >
           Application 2
-        </MenuItem>
-      </MenuList>
-    </MenuGroup>,
+        </DropdownItem>
+      </DropdownList>
+    </DropdownGroup>,
     <Divider key="group1-divider" />,
-    <MenuGroup key="group2" label="Group 2">
-      <MenuList>
-        <MenuItem
-          itemId="2"
+    <DropdownGroup key="group2" label="Group 2">
+      <DropdownList>
+        <DropdownItem
+          value="2"
           id="2"
           isFavorited={favorites.includes('2')}
-          component={(props) => <Link {...props} to="#router-link" />}
+          component={(props) => <MockLink {...props} to="#router-link" />}
         >
-          @reach/router Link
-        </MenuItem>
-        <MenuItem
-          itemId="3"
+          Custom component (such as @reach/router Link)
+        </DropdownItem>
+        <DropdownItem
+          value="3"
           id="3"
           isFavorited={favorites.includes('3')}
           isExternalLink
           icon={<img src={pfIcon} />}
-          component={(props) => <Link {...props} to="#router-link2" />}
+          component={(props) => <MockLink {...props} to="#router-link2" />}
         >
-          @reach/router Link with icon
-        </MenuItem>
-      </MenuList>
-    </MenuGroup>,
+          Custom component with icon
+        </DropdownItem>
+      </DropdownList>
+    </DropdownGroup>,
     <Divider key="group2-divider" />,
-    <MenuList key="other-items">
-      <MenuItem key="tooltip-app" isFavorited={favorites.includes('4')} itemId="4" id="4">
+    <DropdownList key="other-items">
+      <DropdownItem key="tooltip-app" isFavorited={favorites.includes('4')} value="4" id="4">
         <Tooltip content={<div>Launch Application 3</div>} position="right">
           <span>Application 3 with tooltip</span>
         </Tooltip>
-      </MenuItem>
-      <MenuItem key="disabled-app" itemId="5" id="5" isDisabled>
+      </DropdownItem>
+      <DropdownItem key="disabled-app" value="5" id="5" isDisabled>
         Unavailable Application
-      </MenuItem>
-    </MenuList>
+      </DropdownItem>
+    </DropdownList>
   ];
 
   const createFavorites = (favIds: string[]) => {
     const favorites: unknown[] = [];
 
     menuItems.forEach((item) => {
-      if (item.type === MenuList) {
+      if (item.type === DropdownList) {
         item.props.children.filter((child) => {
-          if (favIds.includes(child.props.itemId)) {
+          if (favIds.includes(child.props.value)) {
             favorites.push(child);
           }
         });
-      } else if (item.type === MenuGroup) {
+      } else if (item.type === DropdownGroup) {
         item.props.children.props.children.filter((child) => {
-          if (favIds.includes(child.props.itemId)) {
+          if (favIds.includes(child.props.value)) {
             favorites.push(child);
           }
         });
       } else {
-        if (favIds.includes(item.props.itemId)) {
+        if (favIds.includes(item.props.value)) {
           favorites.push(item);
         }
       }
@@ -166,11 +122,11 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     let keepDivider = false;
     const filteredCopy = items
       .map((group) => {
-        if (group.type === MenuGroup) {
+        if (group.type === DropdownGroup) {
           const filteredGroup = React.cloneElement(group, {
             children: React.cloneElement(group.props.children, {
               children: group.props.children.props.children.filter((child) => {
-                if (filteredIds.includes(child.props.itemId)) {
+                if (filteredIds.includes(child.props.value)) {
                   return child;
                 }
               })
@@ -183,10 +139,10 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           } else {
             keepDivider = false;
           }
-        } else if (group.type === MenuList) {
+        } else if (group.type === DropdownList) {
           const filteredGroup = React.cloneElement(group, {
             children: group.props.children.filter((child) => {
-              if (filteredIds.includes(child.props.itemId)) {
+              if (filteredIds.includes(child.props.value)) {
                 return child;
               }
             })
@@ -198,7 +154,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
             keepDivider = false;
           }
         } else {
-          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.itemId)) {
+          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.value)) {
             return group;
           }
         }
@@ -228,14 +184,14 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     setFilteredIds(filteredIds);
   };
 
-  const onFavorite = (event: any, itemId: string, actionId: string) => {
+  const onFavorite = (event: any, value: string, actionId: string) => {
     event.stopPropagation();
     if (actionId === 'fav') {
-      const isFavorite = favorites.includes(itemId);
+      const isFavorite = favorites.includes(value);
       if (isFavorite) {
-        setFavorites(favorites.filter((fav) => fav !== itemId));
+        setFavorites(favorites.filter((fav) => fav !== value));
       } else {
-        setFavorites([...favorites, itemId]);
+        setFavorites([...favorites, value]);
       }
     }
   };
@@ -243,30 +199,47 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   const filteredFavorites = filterItems(createFavorites(favorites), filteredIds);
   const filteredItems = filterItems(menuItems, filteredIds);
   if (filteredItems.length === 0) {
-    filteredItems.push(<MenuItem key="no-items">No results found</MenuItem>);
+    filteredItems.push(<DropdownItem key="no-items">No results found</DropdownItem>);
   }
 
-  const menu = (
+  return (
     // eslint-disable-next-line no-console
-    <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
+    <Dropdown
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          aria-label="Toggle"
+          ref={toggleRef}
+          variant="plain"
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+          style={{ width: 'auto' }}
+        >
+          <ThIcon />
+        </MenuToggle>
+      )}
+      ref={menuRef}
+      onActionClick={onFavorite}
+      // eslint-disable-next-line no-console
+      onSelect={(_ev, value) => console.log('selected', value)}
+    >
       <MenuSearch>
         <MenuSearchInput>
           <SearchInput aria-label="Filter menu items" onChange={(_event, value) => onTextChange(value)} />
         </MenuSearchInput>
       </MenuSearch>
       <Divider />
-      <MenuContent>
-        {filteredFavorites.length > 0 && (
-          <React.Fragment>
-            <MenuGroup key="favorites-group" label="Favorites">
-              <MenuList>{filteredFavorites}</MenuList>
-            </MenuGroup>
-            <Divider key="favorites-divider" />
-          </React.Fragment>
-        )}
-        {filteredItems}
-      </MenuContent>
-    </Menu>
+      {filteredFavorites.length > 0 && (
+        <React.Fragment>
+          <DropdownGroup key="favorites-group" label="Favorites">
+            <DropdownList>{filteredFavorites}</DropdownList>
+          </DropdownGroup>
+          <Divider key="favorites-divider" />
+        </React.Fragment>
+      )}
+      {filteredItems}
+    </Dropdown>
   );
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

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

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  MenuToggle,
+  MenuFooter,
+  MenuSearch,
+  MenuSearchInput,
+  Divider,
+  InputGroup,
+  InputGroupItem,
+  Button,
+  ButtonVariant,
+  SearchInput,
+  Dropdown,
+  DropdownList,
+  DropdownItem
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+interface ItemData {
+  text: string;
+  href?: string;
+  isDisabled?: boolean | undefined;
+}
+
+type ItemArrayType = (ItemData | string)[];
+
+export const ContextSelectorDemo: React.FunctionComponent = () => {
+  const items: ItemArrayType = [
+    {
+      text: 'Action'
+    },
+    {
+      text: 'Link',
+      href: '#'
+    },
+    {
+      text: 'Disabled action',
+      isDisabled: true
+    },
+    {
+      text: 'Disabled link',
+      href: '#',
+      isDisabled: true
+    },
+    'My project',
+    'OpenShift cluster',
+    'Production Ansible',
+    'AWS',
+    'Azure',
+    'My project 2',
+    'OpenShift cluster ',
+    'Production Ansible 2 ',
+    'AWS 2',
+    'Azure 2'
+  ];
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState(typeof items[0] === 'string' ? items[0] : items[0].text);
+  const [filteredItems, setFilteredItems] = React.useState<ItemArrayType>(items);
+  const [searchInputValue, setSearchInputValue] = React.useState<string>('');
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const menuFooterBtnRef = React.useRef<HTMLButtonElement>(null);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (ev: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    if (typeof itemId === 'number' || typeof itemId === 'undefined') {
+      return;
+    }
+    setSelected(itemId.toString());
+    setIsOpen(!isOpen);
+  };
+
+  const onSearchInputChange = (value: string) => {
+    setSearchInputValue(value);
+  };
+
+  const onSearchButtonClick = () => {
+    const filtered =
+      searchInputValue === ''
+        ? items
+        : items.filter((item) => {
+            const str = typeof item === 'string' ? item : item.text;
+            return str.toLowerCase().indexOf(searchInputValue.toLowerCase()) !== -1;
+          });
+
+    setFilteredItems(filtered || []);
+    setIsOpen(true); // Keep menu open after search executed
+  };
+
+  const onEnterPressed = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      onSearchButtonClick();
+    }
+  };
+
+  return (
+    <Dropdown
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+          {selected}
+        </MenuToggle>
+      )}
+      ref={menuRef}
+      id="context-selector"
+      onSelect={onSelect}
+      isScrollable
+    >
+      <MenuSearch>
+        <MenuSearchInput>
+          <InputGroup>
+            <InputGroupItem isFill>
+              <SearchInput
+                value={searchInputValue}
+                placeholder="Search"
+                onChange={(_event, value) => onSearchInputChange(value)}
+                onKeyPress={onEnterPressed}
+                aria-labelledby="pf-v5-context-selector-search-button-id-1"
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                variant={ButtonVariant.control}
+                aria-label="Search menu items"
+                id="pf-v5-context-selector-search-button-id-1"
+                onClick={onSearchButtonClick}
+              >
+                <SearchIcon aria-hidden="true" />
+              </Button>
+            </InputGroupItem>
+          </InputGroup>
+        </MenuSearchInput>
+      </MenuSearch>
+      <Divider />
+      <DropdownList>
+        {filteredItems.map((item, index) => {
+          const [itemText, isDisabled, href] =
+            typeof item === 'string' ? [item, null, null] : [item.text, item.isDisabled || null, item.href || null];
+          return (
+            <DropdownItem
+              itemId={itemText}
+              key={index}
+              isDisabled={isDisabled as boolean | undefined}
+              to={href as string | undefined}
+            >
+              {itemText}
+            </DropdownItem>
+          );
+        })}
+      </DropdownList>
+      <MenuFooter>
+        <Button ref={menuFooterBtnRef} variant="link" isInline>
+          Action
+        </Button>
+      </MenuFooter>
+    </Dropdown>
+  );
+};

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+
+export const DateSelectDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<number>(0);
+  const menuRef = React.useRef<HTMLDivElement>();
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const monthStrings = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ];
+
+  const dateString = (date: Date) => `${monthStrings[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+
+  const date = new Date();
+
+  const toggleText = {
+    0: 'Today ',
+    1: 'Yesterday ',
+    2: 'Last 7 days ',
+    3: 'Last 14 days '
+  };
+
+  const dateText = {
+    0: <small className="pf-v5-u-color-200">({dateString(date)})</small>,
+    1: (
+      <small className="pf-v5-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
+      </small>
+    ),
+    2: (
+      <small className="pf-v5-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
+      </small>
+    ),
+    3: (
+      <small className="pf-v5-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
+      </small>
+    )
+  };
+
+  return (
+    // eslint-disable-next-line no-console
+    <Select
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
+          <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
+          {dateText[selected]}
+        </MenuToggle>
+      )}
+      ref={menuRef}
+      onSelect={(_ev, value) => {
+        setSelected(value as number);
+        setIsOpen(false);
+      }}
+      selected={selected}
+    >
+      <SelectList>
+        <SelectOption value={0}>Today</SelectOption>
+        <SelectOption value={1}>Yesterday</SelectOption>
+        <SelectOption value={2}>Last 7 days</SelectOption>
+        <SelectOption value={3}>Last 14 days</SelectOption>
+      </SelectList>
+    </Select>
+  );
+};

package/src/demos/{ComposableMenu/examples/ComposableDrilldownMenu.tsx → CustomMenus/examples/DrilldownMenuDemo.tsx}

@@ -7,7 +7,7 @@ import {
   MenuItem,
   DrilldownMenu,
   Divider,
-  Popper
+  MenuContainer
 } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -18,7 +18,7 @@ interface MenuHeightsType {
   [id: string]: number;
 }
 
-export const ComposableDrilldownMenu: React.FunctionComponent = () => {
+export const DrilldownMenuDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [activeMenu, setActiveMenu] = React.useState<string>('rootMenu');
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
@@ -27,38 +27,7 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   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 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);
     setMenuDrilledIn([]);
     setDrilldownPath([]);
@@ -83,7 +52,7 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   };
 
   const setHeight = (menuId: string, height: number) => {
-    if (!menuHeights[menuId]) {
+    if (!menuHeights[menuId] || (menuId !== 'rootMenu' && menuHeights[menuId] !== height)) {
       setMenuHeights({
         ...menuHeights,
         [menuId]: height
@@ -242,5 +211,14 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       </MenuContent>
     </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}
+    />
+  );
 };