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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.98",
+  "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "cb753616f434b5fc8308a19047867f16e4cceb65"
+  "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/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>