@patternfly/react-core 5.0.0-alpha.87 → 5.0.0-alpha.89

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -7,14 +7,14 @@ import {
   DataListAction,
   DataListToggle,
   DataListContent,
-  DataListItemCells
+  DataListItemCells,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownPosition,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 
 export const DataListMixedExpandable: React.FunctionComponent = () => {
@@ -23,24 +23,24 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
   const [isOpen3, setIsOpen3] = React.useState(false);
   const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']);
 
-  const onToggle1 = (_event: any, isOpen1: boolean) => {
-    setIsOpen1(isOpen1);
+  const onToggle1 = () => {
+    setIsOpen1(!isOpen1);
   };
 
   const onSelect1 = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = (_event: any, isOpen2: boolean) => {
-    setIsOpen2(isOpen2);
+  const onToggle2 = () => {
+    setIsOpen2(!isOpen2);
   };
 
   const onSelect2 = () => {
     setIsOpen2(!isOpen2);
   };
 
-  const onToggle3 = (_event: any, isOpen3: boolean) => {
-    setIsOpen3(isOpen3);
+  const onToggle3 = () => {
+    setIsOpen3(!isOpen3);
   };
 
   const onSelect3 = () => {
@@ -89,26 +89,42 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen1}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect1}
-                toggle={<KebabToggle onToggle={onToggle1} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen1}
+                    onClick={onToggle1}
+                    variant="plain"
+                    aria-label="Data list mixed expandable example kebab toggle 1"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen1}
+                onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
           <DataListContent
-            aria-label="First expandable content details"
+            aria-label="First mixed expandable content details"
             id="m-ex-expand1"
             isHidden={!expanded.includes('m-ex-toggle1')}
           >
@@ -151,22 +167,38 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen2}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect2}
-                toggle={<KebabToggle onToggle={onToggle2} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen2}
+                    onClick={onToggle2}
+                    variant="plain"
+                    aria-label="Data list mixed expandable example kebab toggle 2"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen2}
+                onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action2">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link2" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action2" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link2" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
         </DataListItem>
@@ -201,26 +233,42 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen3}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect3}
-                toggle={<KebabToggle onToggle={onToggle3} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen3}
+                    onClick={onToggle3}
+                    variant="plain"
+                    aria-label="Data list mixed expandable example kebab toggle 3"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen3}
+                onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action3">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link3" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action3" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link3" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
           <DataListContent
