feat(Menu): consumed Penta updates

Author: Eric Olkowski

packages/react-core/src/components/Button/Button.tsx

@@ -95,6 +95,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
   countOptions?: BadgeCountObject;
+  /** @hide Sets the role of the button. Should only be used when the button is a descendant of a menu or tablist. */
+  role?: 'menuitem' | 'tab';
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -124,6 +126,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   iconPosition = 'start',
   'aria-label': ariaLabel = null,
   icon = null,
+  role,
   ouiaId,
   ouiaSafe = true,
   tabIndex = null,
@@ -182,7 +185,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       disabled={isButtonElement ? isDisabled : null}
       tabIndex={tabIndex !== null ? tabIndex : getDefaultTabIdx()}
       type={isButtonElement || isInlineSpan ? type : null}
-      role={isInlineSpan ? 'button' : null}
+      role={isInlineSpan ? 'button' : role}
       ref={innerRef}
       {...ouiaProps}
     >

packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -11,13 +11,15 @@ propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ### Selectable date
 
 ```ts file="./CalendarMonthSelectableDate.tsx"
+
 ```
 
 ### Date range
 
 In this example, there are 2 dates selected: a range start date (via the `rangeStart` prop) and a range end date (via the `date` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `validators` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.
 
-For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](https://www.patternfly.org/v4/components/date-picker/react-demos).
+For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](/components/date-and-time/date-picker/react-demos).
 
 ```ts file="./CalendarMonthDateRange.tsx"
+
 ```

packages/react-core/src/components/Menu/MenuItemAction.tsx

@@ -3,8 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { MenuContext, MenuItemContext } from './MenuContext';
-
-export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'type' | 'ref'> {
+import { Button } from '../Button';
+export interface MenuItemActionProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the action button */
   className?: string;
   /** The action icon to use */
@@ -24,7 +24,7 @@ export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElem
 }
 
 const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
-  className = '',
+  className,
   icon,
   onClick,
   'aria-label': ariaLabel,
@@ -45,24 +45,29 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
             onActionClick && onActionClick(event, itemId, actionId);
           };
           return (
-            <button
+            <div
               className={css(
                 styles.menuItemAction,
                 isFavorited !== null && 'pf-m-favorite',
                 isFavorited && styles.modifiers.favorited,
                 className
               )}
-              aria-label={ariaLabel}
-              onClick={onClickButton}
-              {...((isDisabled === true || isDisabledContext === true) && { disabled: true })}
-              ref={innerRef}
-              tabIndex={-1}
               {...props}
             >
-              <span className={css(styles.menuItemActionIcon)}>
-                {icon === 'favorites' || isFavorited !== null ? <StarIcon aria-hidden /> : icon}
-              </span>
-            </button>
+              <Button
+                aria-label={ariaLabel}
+                onClick={onClickButton}
+                ref={innerRef}
+                role="menuitem"
+                variant="plain"
+                tabIndex={-1}
+                isDisabled={isDisabled || isDisabledContext}
+              >
+                <span className={css(styles.menuItemActionIcon)}>
+                  {icon === 'favorites' || isFavorited !== null ? <StarIcon aria-hidden /> : icon}
+                </span>
+              </Button>
+            </div>
           );
         }}
       </MenuItemContext.Consumer>

packages/react-core/src/helpers/KeyboardHandler.tsx

@@ -106,23 +106,30 @@ export const handleArrows = (
 
           if (!activeRow.length || onlyTraverseSiblings) {
             let nextSibling = activeElement;
-            // While a sibling exists, check each sibling to determine if it should be focussed
+
             while (nextSibling) {
-              // Set the next checked sibling, determined by the horizontal arrow key direction
-              nextSibling = key === 'ArrowLeft' ? nextSibling.previousElementSibling : nextSibling.nextElementSibling;
+              const isDirectChildOfNavigableElement = nextSibling.parentElement === element;
+              const nextSiblingMainElement = isDirectChildOfNavigableElement ? nextSibling : nextSibling.parentElement;
+              nextSibling =
+                key === 'ArrowLeft'
+                  ? nextSiblingMainElement.previousElementSibling
+                  : nextSiblingMainElement.nextElementSibling;
+
               if (nextSibling) {
                 if (validSiblingTags.includes(nextSibling.tagName)) {
-                  // If the sibling's tag is included in validSiblingTags, set the next target element and break the loop
                   moveTarget = nextSibling;
                   break;
                 }
-                // If the sibling's tag is not valid, skip to the next sibling if possible
+                // For cases where the validSiblingTag is inside a div wrapper
+                if (validSiblingTags.includes(nextSibling.children[0].tagName)) {
+                  moveTarget = nextSibling.children[0];
+                  break;
+                }
               }
             }
           } else {
             activeRow.forEach((focusableElement, index) => {
               if (event.target === focusableElement) {
-                // Once found, move up or down the array by 1. Determined by the vertical arrow key direction
                 const increment = key === 'ArrowLeft' ? -1 : 1;
                 currentIndex = index + increment;
                 if (currentIndex >= activeRow.length) {
@@ -132,7 +139,6 @@ export const handleArrows = (
                   currentIndex = activeRow.length - 1;
                 }
 
-                // Set the next target element
                 moveTarget = activeRow[currentIndex];
               }
             });