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

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 value="0" id="0" isFavorited={favorites.includes('0')}>
+          Item 1
+        </DropdownItem>
+        <DropdownItem value="1" id="1" isFavorited={favorites.includes('1')}>
+          Item 2
+        </DropdownItem>
+        <DropdownItem value="2" id="2" isFavorited={favorites.includes('2')}>
+          Item 3
+        </DropdownItem>
+        <DropdownItem value="3" id="3" isFavorited={favorites.includes('3')}>
+          Item 4
+        </DropdownItem>
+      </DropdownList>
+    </DropdownGroup>,
+    <Divider key="group1-divider" />,
+    <DropdownGroup key="group2" label="Group 2">
+      <DropdownList>
+        <DropdownItem value="4" id="4" isFavorited={favorites.includes('4')}>
+          Item 5
+        </DropdownItem>
+        <DropdownItem value="5" id="5" isFavorited={favorites.includes('5')}>
+          Item 6
+        </DropdownItem>
+        <DropdownItem value="6" id="6" isFavorited={favorites.includes('6')}>
+          Item 7
+        </DropdownItem>
+        <DropdownItem value="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.value)) {
+            favorites.push(child);
+          }
+        });
+      } else if (item.type === DropdownGroup) {
+        item.props.children.props.children.filter((child) => {
+          if (favIds.includes(child.props.value)) {
+            favorites.push(child);
+          }
+        });
+      } else {
+        if (favIds.includes(item.props.value)) {
+          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, value: string, actionId: string) => {
+    event.stopPropagation();
+    if (actionId === 'fav') {
+      const isFavorite = favorites.includes(value);
+      if (isFavorite) {
+        setFavorites(favorites.filter((fav) => fav !== value));
+      } else {
+        setFavorites([...favorites, value]);
+      }
+    }
+  };
+
+  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, value) => console.log('selected', value)}
+    >
+      {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, value) => value && setSelected(value.toString())}
+    >
+      <SelectList>
+        <SelectOption value="0" isSelected={selected === '0'}>
+          Option 1
+        </SelectOption>
+        <SelectOption value="1" isSelected={selected === '1'} isDisabled>
+          Disabled Option
+        </SelectOption>
+        <Divider key="group1-divider" />
+        <SelectGroup label="Group 1">
+          <SelectList>
+            <SelectOption value="2" isSelected={selected === '2'}>
+              Option 1
+            </SelectOption>
+            <SelectOption value="3" isSelected={selected === '3'}>
+              Option 2
+            </SelectOption>
+          </SelectList>
+        </SelectGroup>
+        <Divider key="group2-divider" />
+        <SelectGroup label="Group 2">
+          <SelectList>
+            <SelectOption value="4" isSelected={selected === '4'}>
+              Option 1
+            </SelectOption>
+            <SelectOption value="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/DataListDemo.md

@@ -217,11 +217,11 @@ class ExpandableDataList extends React.Component {
                   )}
                 >
                   <DropdownList>
-                    <DropdownItem itemId={0} key="action1">
+                    <DropdownItem value={0} key="action1">
                       Action
                     </DropdownItem>
                     <DropdownItem
-                      itemId={1}
+                      value={1}
                       key="link1"
                       to="#default-link2"
                       // Prevent the default onClick functionality for example purposes
@@ -229,10 +229,10 @@ class ExpandableDataList extends React.Component {
                     >
                       Link
                     </DropdownItem>
-                    <DropdownItem itemId={2} isDisabled key="disabled action1">
+                    <DropdownItem value={2} isDisabled key="disabled action1">
                       Disabled Action
                     </DropdownItem>
-                    <DropdownItem itemId={3} isDisabled key="disabled link1" to="#default-link4">
+                    <DropdownItem value={3} isDisabled key="disabled link1" to="#default-link4">
                       Disabled Link
                     </DropdownItem>
                   </DropdownList>
@@ -299,11 +299,11 @@ class ExpandableDataList extends React.Component {
                   )}
                 >
                   <DropdownList>
-                    <DropdownItem itemId={0} key="action2">
+                    <DropdownItem value={0} key="action2">
                       Action
                     </DropdownItem>
                     <DropdownItem
-                      itemId={1}
+                      value={1}
                       key="link2"
                       to="#default-link2"
                       // Prevent the default onClick functionality for example purposes
@@ -311,10 +311,10 @@ class ExpandableDataList extends React.Component {
                     >
                       Link
                     </DropdownItem>
-                    <DropdownItem itemId={2} isDisabled key="disabled action2">
+                    <DropdownItem value={2} isDisabled key="disabled action2">
                       Disabled Action
                     </DropdownItem>
-                    <DropdownItem itemId={3} isDisabled key="disabled link2" to="#default-link4">
+                    <DropdownItem value={3} isDisabled key="disabled link2" to="#default-link4">
                       Disabled Link
                     </DropdownItem>
                   </DropdownList>
@@ -381,11 +381,11 @@ class ExpandableDataList extends React.Component {
                   )}
                 >
                   <DropdownList>
-                    <DropdownItem itemId={0} key="action3">
+                    <DropdownItem value={0} key="action3">
                       Action
                     </DropdownItem>
                     <DropdownItem
-                      itemId={1}
+                      value={1}
                       key="link3"
                       to="#default-link2"
                       // Prevent the default onClick functionality for example purposes
