@patternfly/react-core 5.0.0-alpha.97 → 5.0.0-alpha.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.97",
+  "version": "5.0.0-alpha.99",
   "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",
@@ -49,7 +49,7 @@
     "@patternfly/react-icons": "^5.0.0-alpha.14",
     "@patternfly/react-styles": "^5.0.0-alpha.10",
     "@patternfly/react-tokens": "^5.0.0-alpha.9",
-    "focus-trap": "7.4.0",
+    "focus-trap": "7.4.1",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "2f2eb377c744647e34d557e1550ae7a01f87f5a6"
+  "gitHead": "00f77395c5d7d3e1fb8fc44c337cfdb63ab31638"
 }

package/src/components/Dropdown/DropdownItem.tsx

@@ -27,7 +27,7 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   ouiaSafe?: boolean;
 }
 
-const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
+const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
   children,
   className,
   description,
@@ -42,12 +42,12 @@ const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
   return (
     <MenuItem
-      ref={innerRef}
       className={css(className)}
       description={description}
       isDisabled={isDisabled}
       itemId={itemId}
       onClick={onClick}
+      ref={innerRef}
       {...ouiaProps}
       {...props}
     >
@@ -55,7 +55,8 @@ const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
     </MenuItem>
   );
 };
-export const DropdownItem = React.forwardRef((props: DropdownItemProps, ref: React.Ref<any>) => (
+
+export const DropdownItem = React.forwardRef((props: DropdownItemProps, ref: React.Ref<HTMLAnchorElement | HTMLButtonElement>) => (
   <DropdownItemBase {...props} innerRef={ref} />
 ));
 

package/src/components/Label/Label.tsx

@@ -232,30 +232,31 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     setCurrValue(editableInputRef.current.value);
   };
 
-  let labelComponentChild = <span className={css(styles.labelContent)}>{content}</span>;
-
+  let LabelComponentChildElement = 'span';
   if (href) {
-    labelComponentChild = (
-      <a className={css(styles.labelContent)} href={href}>
-        {content}
-      </a>
-    );
+    LabelComponentChildElement = 'a';
   } else if (isEditable) {
-    labelComponentChild = (
-      <button
-        ref={editableButtonRef}
-        className={css(styles.labelContent)}
-        onClick={(e: React.MouseEvent) => {
-          setIsEditableActive(true);
-          e.stopPropagation();
-        }}
-        {...editableProps}
-      >
-        {content}
-      </button>
-    );
+    LabelComponentChildElement = 'button';
   }
 
+  const labelComponentChildProps = {
+    className: css(styles.labelContent),
+    ...(isTooltipVisible && { tabIndex: 0 }),
+    ...(href && { href }),
+    ...(isEditable && {
+      ref: editableButtonRef,
+      onClick: (e: React.MouseEvent) => {
+        setIsEditableActive(true);
+        e.stopPropagation();
+      },
+      ...editableProps
+    })
+  };
+
+  let labelComponentChild = (
+    <LabelComponentChildElement {...labelComponentChildProps}>{content}</LabelComponentChildElement>
+  );
+
   if (render) {
     labelComponentChild = (
       <React.Fragment>

package/src/components/Popover/examples/Popover.md

@@ -14,6 +14,11 @@ import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 ## Examples
 
+By default, the `appendTo` prop of the popover will append it to the parent element. However, in some cases, the popover might be too big for the parent and not fully visible. To solve this issue, users have two options:
+
+1. Add the prop `appendTo={() => document.body}` to append the popover to the document body instead of the parent element.
+2. Increase the z-index of the parent element to be higher than the z-index of the element that is hiding the popover.
+
 ### Basic
 
 ```ts file="./PopoverBasic.tsx"
@@ -38,6 +43,8 @@ Note: If you use the isVisible prop, either refer to the example above or if you
 
 ### Width auto
 
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
 ```ts file="./PopoverWidthAuto.tsx"
 ```
 
@@ -58,10 +65,14 @@ Note: If you use the isVisible prop, either refer to the example above or if you
 
 ### Popover with icon in the title
 
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
 ```ts file="./PopoverWithIconInTheTitle.tsx" 
 ```
 
 ### Alert popover
 
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
 ```ts file="./PopoverAlert.tsx" 
 ```

package/src/components/Popover/examples/PopoverAlert.tsx

@@ -38,6 +38,7 @@ export const AlertPopover: React.FunctionComponent = () => {
           headerComponent="h1"
           bodyContent={<div>Popovers are triggered by click rather than hover.</div>}
           footerContent="Popover footer"
+          appendTo={() => document.body}
         >
           <Button>Toggle popover</Button>
         </Popover>

package/src/components/Popover/examples/PopoverWidthAuto.tsx

@@ -7,6 +7,7 @@ export const PopoverWidthAuto: React.FunctionComponent = () => (
       aria-label="Popover with auto-width"
       hasAutoWidth
       bodyContent={() => <div>Removes fixed-width and allows width to be defined by contents</div>}
+      appendTo={() => document.body}
     >
       <Button>Toggle popover</Button>
     </Popover>

package/src/components/Popover/examples/PopoverWithIconInTheTitle.tsx

@@ -10,6 +10,7 @@ export const PopoverWithIconInTheTitle: React.FunctionComponent = () => (
       headerIcon={<BullhornIcon />}
       bodyContent={<div>Popovers are triggered by click rather than hover.</div>}
       footerContent="Popover footer"
+      appendTo={() => document.body}
     >
       <Button>Toggle popover</Button>
     </Popover>

package/src/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useWizardFooter } from '../useWizardFooter';
 import * as WizardContext from '../../WizardContext';

package/src/demos/examples/DashboardWrapper.js

@@ -58,7 +58,7 @@ export default class DashboardWrapper extends React.Component {
       header,
       sidebar,
       sidebarNavOpen,
-      onPageResize,
+      onPageResize = () => {},
       hasNoBreadcrumb,
       notificationDrawer,
       isNotificationDrawerExpanded,

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -56,6 +56,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import { KeyTypes } from '../../../helpers';
 
 interface Repository {
   name: string;
@@ -135,15 +136,47 @@ export const TablesAndTabs = () => {
     }
   ];
 
+  const firstActionRef = React.useRef<HTMLButtonElement>(null);
+
+  /** Handles when the user clicks on the custom action toggle, stops propagation to prevent the drawer from opening */
+  const handleActionsToggleClick = (event: React.MouseEvent, ActionsToggleProps: CustomActionsToggleProps) => {
+    const { onToggle } = ActionsToggleProps;
+
+    onToggle(event);
+    event.stopPropagation();
+  };
+
+  /** Enables keyboard navigation of the custom actions toggle */
+  const handleActionsToggleKeyDown = (event: React.KeyboardEvent, ActionsToggleProps: CustomActionsToggleProps) => {
+    const { onToggle } = ActionsToggleProps;
+    const { Enter, Space, Escape, ArrowDown, ArrowUp } = KeyTypes;
+
+    const shouldToggle = [Enter, Space, Escape].includes(event.key);
+    const shouldFocus = [ArrowDown, ArrowUp, Enter, Space].includes(event.key);
+
+    if (shouldToggle) {
+      event.preventDefault();
+      event.stopPropagation();
+      onToggle(event);
+    }
+
+    if (shouldFocus) {
+      setTimeout(() => {
+        firstActionRef.current?.focus();
+      }, 0);
+    }
+  };
+
   const customActionsToggle = (props: CustomActionsToggleProps, toggleName: string) => (
     <MenuToggle
       isDisabled={props.isDisabled}
-      onClick={(event: any) => {
-        props.onToggle(event);
-        event.stopPropagation();
-      }}
+      onClick={(event: React.MouseEvent) => handleActionsToggleClick(event, props)}
+      onKeyDown={(event: React.KeyboardEvent) => handleActionsToggleKeyDown(event, props)}
       variant="plain"
       aria-label={`${toggleName} actions`}
+      aria-haspopup="menu"
+      isExpanded={props.isOpen}
+      ref={props.toggleRef}
     >
       <EllipsisVIcon />
     </MenuToggle>
@@ -270,6 +303,7 @@ export const TablesAndTabs = () => {
               <ActionsColumn
                 items={defaultActions}
                 actionsToggle={(props: CustomActionsToggleProps) => customActionsToggle(props, repo.name)}
+                firstActionItemRef={firstActionRef}
               />
             </Td>
           </Tr>