-            aria-label="Third expandable content details"
+            aria-label="Third mixed expandable content details"
             id="m-ex-expand3"
             isHidden={!expanded.includes('m-ex-toggle3')}
           >

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -5,30 +5,30 @@ import {
   DataListCell,
   DataListItemRow,
   DataListItemCells,
-  DataListAction
+  DataListAction,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownPosition,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DataListSelectableRows: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
 
-  const onToggle1 = (_event: any, isOpen1: boolean) => {
-    setIsOpen1(isOpen1);
+  const onToggle1 = () => {
+    setIsOpen1(!isOpen1);
   };
 
   const onSelect1 = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = (_event: any, isOpen2: boolean) => {
-    setIsOpen2(isOpen2);
+  const onToggle2 = () => {
+    setIsOpen2(!isOpen2);
   };
 
   const onSelect2 = () => {
@@ -67,22 +67,38 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen1}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect1}
-                toggle={<KebabToggle onToggle={onToggle1} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen1}
+                    onClick={onToggle1}
+                    variant="plain"
+                    aria-label="Data list selectable rows example kebab toggle 1"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen1}
+                onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
         </DataListItem>
@@ -102,22 +118,38 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <DropdownDeprecated
-                isPlain
-                position={DropdownPosition.right}
-                isOpen={isOpen2}
+              <Dropdown
+                popperProps={{ position: 'right' }}
                 onSelect={onSelect2}
-                toggle={<KebabToggle onToggle={onToggle2} />}
-                dropdownItems={[
-                  <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="action" component="button">
-                    Action
-                  </DropdownItemDeprecated>,
-                  <DropdownItemDeprecated key="disabled link" isDisabled>
+                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isOpen2}
+                    onClick={onToggle2}
+                    variant="plain"
+                    aria-label="Data list selectable rows example kebab toggle 2"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+                isOpen={isOpen2}
+                onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
+              >
+                <DropdownList>
+                  <DropdownItem key="action2">Action</DropdownItem>
+                  {/* Prevent default onClick functionality for example
+                  purposes */}
+                  <DropdownItem key="link2" to="#" onClick={(event: any) => event.preventDefault()}>
+                    Link
+                  </DropdownItem>
+                  <DropdownItem key="disabled action2" isDisabled>
+                    Disabled Action
+                  </DropdownItem>
+                  <DropdownItem key="disabled link2" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
                     Disabled Link
-                  </DropdownItemDeprecated>
-                ]}
-              />
+                  </DropdownItem>
+                </DropdownList>
+              </Dropdown>
             </DataListAction>
           </DataListItemRow>
         </DataListItem>

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -11,30 +11,30 @@ import {
   DataListItemRow,
   Text,
   TextVariants,
-  TextContent
+  TextContent,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle,
-  DropdownPosition
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = React.useState(true);
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
 
-  const onToggle1 = (_event: any, isOpen1: boolean) => {
-    setIsOpen1(isOpen1);
+  const onToggle1 = () => {
+    setIsOpen1(!isOpen1);
   };
 
   const onSelect1 = () => {
     setIsOpen1(!isOpen1);
   };
 
-  const onToggle2 = (_event: any, isOpen2: boolean) => {
-    setIsOpen2(isOpen2);
+  const onToggle2 = () => {
+    setIsOpen2(!isOpen2);
   };
 
   const onSelect2 = () => {
@@ -114,22 +114,43 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <DropdownDeprecated
-                  isPlain
-                  position={DropdownPosition.right}
-                  isOpen={isOpen1}
+                <Dropdown
+                  popperProps={{ position: 'right' }}
                   onSelect={onSelect1}
-                  toggle={<KebabToggle onToggle={onToggle1} />}
-                  dropdownItems={[
-                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="action" component="button">
-                      Action
-                    </DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="disabled link" isDisabled>
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen1}
+                      onClick={onToggle1}
+                      variant="plain"
+                      aria-label="Data list width modifiers example kebab toggle 1"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                  isOpen={isOpen1}
+                  onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
+                >
+                  <DropdownList>
+                    <DropdownItem key="action">Action</DropdownItem>
+                    {/* Prevent default onClick functionality for example
+                  purposes */}
+                    <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                      Link
+                    </DropdownItem>
+                    <DropdownItem key="disabled action" isDisabled>
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem
+                      key="disabled link"
+                      isDisabled
+                      to="#"
+                      onClick={(event: any) => event.preventDefault()}
+                    >
                       Disabled Link
-                    </DropdownItemDeprecated>
-                  ]}
-                />
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
               </DataListAction>
             </DataListItemRow>
           </DataListItem>
@@ -174,22 +195,43 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <DropdownDeprecated
-                  isPlain
-                  position={DropdownPosition.right}
-                  isOpen={isOpen2}
+                <Dropdown
+                  popperProps={{ position: 'right' }}
                   onSelect={onSelect2}
-                  toggle={<KebabToggle onToggle={onToggle2} />}
-                  dropdownItems={[
-                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="action" component="button">
-                      Action
-                    </DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="disabled link" isDisabled>
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen2}
+                      onClick={onToggle2}
+                      variant="plain"
+                      aria-label="Data list width modifiers example kebab toggle 2"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                  isOpen={isOpen2}
+                  onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
+                >
+                  <DropdownList>
+                    <DropdownItem key="action2">Action</DropdownItem>
+                    {/* Prevent default onClick functionality for example
+                  purposes */}
+                    <DropdownItem key="link2" to="#" onClick={(event: any) => event.preventDefault()}>
+                      Link
+                    </DropdownItem>
+                    <DropdownItem key="disabled action2" isDisabled>
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem
+                      key="disabled link2"
+                      isDisabled
+                      to="#"
+                      onClick={(event: any) => event.preventDefault()}
+                    >
                       Disabled Link
-                    </DropdownItemDeprecated>
-                  ]}
-                />
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
               </DataListAction>
             </DataListItemRow>
             <DataListContent aria-label="Primary Content Details" id="width-ex3-expand1" isHidden={!show}>

package/src/components/Dropdown/Dropdown.tsx

@@ -52,7 +52,6 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
@@ -106,23 +105,21 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       isPlain={isPlain}
       isScrollable={isScrollable}
       {...props}
+      {...ouiaProps}
     >
       <MenuContent>{children}</MenuContent>
     </Menu>
   );
   return (
-    <div ref={containerRef} {...ouiaProps}>
-      <Popper
-        trigger={toggle(toggleRef)}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        appendTo={containerRef.current || undefined}
-        isVisible={isOpen}
-        zIndex={zIndex}
-        {...popperProps}
-      />
-    </div>
+    <Popper
+      trigger={toggle(toggleRef)}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      zIndex={zIndex}
+      {...popperProps}
+    />
   );
 };
 

package/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -2,46 +2,43 @@
 
 exports[`match snapshot 1`] = `
 <DocumentFragment>
-  <div
-    data-ouia-component-id="dropdown"
-    data-ouia-component-type="PF4/Dropdown"
-    data-ouia-safe="true"
-  >
-    <div>
-      <div
-        class="customClass"
-        data-testid="menu-mock"
-      >
+  <div>
+    <div
+      class="customClass"
+      data-ouia-component-id="dropdown"
+      data-ouia-component-type="PF4/Dropdown"
+      data-ouia-safe="true"
+      data-testid="menu-mock"
+    >
+      <div>
         <div>
-          <div>
-            Dropdown children
-          </div>
+          Dropdown children
         </div>
       </div>
-      <div>
-        Mock item
-      </div>
-      <p>
-        isPlain: true
-      </p>
-      <p>
-        isScrollable: true
-      </p>
-      <p>
-        minWidth: undefined
-      </p>
+    </div>
+    <div>
+      Mock item
     </div>
     <p>
-      zIndex: 9999
+      isPlain: true
     </p>
     <p>
-      isOpen: true
+      isScrollable: true
     </p>
-    <div>
-      <button>
-        Dropdown
-      </button>
-    </div>
+    <p>
+      minWidth: undefined
+    </p>
+  </div>
+  <p>
+    zIndex: 9999
+  </p>
+  <p>
+    isOpen: true
+  </p>
+  <div>
+    <button>
+      Dropdown
+    </button>
   </div>
 </DocumentFragment>
 `;

package/src/components/Dropdown/examples/Dropdown.md

@@ -4,7 +4,6 @@ section: components
 subsection: menus
 cssPrefix: pf-c-menu
 propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle']
-beta: true
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';