@@ -393,10 +393,10 @@ class ExpandableDataList extends React.Component {
                     >
                       Link
                     </DropdownItem>
-                    <DropdownItem itemId={2} isDisabled key="disabled action3">
+                    <DropdownItem value={2} isDisabled key="disabled action3">
                       Disabled Action
                     </DropdownItem>
-                    <DropdownItem itemId={3} isDisabled key="disabled link3" to="#default-link4">
+                    <DropdownItem value={3} isDisabled key="disabled link3" to="#default-link4">
                       Disabled Link
                     </DropdownItem>
                   </DropdownList>

package/src/demos/DatePicker/DatePicker.md

@@ -2,7 +2,6 @@
 id: Date picker
 section: components
 subsection: date-and-time
-beta: true
 ---
 
 ## Demos

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { DatePicker, Modal, ModalVariant, Button, TimePicker, InputGroup } from '@patternfly/react-core';
+import {
+  DatePicker,
+  Modal,
+  ModalVariant,
+  Button,
+  TimePicker,
+  InputGroup,
+  InputGroupItem
+} from '@patternfly/react-core';
 
 export const SimpleModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -42,8 +50,12 @@ export const SimpleModal = () => {
         ]}
       >
         <InputGroup>
-          <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
-          <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
+          <InputGroupItem>
+            <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
+          </InputGroupItem>
         </InputGroup>
       </Modal>
     </React.Fragment>

package/src/demos/DateTimePicker.md

@@ -21,16 +21,7 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 ### Date and time range picker
 
 ```js
-import {
-  Flex,
-  FlexItem,
-  InputGroup,
-  DatePicker,
-  isValidDate,
-  TimePicker,
-  yyyyMMddFormat,
-  updateDateTime
-} from '@patternfly/react-core';
+import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
 
 DateTimeRangePicker = () => {
   const [from, setFrom] = React.useState();
@@ -84,26 +75,34 @@ DateTimeRangePicker = () => {
     <Flex direction={{ default: 'column', lg: 'row' }}>
       <FlexItem>
         <InputGroup>
-          <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-          <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+          <InputGroupItem>
+            <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+          </InputGroupItem>
         </InputGroup>
       </FlexItem>
       <FlexItem>to</FlexItem>
       <FlexItem>
         <InputGroup>
-          <DatePicker
-            value={isValidDate(to) ? yyyyMMddFormat(to) : to}
-            onChange={onToDateChange}
-            isDisabled={!isValidDate(from)}
-            rangeStart={from}
-            validators={[toValidator]}
-            aria-label="End date"
-            placeholder="YYYY-MM-DD"
-          />
-          <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+          <InputGroupItem>
+            <DatePicker
+              value={isValidDate(to) ? yyyyMMddFormat(to) : to}
+              onChange={onToDateChange}
+              isDisabled={!isValidDate(from)}
+              rangeStart={from}
+              validators={[toValidator]}
+              aria-label="End date"
+              placeholder="YYYY-MM-DD"
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+          </InputGroupItem>
         </InputGroup>
       </FlexItem>
     </Flex>
   );
-};
+}
 ```

package/src/demos/JumpLinks.md

@@ -43,7 +43,7 @@ ScrollspyH2 = () => {
 
   // Update offset based on the masthead and jump links nav heights.
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName('pf-c-masthead')[0];
+    const masthead = document.getElementsByClassName('pf-v5-c-masthead')[0];
     const offsetForPadding = 10;
 
     getResizeObserver(

package/src/demos/PasswordGenerator.md

@@ -15,6 +15,7 @@ import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'
 import React from 'react';
 import {
   InputGroup,
+  InputGroupItem,
   TextInput,
   Button,
   Popper,
@@ -119,23 +120,27 @@ const PasswordGenerator: React.FunctionComponent = () => {
   const textInput = (
     <div ref={searchInputRef} id="password-input">
       <InputGroup>
-        <TextInput
-          onFocus={() => {
-            setIsAutocompleteOpen(true);
-          }}
-          isRequired
-          type={passwordHidden ? 'password' : 'text'}
-          aria-label="Password input"
-          value={password}
-          onChange={onChange}
-        />
-        <Button
-          variant="control"
-          onClick={() => setPasswordHidden(!passwordHidden)}
-          aria-label={passwordHidden ? 'Show password' : 'Hide password'}
-        >
-          {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-        </Button>
+        <InputGroupItem isFill>
+          <TextInput
+            onFocus={() => {
+              setIsAutocompleteOpen(true);
+            }}
+            isRequired
+            type={passwordHidden ? 'password' : 'text'}
+            aria-label="Password input"
+            value={password}
+            onChange={onChange}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            variant="control"
+            onClick={() => setPasswordHidden(!passwordHidden)}
+            aria-label={passwordHidden ? 'Show password' : 'Hide password'}
+          >
+            {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     </div>
   );

package/src/demos/PasswordStrength.md

@@ -41,7 +41,7 @@ class PasswordStrengthDemo extends React.Component {
       passStrength: { variant: 'error', icon: <ExclamationCircleIcon />, text: 'Weak' }
     };
 
-    this.handlePasswordInput = (password) => {
+    this.handlePasswordInput = (_event, password) => {
       this.setState({ password });
       this.validate(password);
     };